Probleme de flottant [Résolu/Fermé]

Signaler
Messages postés
31
Date d'inscription
jeudi 27 novembre 2008
Statut
Membre
Dernière intervention
28 septembre 2009
-
 telline -
Bonjour,
j'ai une nouvelle fois un problème de positionnement d'un flottant en float:left:
voici le html :
<!-- la bannière -->
<div id="banniere">

</div>
<div class="accueil"> <!--bloc 1-->
</div> <!-- fin bloc 1-->

<div id="colgauche"> <!--menu deroulant gauche-->
<div id="roundedcornr_box_500427"><!--boite menu deroulant gauche-->
<div id="roundedcornr_top_500427"><!--boite menu deroulant dessus-->
<div>
</div>
</div>
<div id="roundedcornr_content_500427"><!--boite menu deroulant contenu-->
<ul>
<li><a href=" index.html" title="accueil"><strong>Accueil</strong></a></li>

<li><a href="PCR.html" title="PCR"><strong>PCR</strong></a></li>
<li><a href="les_obligations_du_cabinet.html" title="les obligations du cabinet"><strong>Les obligations du cabinet dentaire</strong></a></li>
<li><a href="Les_formations_obligatoires.html" title="Les formations obligatoires"><strong>Les formations obligatoires</strong></a></li>
<li><a href="les_packs_proposes.html" title="les packs proposés"> <strong>Les packs proposés</strong></a></li>
<li><a href="Nous_consulter.html" title="Nous consulter"><strong>Nous consulter</strong></a></li>
</ul>

</div><!-- fin boite menu deroulant contenu-->
<div id="roundedcornr_bottom_500427"><!--boite menu deroulant dessous-->
<div>
</div>
</div><!--fin boite menu deroulant dessous-->
</div><!--fin boite menu deroulant gauche-->
</div><!--fin menu deroulant gauche-->

</body>
</html>

voici le css :
body {
width: 900px;
text-align:center;
margin: auto;
}
/*bannière*/
#banniere {
width:900px;
height:288px;
margin-left:auto;
margin-right:auto;
background: url(photos/ban.JPG) no-repeat;
}
/*fin bannière*/
img {
border: none;
}


/*menu*/


#colgauche {
float : left;
width:20%;
}
#colgauche ul {
list-style-type : none;
padding:0px 0 0 0; margin:0;
}
#colgauche li {
margin-top : 50px;
}
#colgauche a {
display:block;
width:180px;
text-decoration:none;
color: blue ;
line-height:25px;
width:130px;
border:none;
text-align:center;
}
#colgauche a:hover {
color:red;
}
#colgauche a:visited {
color : dark blue ;
}

#roundedcornr_box_500427 {
background: #edad30;
width:180px;
}
#roundedcornr_top_500427 div {
background: url(photos/roundedcornr_500427_tl.png) no-repeat top left;
}
#roundedcornr_top_500427 {
background: url(photos/roundedcornr_500427_tr.png) no-repeat top right;
}
#roundedcornr_bottom_500427 div {
background: url(photos/roundedcornr_500427_bl.png) no-repeat bottom left;
}
#roundedcornr_bottom_500427 {
background: url(photos/roundedcornr_500427_br.png) no-repeat bottom right;
}
#roundedcornr_top_500427 div, #roundedcornr_top_500427,
#roundedcornr_bottom_500427 div, #roundedcornr_bottom_500427 {
width: 100%;
height: 30px;
font-size: 1px;
}
#roundedcornr_content_500427 {
margin: 0 20px;
}
/* fin menu*/
.accueil {
margin-top:20px;
margin-left:25%;
padding:10px;

width:700%;
height:400px;

background-color:yellow;
}


(c'est un peu long car j'essaie de faire un menu avec des bords arrondis, mais le problème est que je ne comprends pas pourquoi le menu n'est pas directement à gauche du bloc texte (en jaune pour l'identifier plus facilement)
merci d'avance.

2 réponses

Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
Bonjour,

Petite erreur inattention.
Les éléments flottants doivent être placés AVANT les autres éléments.
Place tes div dans l'ordre banniere / colgauche / accueil et ça marchera.
1
Merci

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 76555 internautes nous ont dit merci ce mois-ci

Bonjour,
un grand merci!!!!ça marche.............................