Majhni CSS triki - 3. del
~ 20. september 2004 ~
Z nekaj zamude objavljam 3. del iz serije člankov "Majhni CSS triki" (1. del, 2. del). V tem delu si bomo pogledali kako s CSS poravnamo, na sredino ekrana, celo spletno stran (zgleden primer je moja dolgočasna domača stran).
Horizontalno centriranje blok elementov
Torej bi radi imeli spletno stran s fiksno širino, ki bi bila poravnana v sredini brskalnika, neglede na njegovo širino? Za to bi uporabili:
#vsebina {
width: 750px;
margin: 0 auto;
}
Vsakemu elementu, ki bi ga v HTML dokumentu uporabili znotraj <div id="vsebina"> bi bila dodeljena avtomatska širina lastnosti margin-left in margin-right. S tem bi zagotovili centrirano poravnavo neglede na širino brskalnika. Preprosto ... pravzaprav ne, ker obstajajo brskalniki, kateri ne bodo centrirali elementov s tem CSS-jem. Skrbijo nas predvsem starejše verzije Internet Explorer-ja (starejši od IE 6).
Da bi zagotovili enak učinek tudi v starejših brskalnikih moramo spremeniti CSS:
body {
text-align: center;
}
#vsebina {
text-align: left;
width: 750px;
margin: 0 auto;
}
To bo centriralo vse elemente v body HTML dokumentu vključno s tekstom! Da se znebimo drugega, nezaželjenega efekta, uporabimo v sekciji vsebina text-align: left.
Komentarji
PicNiK ~ 3. oktober 2004 ob 21:54
To pa je malo sposojeno iz SimpleBits ;)
No, čisto nič narobe. Lepo je, da imamo napisano tudi v slovenščini.
Drugače pa ql blog.
Miha Kuntu ~ 4. oktober 2004 ob 13:20
Lahko bi rekli, da je sposojeno iz dostih spletnih strani, ker je to najbolj priljubljena tehnika za centrirano poravnavo cele strani. Podobnih primerov je na Internetu OGROMNO!!!