CSS

Sve o CSS-u

05.12.2004.

Kako vertikalno centrirati ?

Zasigurno je već svima poznato kako W3C, doduše odavno, al u posljednje vrijeme sve više ne preporučuje korištenje tabela pri izradi izgleda stranice. Tabele su vam omogućavale da na jednostavne načine napravite izgled vašeg HTML dokumenta sa neograničenim brojem kolona i redova, te za razliku od layera, nisu vas ograničavale pri vertikalnom poravnanju. Znači vrlo lako se mogao podesiti bilo kakav vertikalni alignement u bilo kojoj ćeliji. Ali, danas pošto napokon, dolazi vrijeme stranica koje svoj dizajn ne grade na tabelama, što donosi mnoge prednosti, već na divovima - tableless, postoje i mnoga ograničenja koja vam ne omogućavaju da radite ono što ste radili sa tabelama. Jedno od njih je i nepostojanje vertikalnog poravnanja, tj. alignementa. Da skratimo priču, i pređemo na današnji savjet.

Dok mnogi pokušavaju da vertikalno centriraju <div> pomoću javascripta, ljudi su se dosjetili jednog drugog dosta jednostavnijeg i bezbolnijeg riješenja. O čemu se radi? Napravite jedan <div> i nazovite ga "kontejner". Unesite u njega neki tekst i to je sve što trebate napraviti u HTML dokumentu.

Znači HTML kôd treba da izgleda ovako:
[pre]<html>
<head>
<title>Vertical alignement</title>
</head>
<body>
<div id="kontejner">
Lorem ipsum dolor sit amet...
</div>
</body>
</html>
[/pre]
Sada možete početi pisati CSS. Što se tiče CSS-a, vertikalno poravnanje se postiže tako što se <div> #kontejner pozicionira apsolutno, te mu se podese atributi left na 50% i top na 50%. Zatim se tom divu moraju dodati negativne margine s lijeve i gornje strane. Numeričke vrijednosti margina moraju iznositi polovinu širine (za lijevu marginu), i polovinu visine diva (za gornju marginu).

CSS treba da izgleda ovako:
[pre]body
{
font-family: verdana;
font-size:10px;
color: white;
background-color: #003;
margin: 0px;
}
#kontejner {
background-color: #f00;
margin-top: -35px;
margin-left: -150px;
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 75px;
}[/pre]

CSS
<< 12/2004 >>
nedponutosricetpetsub
01020304
05060708091011
12131415161718
19202122232425
262728293031

Moji linkovi

CSS linkovi

Cool blogovi


Brojač posjeta
13704

rss Powered by Blogger.ba