Warum margin-top arbeiten, aber margin-bottom nicht?

Ich habe Folgendes HTML-markup und ich möchte die Menü-div-tag immer 5px entfernt vom unteren Rand des übergeordneten Containers.

Ich kann manuell durch Versuch und Irrtum positionieren mit margin-top, aber wenn ich zu ändern, das logo oder ändern die div-Größe müsste ich diesen Wert ändern, wieder mit trial and error. Eine viel bessere Lösung wäre, zu sagen, wenn immer 5px Weg von der unteren, anstatt zu sagen, dass es X-Pixel von oben.

Warum funktioniert das nicht obwohl?
Warum margin-top arbeiten, aber margin-bottom nicht?

<body>
    <div id="header">
        <img src="../../Content/images/cumaviLogo.png" alt="Cumavi.com - Compras y ventas online en Bolivia!" />    
        <ol id="topuserbar">
            <li>Bienvenidos, <span class="userSalute">Sergio!</span></li>
            <li><a href="#">Mis Anuncios</a></li>
            <li><a href="#">Perfil</a></li>
            <li><a href="#">Cerrar Sesion</a></li>
        </ol>
    </div>

    <asp:ContentPlaceHolder ID="MainContent" runat="server" />
</body>

#header
{
    background-image: url('images/headerBackground.png');
    background-repeat:repeat;
    width:auto;
}

#topuserbar
{
    border: 1px solid red;  
    font-family:Georgia;
    font-size:large;
    float:right;
    margin-top:45px;  
}

#topuserbar ol
{
}

#topuserbar li
{
    display:inline;
    margin-left:10px;
    color:#fff;
}
InformationsquelleAutor | 2010-10-14
  1. 0

    Erste HTML-Elemente zu bleiben, auf den Grund der Dinge ist notorisch schwierig. Sie könnten jedoch versuchen, die ol außerhalb des header-div die position relative und zog Ihr top-up -Ypx.

    Die Bild Größe ändern kann, aber man kann sich in Ruhe relativ sicher, dass das die position der ol relativ zu dem div nicht ändern.

    Wird dies ein wenig seltsam, für den rest Ihres DOM-flow-obwohl, es sei denn, Sie legen Sie den unteren Rand des ol zu -Ypx als gut.

    Nicht wirklich eine Antwort ... aber es kann helfen.

    • schon mal versucht, dass auf ie? -Ypx, ist böse. Er ist besser der mit absoluter Positionierung als das.
    InformationsquelleAutor fordareh
  2. 1

    sind Sie mit ol, das ist eine Liste ... also es hat seinen eigenen margin und padding voreingestellt, so dass könnte eine große Rolle spielen auf das Ergebnis.

    du kannst auch position: absolute für das Menü auf Sie css.
    und position: relative für Ihre Eltern-element.
    und dann verwenden bottom: 5px; für Ihr Menü. das wird immer kleben Sie das Menü 5px zu den Eltern, die ich vermute, es ist das, was Sie suchen.

    auch wie ich schon sagte, schauen, dass die ol-tag margin und padding haben, wurden entfernt.

    InformationsquelleAutor Val
  3. 0

    Gut, ich immer Menschen zu ermutigen, verwenden Sie ein reset durch.css-Datei http://meyerweb.com/eric/tools/css/reset/

    ... Und warum ol? Ich glaube, ul macht mehr Sinn, in einem Menü wie die...

    InformationsquelleAutor Claudiu
Schreibe einen Kommentar