28173 sujets

CSS et mise en forme, CSS3

Flottant qui deborde dans un bloc?[resolu]

bonjour,
petit probleme pour harmoniser la mise en page sur IE et FF

J'ai 2 menu: un menu en haut et un a gauche.
le probleme qui se presente a moi est le suivant:
Lors de l'affichage sous IE pas de probleme le flottant( du menu gauche) reste bien dessous et coller au menu haut.
Sous FF par contre il rentre sous le menu haut.
why .? Smiley biggol

appercu du probleme:
upload/10613-debordemen.jpg

voici les codes concerné:

html:

<body>
   
<div id="conteneur">
   
   <div id="en_tete">
   <!-- bannière -->
	</div>

	
<div id="language"> Languages:
<a  href="http://www.xxxx.htm"><img  src="pixs/flagron_fr.jpg" width="25" height="19" border="0" alt="accueil oba brasil"> <img  src="pixs/flagron_br.jpg" width="28" height="19" border="0"></a>
</div>

<div id="photographe">
<a href="http://www.xxxxxx" target="_blank">XXXXXXXXX</a>
</div>

<div id="menu_h">
   <!-- menu haut -->
		<?php
					include("menu_h.htm");
					?>
</div>

<div id="menu_g">
	
		 <!--menu gauche-->
   
            <?php
					include("menu_g.htm");
					?>
		

					
	<div id="pub_gauche">
        <!--menu gauche-->
   	</div>
   
</div>


css:

#conteneur {
margin-top: 0px;
width: 858px;
background-color:#FFF;
 }
body {
background-color:#333333;
width: 858px;
margin: auto; 
margin-top: 20px; 
margin-bottom: 0px;    
}
#en_tete
{
   width: 858px;
   height: 151px;
   background-image: url("pixs/logo_haut_1.jpg");
   background-repeat: no-repeat;
}


#language
{
margin-left: 0px;
text-align: left;
width: 500px;
font-size: 80%;
color: #333333;
display: inline;
background-color: #fff;
float: left;
height: 20px;
}
#photographe
{
display: inline;
text-align: right;
background-color: #fff;
float: right;
width: 258px;
font-size: 80%;
height: 20px;
}


#menu_h
{
width: 858px;
height: 31px;
margin-bottom: 0px;
 }

 
 #menu_g
{
background-color:#fff;
float: left; 
width: 140px; 
border: none;
margin-top: 0px;
padding-top: 0px;
height:1%;
}

#menu_g a img
{
display: block;
}

#menu_g  img
{
display: block;
}

#pub_gauche
{
background-color:#fff;
   float: left; 
   width: 140px; 
   border: none;
   height: 100%;
}



je pourrais mettre de marges, mais avant de les mettre j'aimerais partir sur les meme bases pour avoir le meme decalage par la suite.

merci d'avance Smiley cligne
Modifié par somwhere (31 Jan 2007 - 18:24)
Salut !

Tu n'aurais pas l'exemple en ligne? Là, il manque une partie du code, vu que tu nous donnes ta source php (sans le code des menus Smiley cligne ).

Sinon, fait nous un "View - Source" de ta page php, puis un copier/coller du code résultant.
Modifié par g41687 (31 Jan 2007 - 08:20)
On y arrive :
Tu as sous "entete", deux floats : un left (language) et un right (photographe)
Puis, suit ton "menu_h" en float-left mais sans "clear:both"
Comme ceci ça devrait aller:

#menu_h
{
clear:both;
width: 858px;
height: 31px;
margin-bottom: 0px;
 }

Il faudra sans doute adapter tes marges/padding de "corps" ...

Note, un bon truc :


* {
margin:0;
padding:0;
}

Puis, pour chaque élément tu adaptes en fonction des besoins ..

@+ Smiley biggrin
Sujet clos
Aller à