Majhni CSS triki - 4. del
~ 24. september 2004 ~
"Ura je petek" in čas je za novi CSS trik. Ena izmed slabosti CSS-ja, je sposobnost kontroliranja navpične višine, ki povzroča določen problem, ki ga pri tabelah nismo poznali. Govorim o problemu, ki se pojavi, če želimo barvo ozadja do dna ekrana.
Navpično kontroliranje barve ozadja
Recimo, da želimo na levo stran (ali desno, kot je na moji dolgočasni domači strani) postaviti kolono z navigacijo. Spletna stran ima belo ozadje, mi pa želimo, da je kolona z navigacijo sive barve. To lahko preprosto rešimo z naslednjimi pravili:
#navigacija {background: #ccc;width: 200px;}
Tukaj naletimo na naš problem. Ponavadi so kolone z navigacijo krajše od vsebine in se ne raztezajo do dna ekrana. Zaradi tega je barva ozadja (v našem primeru siva) odrezana in se ne nadaljuje do dna ekrana, kot smo si zamislili. Kaj lahko naredimo? Rešitev je zelo preprosta:
body {background: url(bgSivo.gif) 0 0 repeat-y;}
Slika, ki smo jo uporabili za ozadje, mora biti široka točno 200px in enake sive barve, kot je barva ozadja leve kolone. Majhna slabost te metode je, da mora biti širina kolone določena v pikslih in mora biti ves čas enaka, neglede na širino brskalnika.
Seveda to ni edina metoda, za rešitev našega problema, je pa sigurno najenostavnejša za implementacijo in deluje v vseh spletnih brskalnikih.