Rembourrage de marge de menu CSS/marge

Question

Je me demandais si quelqu'un pouvait m'aider avec un problème de css/html.

J'ai une image de fond complexe. Le menu div est positionné à l'emplacement correct pour superposer l'arrière-plan à l'endroit où il doit être positionné. L'ensemble de LI a une image survolée avec un type de bloc d'affichage. Le résultat est que lorsque la souris est sur la liste href le renversement de bloc entier fonctionne ..

Le problème se produit cependant lorsque j'essaie d'ajouter un remplissage pour créer un tampon entre le texte de l'élément de liste et sa bordure .. Les choses commencent à vas-y drôle ... Je vais ajouter une capture d'écran .. Le rembourrage est nécessaire pour le déplacer de la frontière.

Le deuxième problème existe que je ne peux pas valign le texte au milieu sans l'application d'une hauteur de ligne .. La solution fonctionne très bien jusqu'à ce que des éléments enveloppent .. Je dois pouvoir envelopper le texte de l'élément de menu ..

Le L'exemple ci-dessous montre l'état avec le CSS/HTML actuel. La barre de menu et le capotage sont en place comme prévu. Modifier je ne peux pas placer l'image à des restrictions sur la publication en tant que nouvelle personne ici .. L'exemple peut cependant être trouvé à 213.40.100.100/example1.jpg

L'exemple ci-dessous montre l'état quand le bourrage OU la marge est ajoutée. Le LI semble COMPLETEMENT changement, sans bouger le texte interal ..

213.40.100.100/example2.jpg

<div id="wrapper">  
    <div 
    id="header">Header</div>  <div 
    id="menu"> 
    <ul> 
     <li><a>Contact Us</a></li> 
     <li><a>Recommends</a></li> 
     <li><a>Deals</a></li> 
     <li><a>Home</a></li> 
    </ul>  </div>  <div id="content">Content</div>  
    <div id="footer">Footer</div> 
</div> 




@charset "utf-8"; /* CSS Document */ 



* { margin: 0; padding: 0; } 

body { 
padding-top: 10px; 
    background: url(background.jpg) no-repeat center top; height:100%; 
} 

div#wrapper { 
margin: auto; 
height: 100%; 
width: 978px; 
    min-width: 978px; 
} 

div#header { 
height: 196px; 
} 

div#menu { 
height: 69px; 
position: 
relative; 
} 

div#menu ul { 
height: 69px; 

    list-style-type: none; 
} 

div#menu ul li { 
display: block; 

    height: 69px; 
width: 140px; 
float: right; 
padding: 5px; 
} 

div#menu ul li a:hover { 
    display:block; 
    background:url(menu_red_bg.jpg) repeat-x; height: 69px; color:#FF0; 
    font-family: Arial, Helvetica, sans-serif; 
font-size: large; 
} 

div#menu ul li a { 
text-decoration: none; 
color:#000; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: large; 
} 

div#content { margin-top: 80px; } 

Answer 1

Je pense que vous ajoutez le rembourrage à l'élément faux. ou vous ajoutez une « marge » au <li> ou que vous ajoutez un rembourrage à div#menu

Je dois faire ceci:

Un div menu # avec le fond dégradé jaune, avec le rembourrage 5px et une marge: 80px 0 0 0; À l'intérieur de ce div, le <ul><li>...</li></ul> Vous n'avez pas besoin d'ajouter un rembourrage ou une marge à la li, assurez-vous simplement que la hauteur de chaque li est inférieure à la hauteur div#menu + rembourrage.