Probleme float
Résolu/Fermé5 réponses
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
24 août 2009 à 10:41
24 août 2009 à 10:41
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.
"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>
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
#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
M@dien
Messages postés
437
Date d'inscription
mercredi 29 juillet 2009
Statut
Membre
Dernière intervention
23 septembre 2010
74
24 août 2009 à 11:35
24 août 2009 à 11:35
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question