28172 sujets

CSS et mise en forme, CSS3

[resolu] Comportement inexpliqué des <ul> par rapport aux <l

Bonjour,
Je ne me considère pas comme une grande débutante en css mais là, je ne comprends pas ce comportement !
J'ai fait un menu avec le tutoriel http://www.alsacreations.com/tuto/lire/574-Creer-des-menus-simples-en-CSS.html
J'obtiens évidemment le bon résultat (copier/coller...je maitrise) mais je voudrais ajouter un background-color commun à tous mes items. J'ai d'abord essayé de le mettre sur le <ul>...mais les <li> chevauchent le <ul> au lieu d'être dedans. Comment cela se fait-il ?

Voici le code :

<div id="global"> 
<div id="navPrincipale">
				<ul>
					<li><a href="">Accueil</a></li>
					<li><a href="">Couleurs et Thèmes</a></li>
					<li><a href="">Contact</a></li>
				</ul>
		
	</div>
</div>
	




#navPrincipale
{
border : solid 2px green;
 margin: 0 ; 
    padding: 0 ; 
    list-style: none ; 
    text-align: center ; 
	
	
}

#navPrincipale ul 
{
background-color : #2B2B2B ;
}

#navPrincipale ul li
{
	background-color : #FA8EC2 ;
	display: inline ; 
    margin-right: 1px ; 
    color: #fff ; 		/*texte*/
    background: #c00 ; 	/*fond*/
}
#navPrincipale ul li a
{
	padding: 4px 20px ; 	/*top droite bas gauche*/
    background: #c00; 
    color: #fff ; 
    border: 1px solid #600 ; /*border-width / border-style / border-color*/
    font: 1em "Trebuchet MS",Arial,sans-serif ; /*font-weight / font-family*/
    line-height: 1em ;
    text-decoration: none ; 
}


Finalement, j'arrive plus ou moins à mon résultat en mettant un div qui entoure mon <ul> mais ça n'explique pas le comportement des <li> par rapport à <ul>. Quelqu'un veut bien m'expliquer ?
Merci
Modifié par ordiminnie (18 Nov 2009 - 11:33)
Bonjour,

C'est un comportement normal. Ça vient du fait que tes LI sont en display:inline, de même que les liens. Les padding-top et padding-bottom d'un élément qui a un rendu de type en-ligne agrandissent cet élément, mais n'ont pas d'impact sur la hauteur de ligne de l'élément de type bloc parent (ou ancêtre).

Tu peux le constater plus facilement en rajoutant un padding: 50px 0 aux liens de ton menu.

La solution consiste à utiliser le type de rendu "inline-block" plutôt que "block". Problème: ce n'est pas compris par les anciennes versions d'IE (6 et 7). Pour une solution compatible IE6-7, il y a le positionnement flottant, mais tu perds alors le centrage horizontal.

Par ailleurs, tu as du code redondant:
#navPrincipale ul li 
{ 
    background-color : #FA8EC2 ; /* SERA ANNULÉ PAR LA DÉCLARATION 4 LIGNES PLUS BAS */
    display: inline ;  
    margin-right: 1px ;  
    color: #fff ;
    background: #c00 ;
}

et comme le LI n'est pas du tout visible derrière le A qu'il contient, tu pourrais te contenter de ceci:
#navPrincipale li { 
  display: inline;
  margin-right: 1px;
}
a écrit :
C'est un comportement normal. Ça vient du fait que tes LI sont en display:inline, de même que les liens. Les padding-top et padding-bottom d'un élément qui a un rendu de type en-ligne agrandissent cet élément, mais n'ont pas d'impact sur la hauteur de ligne de l'élément de type bloc parent (ou ancêtre).


merci pour cette explication, c'est ce que je cherchais à comprendre !

a écrit :
Par ailleurs, tu as du code redondant


oui il faut dire que je suis dans la phase de test, de recherche...ce n'est donc pas très propre ! merci pour tes remarques.
Sujet clos
Aller à