28173 sujets

CSS et mise en forme, CSS3

Problème positionement/alignement FF

Bonjour,
J'ai un problème d'incompatibilité entre FF et IE. Sur IE tout se passe bien, mais sur FF, mon texte sur les pages Accueil, Qui est Qui et contact ne tient pas dans la totalité de la largeur et le texte est renvoyer automatiquement à la ligne. J'ai essayer toute sorte de truc pour faire en sorte qu'il s'affiche correctement sur FF mais cela intéragie sur IE.... Quelqu'un pourrait-il m'aider svp?
Vous pouvez voir le site ici

Je vous fourni ci dessous ma page d'accueil et mon css.
Merci d'avance pour votre aide qui me sera précieuse.

body{
	font-family:arial;
	font-size:12px;
	margin:0px;
	padding:0px;
	background-color:#cccc99;
}

#conteneur {
	position:relative;
	width:762px;
	left:50%;
	margin-left:-375px;
	margin-top:15px;
}

#banniere {	
	position:absolute;
	height:120px;
	width:762px;
	border:0px;
	margin:0;
	padding:0;
	top:0;
	left:0;
}

#contenu {
	position:absolute;
	background-color:#FFFFFF;
	height:400px;
	overflow:auto;
	width:762px;
	margin:0;
	padding:0;
	left:0;
	top:144px;
}

#menu {	
	position:absolute;
	border:0px;
	top:120px;
	left:0;
	height:24px;
	width:762px;
	margin:0;
	padding:0;
	
}

#bandeau_bas {
	position:absolute;
	background-image:url(images/bandeau_bas.png);
	background-repeat:no-repeat;
	height:28px;
	width:762px;
	top:544px;
	left:0;
	margin:0;
}

#contact_gauche{
	margin-left:10px;
	margin-top:10px;
	float:left;
	padding:10px;
	width:230px;
}

#contact_droite{
	margin-left:20px;
	margin-top:0px;
	width:440px;
	text-align:justify;
}

#accueil_gauche{
	margin-left:30px;
	margin-top:0px;
	float:left;
	width:250px;
	text-align:center;
}

#accueil_droite{
	margin-left:100px;
	margin-top:30px;
	width:350px;
	padding:20px;
	text-align:justify;
}

#qui_gauche{
	margin-left:50px;
	margin-top:10px;
	float:left;
	padding:10px;
	width:250px;
	text-align:center;
}

#qui_droite{
	margin-left:0px;
	margin-top:30px;
	width:280px;
	text-align:justify;
}


la page d'accueil :



<body onLoad="MM_preloadImages('images/accueil_roll.png','images/qui_roll.png','images/galerie_roll.png','images/contact_roll.png')">

<div id="conteneur">
	<div id="banniere">
		<img src="images/banniere.png" border="0"  width="762px" height="120px">	</div><!-- fin div banniere-->
	
	<div id="menu">
	<table border="0" cellpadding="0" cellspacing="0" height="24">
	<tr>
	<td><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('accueil','','images/accueil_roll.png',1)"><img src="images/accueil.png" name="accueil" width="190" height="24" border="0"></a></td>
	<td><a href="delphine.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Qui est qui','','images/qui_roll.png',1)"><img src="images/qui.png" name="Qui est qui" width="191" height="24" border="0"></a></td>
	<td><a href="galerie.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('galerie','','images/galerie_roll.png',1)"><img src="images/galerie.png" name="galerie" width="190" height="24" border="0"></a></td>
	<td><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('contact','','images/contact_roll.png',1)"><img src="images/contact.png" name="contact" width="191" height="24" border="0"></a></td>
	</tr>
	</table>
	</div><!--fin div menu-->
	
	<div id="contenu">	
	<h1>> Accueil</h1>
	<br><br>
	<div id="accueil_gauche">
	<img src="images/lycom.jpg">
	</div>
	<div id="accueil_droite">
	Bienvenue,<br><br>
 
	Vous êtes sur le site officiel de la Promo 2005 STS Communication des Entreprises !
	<br><br>
	Ce site a été réalisé pour “graver” des moments fabuleux que nous avons partager pendant ses deux
	années de BTS.
	<br><br>
	J’espère qu’il vous plaira, de part son contenu et son design.<br>
	N’hésiter pas à me laisser vos réactions ou vos impressions en vous rendant dans la rubrique contact.<br><br>
	A bientôt,<br><br>
	Michelle.
		</div>

	</div><!--fin div contenu-->
	
	<div id="bandeau_bas">	
	</div><!--fin div bandeau_bas-->
