Daugumą klasikinių interneto svetainių galima išskirti į dvi grupes pagal jų atvaizdavimo principą. Svetainė centruojama naršyklės lange arba ji yra prisiglaudusi prie kairiojo krašto. Žinoma, atsiranda ir kūrybingesnių žmonių sugalvojančių įmantrių atvaizdavimo būdų, bet dažniausiai naudojamas centruoto puslapio variantas.
Nusprendžiau trumpai ir aiškiai aprašyti kaip centruojama svetainė interneto naršyklėje. Viso labo tai kelios CSS kodo eilutės, tačiau net ir tokie dalykai kai kuriems žmonėms praverčia.
Norint svetainę centruoti, turime žinoti jos plotį. Vienintelis dalykas, kurio reikia iš HTML pusės, tai apsirašyti šakninį svetainės elementą, pavadinkime jį pvz.: site. Dabar CSS faile aprašome stilių site ir body žymoms.
Po Rimanto komentaro, išsiaiškinom, kad tai gali būti atlikta su dar mažiau kodo. O tam kad IE6 rodytų teisingai tiesiog turi būti nurodytas DOCTYPE. Nemanau, kad dabar yra svetainių, kuriose jis būtų praleistas. Liko tik dvi eilutės CSS.
-
body {margin: 0;}
-
#site {width: 998px; margin: 0 auto;}
Su paaiškinimu:
-
body {
-
margin: 0; /* Numušam automatinius marginus body elementui, kitaip bus tarpas */
-
}
-
-
#site {
-
width: 998px; /* Nurodom koks bus plotis, kitaip margin: 0 auto; bevertis */
-
margin: 0 auto; /* Pasakom, kad viršuje ir apačioje tarpo nepalikti, o atstumai tarp šonų būtų vienodi */
-
}