Egy zen subtheme-n dolgozom.
a css fájlban a fejléc mögött háttérként van egy ismétlődő kép:
body { margin: 0; padding: 0; background-color: #e6f8e5; background-image: url(img/bg.png); background-repeat: repeat-x; }
ez a kép pontosan 10*100 px nagyságú
a fejléc elvileg pontosan az aljáig kéne érjen:
#header { margin: 0 !important; } #header-inner { margin: 0 !important; width: 960px !important; height: 100px !important; }
ennek ellenére nagyjából 5 pixellel alá-lóg. Ezt persze meg lehetne oldani azzal hogy csak 95 pontosra állítom a magasságát, de attól félek, hogy más böngészőben talán akkor meg ezért fog rosszul megjelenni.
Azért fontos ez, mert az alatta levő "navigation bar"-t szeretném vizuálisan pontosan hozzáilleszteni a fejléchez.
Azért a body-ban szabályoztam a háttérképet, mert azt szeretném, hogy az oldal fix szélességű legyen, de a fejléc teljesen széthúzódjon.
a jelenség független attól hogy a wireframes be van e kapcsolva.
Fórum:
header padding?
a header és a header-inner véletlenül nem paddingol valamennyit?
meg tudod valahogy működő változatban mutatni ezt? úgy sokkal gyorsabban és biztosabban lehet segíteni ilyen smink dolgokon..
-
clear: both;
http://aftermodern.dyndns.org
http://aftermodern.dyndns.org/drupalteszt/
szerintem nem paddingol, de lehet hogy elnéztem.
web-developer firefox extensionnal nézem a css-t az mindent megtalál nem?
köszi
Firebug
A webdeveloper őskövület. Használj firebugot, az azonnal mutatja, hogy a #header-inner valóban 100px magas, csak (az egész #page-inner-rel együtt) el van tolódva lefelé 10px-szel. Némi nézelődés után az is látszik, hogy a #logo-title felső margója tolja le (hogy miért, az nekem se világos, de egy margin-padding cserével könnyen javítható).
collapsing margins
Itt az egyik kommentben elmagyarázzák az okot is.
Firebug!
+1
két kattintással kiderítettem, hogy a #logo-title felső margója "tolja le" a fejlécet.
#logo-title { margin-top: 0; }
-
clear: both;
thx
köszi, tényleg.
a firebug tényleg nagyon érdekes