Css float lefte???
minoula2006
-
Defouille Messages postés 388 Date d'inscription Statut Membre Dernière intervention -
Defouille Messages postés 388 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
j'ai un probleme dans le css
j'ai 3 bloc different blocgauche blocmilieu et blocdroite(il sont tous dans une grande div Milieu) qui sont normalement affiché horizantalement
mon probleme cé que malgré j'ai utilisé float left mais ils sont affiché verticalement ???
voila mon code pour copmrendre mieu :
html
css
j'ai un probleme dans le css
j'ai 3 bloc different blocgauche blocmilieu et blocdroite(il sont tous dans une grande div Milieu) qui sont normalement affiché horizantalement
mon probleme cé que malgré j'ai utilisé float left mais ils sont affiché verticalement ???
voila mon code pour copmrendre mieu :
html
<div id="Milieu"><!--Debut Milieu--> <div id="Blocgauche"> <div id="pt-menu"> <h3>Menu</h3> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Informaion locales</a></li> <li><a href="#">Féstivités</a></li> <li><a href="#">Prix</a></li> <li><a href="#">Mon Permis de Batir</a></li> </ul> </div> <div id="commune"> <h3>A propos de la commune</h3> <div id="photo"> <img src="Templates/images/photo.png" width="160" height="49" border="0" usemap="#Map8" /> <map name="Map8" id="Map8"> <area shape="rect" coords="2,-2,158,48" href="fr/photoSousse.htm" /> </map> </div> <div id="animBrochure"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload2.macromedia.com/get/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="81" height="24"> <param name="movie" value="Templates/images/brochureFR.swf" /> <param name="quality" value="high" /> <embed src="Templates/images/brochureFR.swf" quality="high" pluginspage="https://get.adobe.com/flashplayer/" type="application/x-shockwave-flash" width="81" height="24"></embed></object> </div> <div id="imgBrochure"> <img src="Templates/images/imgBrochure.gif" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="0,1,128,205" href="fr/brochure.htm" /> </map> </div> </div> <div class="clear"></div> </div> <!--corp--> <div id="Milieucorps"> <div id="corps"> <div>Mon contenu</div> </div> <div class="clear"></div> </div> <!--fin du corps--> <div id="Blocdroite"> <div id="pub"> <h3>Publicité</h3> <div id="nov"> <img src="Templates/images/logo_7nov.jpg" width="115" height="165" border="0" usemap="#Map2" /> <map name="Map2" id="Map2"> <area shape="rect" coords="1,1,116,164" href="#" /> </map> </div> <div id="bawaba"><img src="Templates/images/bawaba.jpg" border="0" usemap="#Map3" /> <map name="Map3" id="Map3"> <area shape="rect" coords="-1,0,136,55" href="http://www.tunisie.gov.tn/..." /> </map> </div> <div id="tabac"><img src="Templates/images/tabac.gif" border="0" usemap="#Map4" /> <map name="Map4" id="Map4"> <area shape="rect" coords="1,0,139,54" href="http://www.mdsoft-int.com/enquete-tabagisme/" /> </map> </div> <div id="sicad"><img src="Templates/images/SICAD.jpg" border="0" usemap="#Map5" /> <map name="Map5" id="Map5"> <area shape="rect" coords="1,0,130,155" href="http://www.sicad.gov.tn/Fr/Accueil_46_6" /> </map> </div> <div id="bab"><img src="Templates/images/bab.gif" border="0" usemap="#Map6" /> <map name="Map6" id="Map6"> <area shape="rect" coords="1,1,92,134" href="http://www.bab-el-web.com" /> </map> </div> <div id="meteo"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload2.macromedia.com/get/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="84" height="75"> <param name="movie" value="Templates/images/meteo.swf" /> <param name="quality" value="high" /> <embed src="Templates/images/meteo.swf" quality="high" pluginspage="https://get.adobe.com/flashplayer/" type="application/x-shockwave-flash" width="84" height="75"></embed></object></div> <div id="meteo-titre"><img src="Templates/images/meteo.png" border="0" usemap="#Map7" /> <map name="Map7" id="Map7"> <area shape="rect" coords="1,1,81,43" href="https://www.tunisiemeteo.com/" /> </map> </div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <!--fin Milieu-->
css
#Milieu{ width:1024px; border:1px #FFFFFF solid; } #Blocgauche{ width:180px; border:1px #FFFFFF solid; } #pt-menu{ float:left; width:180px; height:222px; background : url('images/pt-menu.png') no-repeat; xmargin-top:120px; padding-bottom:10px; } #pt-menu h3{ text-align: left; color:#ffffff; padding-top:1px; font-size: 10px; font-weight: bold; font-style: normal; font-variant: normal; text-indent: 10px; } #pt-menu li{ line-height:20px; list-style-image: url('images/163.gif'); list-style-position: inside; margin-left:-38px; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; white-space: pre; } #pt-menu li a{ text-decoration: none; } #pt-menu li a:hover{ color:#C29A3D; text-decoration: underline; } #commune{ width:180px; height:470px; background:url('images/commune.png') no-repeat; float:left; xmargin-top:10px; xmargin-left:0px; } #commune h3{ padding-top:3px; padding-left:5px; text-align: left; font-weight: bold; font-style: normal; color: #FFFFFF; font-size: 10px; font-family: Verdana, Arial, Helvetica, sans-serif; } #animPerle{ padding-top:20px; padding-left:30px; } #imgPerle{ padding-left:30px; } #animBrochure{ padding-left:30px; padding-top:20px; } #Milieucorps{ width:652px; border:1px #FFFFFF solid; } #corps{ background : url('images/arrondiCorp.png') no-repeat; width: 640px; height: 1183px; float: left; margin-left:12px; xmargin:auto; xmargin-top:-606px; xmargin-left:10px; } #Blocdroite{ width:192px; border:1px #FFFFFF solid; } #pub{ background:url('images/pub.png') no-repeat; width:180px; height:850px; float:left; margin-left:12px; xmargin-top:-605px; xmargin-right:5px; } #pub h3{ width:180px; height:642px; color:#ffffff; margin-top:2px; padding-left:5px; font-size: 10px; font-weight: bold; font-style: normal; font-variant: normal; } #nov{ margin-left:30px; margin-top:-610px; } #bawaba{ margin-left:25px; margin-top:20px; } #tabac{ margin-left:25px; margin-top:25px; } #sicad{ margin-left:25px; margin-top:25px; } #bab{ margin-left:45px; margin-top:25px; } #meteo{ margin-left:45px; margin-top:25px; } #meteo-titre{ margin-left:48px; margin-top:-5px; }
A voir également:
- Css float lefte???
- Css download - Télécharger - HTML
- Enlever le soulignement d'un lien css ✓ - Forum Réseaux sociaux
- Css ligne horizontale ✓ - Forum CSS
- Enlever le soulignage des lien. - Forum CSS
- Enlever soulignement lien css ✓ - Forum CSS
4 réponses
Bonjour,
essaye en ajoutant ça :
CSS :
Avec les bordures, et les margins, il ne faut pas que la somme des largeurs de tes divs soit exactement égale à la largeur du div parent.
Avec -22px au div central, pour ton code ça marche, essaye d'en enlever un peu moins et vois ce que ça donne.
En espérant que ça t'ai aidé ;)
essaye en ajoutant ça :
CSS :
#Blocgauche{ float:left; width:180px; border:1px black solid; } #Milieucorps{ float:left; width:630px; border:1px black solid; } #Blocdroite{ float:left; width:192px; border:1px black solid; }
Avec les bordures, et les margins, il ne faut pas que la somme des largeurs de tes divs soit exactement égale à la largeur du div parent.
Avec -22px au div central, pour ton code ça marche, essaye d'en enlever un peu moins et vois ce que ça donne.
En espérant que ça t'ai aidé ;)