✔ Div Banner vergrößert sich

[Dragonate]

Hallo,

Ich habe einen Div #Banner indem sich ein weiterer Div #horizontale_navigation befindet, also in etwa die Form :

<div id="banner">
    <div id="horizontale_navigation">
        <ul>
            <li> .... </li>
            <li> .... </li>
        </ul>
    </div>
</div>

Die Liste ist auf display:inline formatiert, und hat die gewollte horizontale Form. Sie legt sich ohne besondere margin Einstellungen irgendwo oben mittig im Banner ab, und ich möchte sie logischerweise im unteren Teil des banners haben. Wenn ich jetzt aber z.B. mit margin-top: 40px; diese nach unten schieben will, bleibt die Liste an der gleichen Stelle, und der Div vergrößert sich. Wie krig ich meine Liste nach unten ausgerichtet ?

 

[Maik]

Hi,

nimm padding-top für #banner anstelle von margin-top für #horizontale_navigation, oder positonier dieses DIV relativ:

#horizontale_navigation {
position:relative;
top:40px;
}

mfg Maik

 

[Dragonate]

Die Idee mit Padding-top gefällt mir gut, hatte ich nicht dran gedacht. Kann ich nacher erst zu Hause ausprobieren, aber das sollte ja funktionieren. Nice one.

 

[Maik]

Jo, das funktioniert so einwandfrei

Sollte #banner eine height-Deklaration besitzen, muß von ihr der Innenabstand subtrahiert werden, da dieser gemäß dem Box-Modell hinzuaddiert wird, und sich das DIV somit erneut vergrößern würde.

mfg Maik

 

[Dragonate]

Alles klar, good to know.