</div><!--fin div conteneur-->
</body>
</html>

Modifié par pitchoumi (05 Dec 2006 - 23:35)
Bonjour,

Trop de position absolute, vraiment trop
header
conteneur margin auto et width
image gauche float left
texte
pied de page clear both, width 100%
fin conteneur

Désolé je n'ai pas trop de temps, c'est synthétique ...
Merci pour ta réponse ghost, mais je n'ai pas tout compris... quand tu auras un peu de temps libre pourras-tu être un plus explicite...
Concernant les positions absolute c'est la seule solution que j'ai trouvé pour que mes blocs apparaissent au bon endroit. Aurais tu une autre astuce à me donner?
Merci de ton aide.
Re,

Un petit exemple pour donner des idées...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

		

<title>test</title>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<style type="text/css">

*{margin:0; padding:0}


body{
background: #cccc99;
margin: 10px 0 10px 0;
}

#conteneur {
width:760px;
height: 100%;
margin: auto;
background: #fff;

}

#header{
width: 760px;
margin: auto;
height: 120px;
background: url(banniere.png);	

}

#menu{
width: 760px;
height: 24px;
margin: auto;
background: yellow;
}

#menu ul {
list-style-type: none;
width: 100%;
}

#menu li {
float: left;
}

#menu a {
width: 190px;
height: 24px;
display: block;
text-align: center;
text-decoration: none;
color: #000;

}

 a span{
margin-left: -9999px;
text-indent: -9999px;
}

.accueil{
background: url(accueil.png);
}

.qui{
background: url(qui.png);
}

.galerie{
background: url(galerie.png);
}
 
.contact{
background: url(contact.png);
}

a:hover.accueil{
background: url(accueil_roll.png);
}

a:hover.qui{
background: url(qui_roll.png);
}

a:hover.galerie{
background: url(galerie_roll.png);
}
 
a:hover.contact{
background: url(contact_roll.png);
}

#bandeau_bas{
height: 28px;
background: url(bandeau_bas.png);
width: 760px;
margin: auto;
}

#contenu{
background: #fff;
width: 100%;
overflow: hidden;
padding-bottom: 28px;

}

.photo{
width: 214px;
height: 280px;
float: left;
margin: 25px 40px 25px 40px;
background: cyan;

}

.titre{
font-size: 1.4em;
padding: 40px;
}

.texte{
font-size: 1em;
margin-right: 25px;
}

.texte_sous_photo{
clear: both;
font-size: 1em;
margin-left: 125px;
}

.texte_normal{
font-size: 1em;
margin: 0 25px 0 25px;
text-align: justify;
}

#footer{
height: 28px;
background: orange;

}
</style>
</head>

<body>
<div id="conteneur">
	<div id="header">
	</div>
	<div id="menu">
		<ul>
			<li><a href="" class="accueil"><span>accueil<span></a></li>
			<li><a href="" class="qui"><span>qui<span></a></li>
			<li><a href="" class="galerie"><span>galerie<span></a></li>
			<li><a href="" class="contact"><span>contact<span></a></li>
		</ul>
	</div>
	<div id="contenu">
	<div id="bandeau_bas">
	</div>
		<div class="photo">
		</div>		
<h1 class="titre">Bienvenue,</h1>
<p class="texte">
Vous êtes sur le site officiel de la Promo 2005 STS Communication des Entreprises !<br />

Ce site a été réalisé pour “graver” des moments fabuleux que nous avons partager pendant ses deux années de BTS.<br />

J’espère qu’il vous plaira, de part son contenu et son design.<br />
N’hésiter pas à me laisser vos réactions ou vos impressions en vous rendant dans la rubrique
</p>

<p class="texte_sous_photo">
contact.<br />

A bientôt,<br />

Michelle.
</p>
<p class="texte_normal">Il y a une petite erreur dans la découpe des images de l'entête mais bon ...<br />
Le menu est revu sans tableau ni javascript et reste accessible même si les css sont désactivées. <br />
Voilou, c'est du vite fait mais ça peut donner une idée.<br />
Bon courage et bon BTS !!<br />
Ghost.
</p>
	</div>
	<div id="footer">
	</div>
</div>
</body>
</html>
Sujet clos
Aller à