Sujet Précédent Sujet Suivant

Css float lefte???

Fermé
minoula2006 - 13 janv. 2010 à 09:44
Defouille Messages postés 388 Date d'inscription mercredi 13 janvier 2010 Statut Membre Dernière intervention 15 novembre 2011 - 14 janv. 2010 à 11:34
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 
<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;
}

4 réponses

Réponse 1 / 4
minoula2006
13 janv. 2010 à 11:14
alors pkoi y a pas d'aide :((((((
0
Réponse 2 / 4
minoula2006
13 janv. 2010 à 15:19
alors je pense qu'il faut chercher dans un autre forum
0
Réponse 3 / 4
minoula2006
14 janv. 2010 à 10:42
bonjour ,
meme aujourd'hui pas de réponce ????
0
Réponse 4 / 4
Defouille Messages postés 388 Date d'inscription mercredi 13 janvier 2010 Statut Membre Dernière intervention 15 novembre 2011 54
14 janv. 2010 à 11:34
Bonjour,

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é ;)
0

Discussions similaires

trait horizontal avec du css
tipi75 -
tipi75 -

8 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
HTML - définir taille bouton
Diva -
Utilisateur anonyme -

14 réponses
[CSS] Mettre un objet au premier plan
Achillion -
tiran58 -

2 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse