2010-10-14 5 views
3

J'ai le balisage HTML suivant et je veux que la balise div de menu soit toujours à 5px de la bordure inférieure du conteneur parent. Je peux manuellement par essai et erreur le positionner en utilisant margin-top, mais si je devais changer le logo ou modifier la taille div je devrais changer cette valeur encore en essayant et l'erreur. Une meilleure solution serait de dire si vous devez toujours être à 5px du fond au lieu de dire à X pixels du haut.Pourquoi margin-top fonctionne-t-il, mais pas margin-bottom?

Pourquoi cela ne fonctionne pas? alt text

<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; 
} 

Répondre

0

Obtenir des éléments HTML pour rester au fond des choses est notoirement difficile. Cependant, vous pourriez essayer de déplacer le ol en dehors de la div en-tête, en réglant la position sur relative et en tirant son top -Ypx.

La taille de l'image peut changer, mais vous pouvez vous reposer relativement assuré que la position de l'ol par rapport au div ne changera pas.

Cela sera toutefois un peu étrange pour le reste de votre flux DOM, à moins que vous ne définissiez la marge inférieure de l'ol à -Ypx.

Pas vraiment une réponse ... mais ça peut aider.

+0

jamais essayé cela à savoir? -Ypx est le mal. Il est meilleur avec un positionnement absolu que cela. – Claudiu

1

vous utilisez ol qui est une liste ... donc il a sa propre marge et le rembourrage prérégler de sorte que pourrait jouer un grand rôle sur les résultats. Vous pouvez également utiliser position: absolute pour le menu sur votre CSS. et position: relative pour votre élément parent. puis utilisez bottom: 5px; pour votre menu. cela va toujours coller le menu 5px au parent, je suppose que c'est ce que vous cherchez.

également comme je l'ai dit vérifier que la marge d'étiquette ol et padding ont été enlevés.

Questions connexes