28172 sujets

CSS et mise en forme, CSS3

[Résolu] Enfant flottant qui sort de son parent.

Bonjour,
Je suis en train de travailler sur un menu à l'aide de UL et LI.
J'ai mes listes qui sortent de leur parent.

Voici le code HTML :

<div>

	<div id="menu_bague" class="menu_contenu">    
    
		<ul>
			<div class='sous_titre'>Les bagues par genre</div>
			<li>Bague Hommes</li>
			<li>Bague Femme</li>
		</ul>
        
		<ul>
			<div  class='sous_titre'>Par matière</div>
			<li>Bague argent</li>
			<li>Bague plaqué or</li>
			<li>Bague acier</li>
			<li>Bague céramique</li>
			<li>Bague fantaisie</li>
			<li>Bague Tungstène</li>
		</ul>

 <div class='fin'></div>
	</div>

</div>


Et le CSS : 
/* MENU CSS */
.menu_contenu{
	position:absolute;
	background-color: #3e414a;
	width: 1000px;
	display: none;
	left:50%;
	margin-left: -500px;
	border: 2px solid #666;
	margin-top:auto;

}
#menu_bague ul{
float: left;
}
#menu_bague ul li{
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 10px;
	color: #F00;
	background-image:none;
	clear:both;	
}
.fin {
	clear:both;
}


ceci fait parti de tout un ensemble et je dois absolument garder la class .menu_contenu en position absolute (je ne sais pas si le problème vient de la).

Les UL et LI sortent du conteneur <div id="menu_bague" class="menu_contenu">

Des suggestions ?
Modifié par lupyo (17 Oct 2012 - 19:19)
J'ai solutionné le soucis.
Il fallait tout simplement encadré mes UL de div et attribuer le float dessus et non sur les UL.

Code corrigé : 

<div>

	<div id="menu_bague" class="menu_contenu">    
		<div id='col1'>
        <ul>
			<div class='sous_titre'>Les bagues par genre</div>
			<li>Bague Hommes</li>
			<li>Bague Femme</li>
		</ul>
        </div>
        
        	<div id='col2'>
		<ul>
			<div  class='sous_titre'>Par matière</div>
			<li>Bague argent</li>
			<li>Bague plaqué or</li>
			<li>Bague acier</li>
			<li>Bague céramique</li>
			<li>Bague fantaisie</li>
			<li>Bague Tungstène</li>
		</ul>
        </div>

        </div>

    
</div>
Sujet clos
Aller à