Div's centreren

Door Zero XT op 28-07-2006 01:58

926 views

Goedendag,

Ik probeer mijn site in het midden van de pagina te krijgen maar het wil niet echt lukken
hij moet alleen horizontaal gecentreerd worden
in layer 34 zitten alle andere layers
voorbeeld: http://84.83.30.85/SkullDump

dit is de css die ik gebruik voor mijn site:


body {
border: 0;
padding: 0;
text-align: center;
height: 96%;
}

#Layer34 {
width: 955px;
height: 500px;
margin-left: auto;
margin-right: auto;
margin-top: 9%;
}



#Layer1 {
    position:absolute;
    left:0px;
    top:0px;
    width:180px;
    height:77px;
    z-index:8;
    background-image: url(Afbeeldingen/Grid 3.gif);
    background-image: url(Afbeeldingen/Grid%204.png);
}
#Layer2 {
    position:absolute;
    left:180px;
    top:0px;
    width:626px;
    height:77px;
    z-index:9;
    background-color: #191919;
}
#Layer3 {
    position:absolute;
    left:806px;
    top:0px;
    width:190px;
    height:77px;
    z-index:10;
    background-image: url(Afbeeldingen/Grid%201.PNG);
}
body {
    background-color: #191919;
}
#Layer4 {
    position:absolute;
    left:0px;
    top:77px;
    width:996px;
    height:25px;
    z-index:11;
    background-image: url(Afbeeldingen/Balk%201.PNG);
}
#Layer5 {
    position:absolute;
    left:0px;
    top:102px;
    width:180px;
    height:350px;
    z-index:12;
    background-image: url(Afbeeldingen/Grid%202.PNG);
}
#Layer6 {
    position:absolute;
    left:180px;
    top:102px;
    width:816px;
    height:350px;
    z-index:13;
    background-color: #354147;
}
#Layer7 {
    position:absolute;
    left:0px;
    top:450px;
    width:996px;
    height:25px;
    z-index:14;
    background-image: url(Afbeeldingen/Balk%201.PNG);
}
#Layer8 {
    position:absolute;
    left:0px;
    top:477px;
    width:180px;
    height:133px;
    z-index:15;
    background-image: url(Afbeeldingen/Grid%203.gif);
}
#Layer9 {
    position:absolute;
    left:25px;
    top:118px;
    width:98px;
    height:27px;
    z-index:9;
}
#Layer10 {
    position:absolute;
    left:25px;
    top:310px;
    width:98px;
    height:27px;
    z-index:10;
}
#Layer11 {
    position:absolute;
    left:25px;
    top:246px;
    width:98px;
    height:27px;
    z-index:11;
}
#Layer12 {
    position:absolute;
    left:25px;
    top:182px;
    width:98px;
    height:27px;
    z-index:12;
}
#Layer13 {
    position:absolute;
    left:25px;
    top:214px;
    width:98px;
    height:27px;
    z-index:13;
}
#Layer14 {
    position:absolute;
    left:25px;
    top:278px;
    width:98px;
    height:27px;
    z-index:14;
}
#Layer15 {
    position:absolute;
    left:25px;
    top:150px;
    width:98px;
    height:27px;
    z-index:15;
}
#Layer16 {
    position:absolute;
    left:937px;
    top:78px;
    width:62px;
    height:25px;
    z-index:16;
}
#Layer17 {
    position:absolute;
    left:2px;
    top:576px;
    width:136px;
    height:25px;
    z-index:17;
}
#Layer18 {
    position:absolute;
    left:2px;
    top:568px;
    width:64px;
    height:43px;
    z-index:18;
    background-color: #FFFFFF;
}
#Layer19 {
    position:absolute;
    left:176px;
    top:0px;
    width:225px;
    height:78;
    z-index:19;
}
#Layer20 {
    position:absolute;
    left:363px;
    top:511px;
    width:83px;
    height:57px;
    z-index:19;
}
#Layer21 {
    position:absolute;
    left:194px;
    top:121px;
    width:703px;
    height:25px;
    z-index:18;
    background-color: #191919;
}
#Layer22 {
    position:absolute;
    left:183px;
    top:596px;
    width:321px;
    height:13px;
    z-index:19;
}
#Layer23 {
    position:absolute;
    left:264px;
    top:270px;
    width:78px;
    height:39px;
    z-index:20;
}
#Layer24 {
    position:absolute;
    left:279px;
    top:207px;
    width:59px;
    height:33px;
    z-index:20;
}
#Layer25 {
    position:absolute;
    left:39px;
    top:0px;
    width:66px;
    height:40px;
    z-index:20;
}
#Layer26 {
    position:absolute;
    left:25px;
    top:134px;
    width:98px;
    height:27px;
    z-index:20;
}
#Layer27 {
    position:absolute;
    left:25px;
    top:171px;
    width:98px;
    height:27px;
    z-index:21;
}
#Layer28 {
    position:absolute;
    left:25px;
    top:207px;
    width:98px;
    height:27px;
    z-index:22;
}
#Layer29 {
    position:absolute;
    left:25px;
    top:243px;
    width:98px;
    height:27px;
    z-index:23;
}
#Layer30 {
    position:absolute;
    left:25px;
    top:279px;
    width:98px;
    height:27px;
    z-index:24;
}
#Layer31 {
    position:absolute;
    left:25px;
    top:315px;
    width:98px;
    height:27px;
    z-index:25;
}
#Layer32 {
    position:absolute;
    left:25px;
    top:387px;
    width:98px;
    height:27px;
    z-index:26;
}
#Layer33 {
    position:absolute;
    left:25px;
    top:351px;
    width:98px;
    height:25px;
    z-index:27;
}

