Probleme float [Résolu/Fermé]

Signaler
-
 ilomir -
Bonjour,

voila mon problème : j'ai un bloc conteneur qui contient deux autre conteneurs contenant eu même des div avec les partie du fond de mes bloc:



=====>div conteneur*3====>div fond transparent de la div3
= ====>div bords arrondi de la div 3(bas)
div conteneur n*1===> ====>div bords arrondi de la div 3(haut)
=
=====>div conteneur*2====>div fond transparent de la div2
====>div bords arrondi de la div 2(bas)
====>div bords arrondi de la div 2(haut)

quand j'essaye de les aligner avec float seul une petite partie de mes bloc s'affiche j''ai la hauteur normal de la div mais sa largeur est incomplète.

j'espère avoir été clair :p
Merci d'avance

5 réponses

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

"j'espère avoir été clair :p "
Pas du tout ^^'

Peux-tu nous mettre le code de tes divs en question? histoire qu'on voit mieux leur hiérarchie?
et également le CSS associé? car c'est visiblement un problème de css.
oups j'avais fait un joli schéma mais en publiant ça a enlever les espace :s

voila mon code css:

#conteneur
{
width:875px;
height:509;
margin-top:222px;
margin-left: auto;
margin-right: auto;
}
#conteneurmenu
{
float:left;
position:relative;
height:318px;
margin-top:35px;
font-family:verdana,geneva;
font-size:16px;
color:white;

}
#menuh
{
background:url(_images/site/hautmenu.png) no-repeat;

}
#menuc
{
background:url(_images/site/corpmenu.png) repeat-y;
}
#menub
{
background:url(_images/site/basmenu.png) no-repeat;
}
#conteneurnew
{
padding:0;
width:525;
margin-bottom:104px;
margin-left:350px;
margin-top:35px;

}
#hautn
{
background:url(_images/site/hautnew.png) no-repeat;
}
#corpn
{
background:url(_images/site/corpsnew.png) repeat-y;
}
#basnew
{
background:url(_images/site/basnew.png) no-repeat;
}

et mon html:
<div id="conteneur">
<div id="conteneurmenu">
<div id="menuh"><br></div>
<div id="menuc">MENU<br></div>
<div id="menub"><br><br></div>
</div>
<div id="conteneurnew">
<div id="hautn"><br></div>
<div id="corpn">ilomir<br><br><br><br><br><br><br><br><br></div>
</div>
voila^^
<div id="basnew"><br><br></div>
</div>
{
#menuh
{
background:url(_images/site/hautmenu.png) no-repeat;

}
#menuc
{
background:url(_images/site/corpmenu.png) repeat-y;
}
#menub
{
background:url(_images/site/basmenu.png) no-repeat;
}
#conteneurnew
{
padding:0;
width:525;
margin-bottom:104px;
margin-left:350px;
margin-top:35px;

}
#hautn
{
background:url(_images/site/hautnew.png) no-repeat;
}
#corpn
{
background:url(_images/site/corpsnew.png) repeat-y;
}
#basnew
{
background:url(_images/site/basnew.png) no-repeat;
}
<div id="conteneur">
et le code html:
<div id="conteneurmenu">
<div id="menuh"><br></div>
<div id="menuc">MENU<br></div>
<div id="menub"><br><br></div>
</div>
<div id="conteneurnew">
<div id="hautn"><br></div>
<div id="corpn">ilomir<br><br><br><br><br><br><br><br><br></div>
<div id="basnew"><br><br></div>
</div></div>
voila merci d'avance
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
Hum si j'ai bien compris c'est une histoire de largeur de block donc.

En effet le div conteneurmenu est très peu large, et c'est compréhensible:
Dans les standards w3c, les div font 100% de large (par rapport à leur parent). Sauf lorsqu'ils ont une propriété flottante, où à ce moment là ils prennent la largeur de leur contenu.

De plus, la propriété background ne modifie en rien la largeur du div. si l'image de fond est trop grande, elle sera tronquée.

Il suffit donc de définir manuellement la taille du div avec width:150px; pour avoir un menu complet
ca marche! merci beaucoup de ton aide =)