Background d'une liste ul diparaissant avec les éléments li en float

Bonjour,

Je rencontre un petit problème de background sur une liste ul.

Si je ne met pas les éléments li en float, le background est présent, mais dès l'instant où je les met en float, le background disparaît...

J'ai également essayé de mettre un conteneur div à ma liste avec ce background et pareil, il ne s'affiche plus tant que je met les li en float, ce dont j'ai besoin.

Ma question donc est comment conserver le background d'une liste tout en mettant ses éléments en float.

Voici mon code, on ne peut plus simple.

ul#menuGestionPrincipal{
   background: url(fondGestion.png) no-repeat center center !important;
}

#menuGestionPrincipal li{
   float: left;
    width: 265px;
    height: 120px;
    margin: 0 0 25px 5%;
    background: url(fondMenuPrincipal.png);
    text-transform: uppercase;
    font-stretch: condensed;
}

#menuGestionPrincipal li a{
   display: block; 
   height: 120px; 
   line-height: 120px; 
   text-align: center; 
   font-size: 20px;
}

Merci.

Salut
pour cela tu peux mettre le dernier li en "clear: both; font: size: 0; height 0; padding:0; margin:0;

A partir du moment ou tu met un élément en float, la hauteur de sa balise parente (ici <ul> ) ne s'adaptera pas au contenu...
Sur alsacréations, le pourquoi de la chose y est expliqué plus clairement si je ne me trompe

Eurz

Salut,

Il s'agit d'un problème de dépassement des flottants.

Tu peux essayer de mettre le background sur les li ça marchera normalement

Merci de vos réponses.

Malheureusement, ça ne fonctionne pas .

La liste n'a toujours pas de hauteur malgré le clear.

Ma liste :

<ul id="menuGestionPrincipal">
<li><a href="http://***/gestion.php?cat=article">articles</a></li>
<li><a href="http://***/gestion.php?cat=commentaire">commentaires</a></li>
<li><a href="http://***/gestion.php?cat=categorie">categories</a></li>
<li><a href="http://***/gestion.php?cat=utilisateur">utilisateurs</a></li>
<li><a href="http://***/gestion.php?cat=image">images</a></li>
<li><a href="http://***/gestion.php?cat=configuration">configuration</a></li>
<li><a href="http://***/gestion.php?cat=preference">préférences</a></li>
<li><a href="http://***/gestion.php?cat=sondage">sondages</a></li>
<li class="antifloat"></li>
</ul>

Mon css :

ul#menuGestionPrincipal{
   background: url(fondGestion.png) no-repeat center center !important;
   border: 1px solid red;
}

#menuGestionPrincipal li{
   float: left;
    width: 265px;
    height: 120px;
    margin: 0 0 25px 5%;
    background: transparent url(fondMenuPrincipal.png);
    text-transform: uppercase;
    font-stretch: condensed;
}

#menuGestionPrincipal li a{
   display: block; 
   height: 100%; 
   line-height: 120px; 
   text-align: center; 
   font-size: 20px;
}

.antifloat{ clear: both; visibility: hidden; display: none; border: 0; background: none !important }

sawsen, justement mes li ont une image semi transparente, et c'est pourquoi je souhaites mettre une image en arrière plan dans l'ul.

Essaie de mettre un overflow:hidden sur ton ul.

Merci, ça fonctionne avec cette propriété

Mais pourquoi un overflow hidden ?

J'ai pas trop bien compris le rapport avec.

Cool, plus besoin de mettre un dernier li en clear: both, ça fonctionne sans, ce qui m'arrange beaucoup

L'overflow:hidden crée un nouveau contexte de formatage block, ce qui, pour simplifier dans ton cas, dit au parent de prendre en compte les éléments flottants dans le calcul de sa hauteur.

Je comprend mieux maintenant.

J'aurais bien mit en résolu, mais j'ai pas assez de place dans le titre

Merci beaucoup à tous

Hello,

Juste une note pour finir: tu peux utiliser un élément en clear:both si tu veux... mais si en même temps tu dis au navigateur de ne pas rendre cet élément dans la page (avec un display:none) eh bien ça ne risque pas de marcher.