Iemand enig idee hoe ik dit kan oplossen?
Dat ik als ik een resolutie heb van 1280x786 de site netjes horizontaal is gecentreerd op het beeldscherm?

PHP hulp

28-07-2006 19:34

Oke... *kijkt bedenkelijk naar alle moeilijke woorden die Jan net heeft getypt en komt op de conclusie dat ze er niets van snapt* Heel fijn voor dreamweaver :P

btw, het is me eindelijk gelukt die div's te centreren. :D

Zero XT

28-07-2006 19:35

dat is mooi lotte hoe heb je het gedaan? want ik ben de klos kwijt:S

Kalle P

28-07-2006 19:39

@lotte
je kan ze googlen bv. Maar infeite zijn het ingeboude foefjes, voor mensen zonder kennis, of weinig kennis, of als je je kennis ff kwijt bent na een een 7 uur tijdsverschil en nog niet geslapen te hebben....

PHP hulp

28-07-2006 19:47

Kris Kuiper schreef op 28.07.2006 19:35
dat is mooi lotte hoe heb je het gedaan? want ik ben de klos kwijt:S

Jans code gekopiëerd. Ik heb niet zoveel om te centreren. Ik moest enkel de juiste code hebben want mijn layout doet het nu nog enkel in IE. En daar ga ik wat aan proberen te doen. :D

Jan Koehoorn

28-07-2006 19:52

Lotte schreef op 28.07.2006 19:34
Oke... *kijkt bedenkelijk naar alle moeilijke woorden die Jan net heeft getypt en komt op de conclusie dat ze er niets van snapt*

* syntax highlighting
(je code krijgt kleurtjes)
* code completion
(als je de beginletters van iets typt, maakt DreamWeaver het woord voor je af)
* auto indenting
(als je een regel inspringt met 1 tab, dan zorgt DreamWeaver er voor dat je volgende regel ook 1 tab inspringt)

Zero XT

28-07-2006 19:53

jah allemaal mooie dingen, egt iets voor de designer... die niet veel van codes zoals ik afweet

maar moet ik nu egt helemaal mijn site overnieuw gaan schrijven alleen omdat ik mn site in het midden wil hebben?:S

Jan Koehoorn

28-07-2006 19:55

Kris Kuiper schreef op 28.07.2006 19:33
maar alles wat ik wil is dat alles gecentreerd word.... en dan moet ik mijn hele site overnieuw maken????

Okee, paardenmiddel:

[li]Haal alle lege divs uit je code[/li]
[li]Zet vlak NA de <body> tag: <div id="paardenmiddel">[/li]
[li]Zet vlak VOOR de </body> tag: </div>[/li]

nu in je CSS:


#paardenmiddel {
    position: relative;
    margin: 0px auto;
    width: 800px;
    padding: 0px;
}

[edit]
foutje
[/edit]

PHP hulp

28-07-2006 22:00

Ik dacht dat het me gelukt was maar dat is het dus niet. Omdat het ongeveer over hetzelfde gaat open ik geen nieuwe topic.

Ik ben erachter dat mijn probleem een bug in IE is. Mijn probleem is het volgende:

Ik ben bezig mijn layout van bouterworld ook bruikbaar te maken voor FireFox. (de url waar ik uitprobeer: http://www.bouterworld.nl/images/css.html) Het enige wat ik tot nu toe heb is een plaatje (de header) in het midden van de site zetten zodat hij mooi aansluit bij de achtergrond. Maar in IE klopt het niet helemaal. Hij sluit niet mooi aan. Weet iemand of er een andere oplossing is waardoor ik geen last heb van die bug?

Jan Koehoorn

28-07-2006 22:07

Voeg eens toe aan je CSS:


html, body {
    margin: 0px;
    padding: 0px;
}

Joren de Wit

28-07-2006 22:08

Ik ben bezig mijn layout van bouterworld ook bruikbaar te maken voor FireFox.

Het is vaak verstandiger om andersom te werken aangezien FF veel dichter bij de w3c standaard blijft dan IE...

Om de resultaten van je css voor zowel IE als FF hetzelfde te laten zijn, kun je op de plaatsen waar de css door IE anders geïnterpreteerd wordt de IE hack gebruiken:

voice-family: "\"}\"";
voice-family:inherit;

Voor meer info over css hacks:

http://validweb.nl/artikelen/css/css-hacks/

Reageren

Inloggen om te reageren