28173 sujets

CSS et mise en forme, CSS3

Espace entre les divs sous firefox et Ie

Bonjour à tous, voila je galère depuis pas mal de temps sur des problèmes d'espace de div.
Sur mon site www.concours-src.fr, alors sous firefox, j'ai des espaces verticaux entre les 3 divs principaux.

<modération>Pas de grandes images. Merci Smiley cligne </>

http://www.concours-src.fr/images/firefox.JPG

J'ai réussis à corriger le problème de décalage sur la droite du div du bas, mais je n'arrive pas à voir ce qui crée l'espace entre les 3 divs, haut, centre et bas comme je les ai nommé sur le code source.

Et sur Ie c'est festival par contre, Ie n'à pas de décalage entre les divs centraux, c'est toujours ça de pris, mais par contre, il y a des décalages entre les divs du menu ce qui le sépare du div bas vu que le div menu prend plus de place, et puis le div bas est décallé sur la droite, j'avais réussi à le recaller mais un moment d'inatention et hop il c'est remis à droite. Smiley bawling

http://www.concours-src.fr/images/IE.JPG

Voila je vous met le code source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	      
<html>
<body>

<div id="pagelol">

	<div id="haut">
		<object type="application/x-shockwave-flash" data="headerload.swf" width="750px" height="167px">
			<param name="play" value="true" />
			<param name="movie" value="headerload.swf" />
			<param name="menu" value="false" />
			<param name="quality" value="high" />
			<param name="scalemode" value="noborder" />
			<p> ceci est le header si vous voyez ceci vous devriez telecharger la derniere version de flash player </p>
		</object>
	</div>
	
	<div id="centre">
	<div id="gauche">
		<object type="application/x-shockwave-flash" data="gaucheload.swf" width="70px" height="352px">
			<param name="play" value="true" />
			<param name="movie" value="gaucheload.swf" />
			<param name="menu" value="false" />
			<param name="quality" value="high" />
			<param name="scalemode" value="noborder" />
			<p> ceci est le cote gauche si vous voyez ceci vous devriez telecharger la derniere version de flash player </p>
		</object>
	</div>
	<div id="html">


	</div>

	<div id="menu">
		<div id="gris">
		</div>
		
		<div id="equipe">
		<a href="index.php?page=equipe" style=" text-decoration:none ;"><img alt="bouton equipe" src="images/equipe.jpg" width="138px" height="21px" /> </a>
		</div>
	
		<div id="reglement">
		<a href="index.php?page=reglement"><img alt="bouton reglement" src="images/reglement.jpg" width="138px" height="20px" /> </a>
		</div>
	
		<div id="charte">
		<a href="index.php?page=faq"><img  alt="bouton charte" src="images/charte_graphique.jpg" width="138px" height="21px" /> </a>
		</div>

		<div id="log">
					<br /><br /><br />
					<form action='index.php?page=valid' method='post'>
					<p>
					<input type='text' name='pseudo' id='pseudo' value='Pseudo' /> <br /><br /><br />
					<input type='password' name='password' id='password' />
					<input type="checkbox" name="IPsec" id="IPsec" checked="checked" />
					


					</p>
					</form>
					
		</div>

	</div>	
	


	<div id="droite">
		<object type="application/x-shockwave-flash" data="droiteload.swf" width="150px" height="352px">
			<param name="play" value="true" />
			<param name="movie" value="droiteload.swf" />
			<param name="menu" value="false" />
			<param name="quality" value="high" />
			<param name="scalemode" value="noborder" />
			<p> ceci est le cote droit si vous voyez ceci vous devriez telecharger la derniere version de flash player </p>
		</object>
	</div>
	</div>
	<div id="bas">
		<object type="application/x-shockwave-flash" data="footerload.swf" width="800px" height="180px">
			<param name="play" value="true" />
			<param name="movie" value="footerload.swf" />
			<param name="menu" value="false" />
			<param name="quality" value="high" />
			<param name="scalemode" value="noborder" />
			<p> ceci est le footer si vous voyez ceci vous devriez telecharger la derniere version de flash player </p>
		</object>

	</div>
	
</div>	
  
</body>

</html>


Et le Css:

* {
margin:0px;
padding:0px;
}

body{
text-align:center;

}
#pagelol{
width:800px;
height:699px;
}

#centre{
margin-left:28px !important;
width:840px;
height:352px;
margin-bottom:0px;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}

#haut{
margin-left:38px !important;	
margin-left:5px;
float:left;
margin-bottom:0px;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
}

#droite{
float:left;
margin-bottom:0px;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
#bas{

float:left;
clear:left;
margin-bottom:0px;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
#html{
width:482px;
height:352px;
float:left;
background-image:url(images/fond.jpg);
text-align:left;
overflow:auto;
margin-bottom:0px;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}

#lots{
width:475px;
height:352px;
overflow:auto;
float:right;
text-align:left;
margin-bottom:0px;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}

#gauche{

float:left;
clear:left;
margin-bottom:0px;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;

}
#menu{
width:138px;
height:352px;
float:left;
background-color: #9f9f9f; 
margin-bottom:0px;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;

}

#equipe{
width:138px;
height:21px;
margin-bottom:0px;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;

}
#reglement{
width:138px;
height:20px;
margin-bottom:0px;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}

#charte{
width:138px;
height:21px;
margin-bottom:0px;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;

}
#gris{
background-color: #9f9f9f;
width:138px;
height:9px;
margin-bottom:0px;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;


}
#log{
width:138px;
height:281px;
background-image:url('images/log.jpg');
margin-bottom:0px;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}
#login{
width:120px;

}
input{
width:110px;
}

.inter{
margin-top: 50px;
}

#pass{
width:120px;

}

img {
border: none;
}

#sponsors{
color:#ff9900;
}
.warning{
color:red;
}


Voila je vous remercie d'avance pour l'aide et les conseilles que vous pourriez m'apporter Smiley smile
Modifié par Laurent Denis (01 Mar 2007 - 16:28)
Up, Smiley bawling

Edit: J'ai trouver le problème sous IE, pour corriger les problemes d'espace entre les images du menu, il fallait "simplement" coller toutes les balises <div> <img> </div> entre elles car IE conserve l'espace entre les balises, vive IE...

Edit 2: Bon, j'ai trouvé aussi pour FF, donc pour aidé ceux qui ont le même problème que moi, il fallait que je définisse la taille des divs des flashs haut, gauche, droite, bas dans le css.

Merci à ceux qui auraient tenté de m'aider Smiley cligne
Modifié par Ocelyn (04 Mar 2007 - 15:48)
Sujet clos
Aller à