Dnevnik eklektika - Piše Dragan Babić

Pribijanje layouta uz ivice browsera i misteriozna margina

Povodom jedne teme na DZ forumima odlučio sam ovde da napišem par stvari o tehnici koju teba koristiti da bi pribili svoj layout uz ivice browsera.

Kada je reč o bočnim stranicama—stvar je veoma jednostavna. Samo se anuliraju margine i padding za body element. To možemo uraditi na sledeći način:

body{
padding:0; /* za Operu */
margin:0;
}

Ovo radi i u nekim slučajevima i za gornju i donju marginu, ali (naravno uvek ima ono ali) ne uvek.

Problem

Naime kada imate situaciju da želite da pribijete layout uz gornju ivicu browsera a to Vam ne polazi za rukom—najverovatnije je problem u sledećem. (_Podrazumeva se da koristite browser koji poštuje standarde koji u ovom slučaju ne poštuje standarde._)

Ovo ćemo najlakše objasniti uz primer. Markup je sledeći:

<div id="header">
<h1>Hi ma'</h1>
</div>

Pogledajte demo da Vam bude jasnije o čemu pričamo. Ovako izgleda CSS:

body, #header{
padding:0; margin:0;
}
 #header{
background:yellow;
}
h1{
background:green;
color:beige;
margin:1em 0;
}

Dakle uz malo CSSa smo anulirali sve margine za body i header i usput obojili pozadine istih elemenata zarad boljeg raspoznavanja (*za debug nikada ne koristite bordere!*).

Sigurno se pitate kako su onda oba ova elementa još uvek odvojena od ivice browsera. Odgovor sledi.

Misteriozna margina

Stvar je u sledećem. FireFox tako izrenderuje pozicije i osobine ovih elemenata da (accent)kada god imate slučaj da neki element dodiruje gornju ili donju ivicu browsera, i pritom poseduje vertikalnu marginu—on će sve njegove parente odvojiti od ivice za vrednost te margine.

Ukoliko je slučaj (kao u primeru) da pribijamo uz gornju vertikalnu ivicu, i element nam ima gornju marginu (h1 element), FireFox pravi gap. Zašto je to tako—ne znam ali znam da se uvek javlja i znam kako da ga zaobiđemo.

Rešenje problema

Pogledajmo sada isti onaj markup samo sa malo drugačijim CSS osobinama.
Promena je sledeća:

h1{
background:green;
color:beige;
/* nove osobine */
margin:0; padding:1em 0;
}

Dakle, skinuli smo sve margine i sa h1 elementa i stavili mu padding umesto njih. Ovo je workaround, ali na žalost i jedino rešenje.

Ukoliko imamo problem sa donjom vertikalnom marginom—tehnika je ista. Obično je krivac poslednji paragraf (p element) koji ima donju marginu, koju trebamo anulirati i zameniti sa padding-om.

Evo i iste stranice sa istaknutim header-om uz pomoć padding-a.

Zaključak

Ovaj scenario je koliko je meni poznato moguće replicirati samo u FireFoxu, dok sa ostalim browserima nećete imati problema.

• « Mali downtime
• Maintaining Bloglines »

Komentari na ovaj unos 4

1. Данило kaže 14/11/05 09:08 PM

   Чини ми се да није баш у томе проблем, али свакако да није једино решење: стави за h1 display:inline и „покушај се мало поиграти“ што би рекао Google (нпр. на #header додаш padding-top:1em за исти ефекат :)

2. Dragan Babić kaže 14/11/05 09:47 PM

   

   U toj temi na DZ sam naveo da problem nastaje kada je block level element ugnježđen u blok level elementu, to sam ovde zaboravio da napomenem, ali u svakom slučaju display-inline nije nikako rešenje—u najboljem scenariju je hack. :)

   Dakle mislim da je bolje ostaviti sve kako jeste (jer je u ostalim browserima stvar u redu), i jednostavno margin zameniti sa padding da bi sve i dajle ferceralo. Nema potrebe dodatno komplikovati stvari IMHO.

   Istina je da je i 1px padding-a dovoljno da bi #header ostao pribijen uz gornju ivicu, ali ima slučajeva kada je baš taj jedan piksel bitan.

3. Данило kaže 15/11/05 12:55 PM

   У праву си, ово јесте „hack“, али право решење је просто поставити position: relative и на #header и на h1 (коришћењем не-static положаја се мења „viewport“ за сваки угњеждени h1 елемент, и то је онда довољно — погледати детаљнији опис viewport-а у CSS2 спецификацији :).

4. Dragan Babić kaže 15/11/05 02:45 PM

   

   Hmmm, zanimljivo. Kada postavim position:relative kako si predložio, za oba elementa—nema apsolutno nikakve promene. Jesi testirao ili samo parafraziraš navedeno u specifikaciji? Ako je negde naveden ovaj slučaj jel možeš ostaviti link da pogledam?