Pb mise en page IE6/Firefox...

ronus · 20 Février 2006

Bonjour tout le monde,

Jespère que vous allez pouvoir m'évité de me jetez par la fenêtre (avec mon PC, il l'a bien mérité!)

Je tente de concevoir un site assez simple (html+css), surtout pour des pros du wouaib comme vous, mais je ne m'en sors pas avec les différences de mise en page entre les différents browsers...

Si vous avez une solution générale pour éviter ce problème récurrent, je suis preneur!

Sinon, voici l'exemple de ce qui me perturbe profondément (j'ai essayé de simplifié au minimum, il y a une image, pas très important, et je pense beaucoup de code inutile!):

html:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"> 
    _AT_import "styles.css"; 

</style> 

</head>

<body>
<div id="tout"> 
	<div id="header"> 
  		<div id="titre">TITRE</div> 

		<div id="logo">
    	LOGO
   		</div> 
	</div> 

 	<div id="menu">
		MENU
	</div>

	<div id="content">CONTENT</div> 

 	<div id="footer">
 		<div id="pub">PUB</div> 
		<div id="copy">COPY </div> 

</div>

</body>
</html>

et le CSS:



/* CSS Document */

ccWeb/styles.css 

html { margin: 0px;  } 

* {margin:0; padding:0}



body { 
margin: 0px ; 
padding: 0px 0px 0px 0px; 
font: 12px Century Gothic; 
text-align: center; 
text-decoration: none;
}

#tout { 
 margin: 0px auto; 
 min-width: 900px;  
 width: 900px;          
}     
#header { 
 height: 35px; 
 width: 900px; 
 background: #ffffff; 
} 

#logo { 
 text-align: right; 
  width: 900px; 
 height: 112px; 
} 


#menu {  margin: 0px auto;
 height: 25px; 
 width: 900px; 
 background: url('images/site/menu.gif') no-repeat; 
 padding: 0px 0px 0px 0px; 
 margin: 0px 0px 0px 0px; 
  } 


#footer { 
 clear: both; 
 position: relative; 
}

DONC, mon problème existentiel:

Sous IE6 "menu" se place sous "header" en laissant la place de "logo" et "titre" (qui sont en gros 2 images)

Sous FireFox "menu" se place...je ne sais pas trop ou? Mais il ne tien apparemment pas compte des éléments antérieur...

Comment puis-je faire pour placer tous ça au même endroit dans ces 2 navigateurs??

Jespère que quelqu'un me sauvera de ma déprime, même si cela vous parait une question con, merci d'avance!!

Ronan.

**Dan** · 20 Février 2006

Sans avoir de lien pour valider le code et le positionnement, je te dirais de mettre un clear:left à ta <div> #menu.

Cela devrait la forcer à gauche... sous le header (si tu enlèves le text-align:center du body).

Par contre, tu es certain de ce "text-align:center" dans le <body> ?

Tu veux tout centrer sur ta page ?

Dan

ronus · 20 Février 2006

eu, voici un lien pour voir le résultat

je suis "bien sur pas sur" de mon "text-align:center" dans le body, mais je voulai me concentrer sur le positionnement vertical, donc jai tout, tou centré ce que je pouvai.... :blink:

quand a tout forcer a gauche? cela va t'il changer l'interprétation du positionement vertical?

j'essai! merci pour le feedback à la vitesse de la lumiere!

**Dan** · 20 Février 2006

C'est le clear:left qui va changer cela, pas le text-align

Avec un clear:left, tu signales que ce bloc doit être "libre à gauche", c'est à dire qu'il doit être le premier élément sur cette ligne.

drakulls · 20 Février 2006

bon...

déja il te manque un </div> en bas de page...

ensuite tu ne positionne rien..

ni en relative, ni en absolute.

à ce moment tu pourras jouer avec tes float.

vu le gabarit que tu veux avoir, je te propose de partir de celui-ci :

gabarit alsacreation

lis le correctement et tu n'aura plus qu'a inserer dans le header ta div logo en relative par rapport au header...

c'est peut etre un peu confus....

mais si tu analyse correctement ce gabarit tu comprendras deja bcp mieux les bases...

ronus · 20 Février 2006

ben, eu, j'ai bien enlevé le text align,

mais avec le clear: left, rien en change...?

**Dan** · 20 Février 2006

En regardant le lien, je vois bien le menu où il est supposé se trouver, non ?

Mais il est vrai qu'il te manque une </div> tout en bas, bien vu drakulls :up:

ronus · 20 Février 2006

ben si tu l'ouvre avec firefox ou IE, il n'est pas au meme endroi...

je partait du meme exemple mais sur un site ricain, merci pour le lien en french et le </div>

maintenant, il est vrai qu'il vau ptete mieu que je reprenne le "chemin de l'ecole" avec ça pluto que de vous assasiné de question...

et je ne positionne rien, parceque quoi que je positionne, il y a toujours le meme décalage que celui de l'exemple...

"comprend po"

drakulls · 20 Février 2006

maintenant, il est vrai qu'il vau ptete mieu que je reprenne le "chemin de l'ecole" avec ça pluto que de vous assasiné de question...

ce n'est pas ce que je voulais dire rassures toi... mais c'est je crois le meileur moyen de comprendre ton erreur . Mais je suis tjrs ravi de pouvoir aider

je dois avouer d'ailleurs qu'en copiant collant ton code c'est pas facile de trouver l'erreur....

et recommencer plus clairement est a mon avis la meilleur solution.

positionne systematiquement tes div.

voili voilou...

Modifié 20 Février 2006 par drakulls

Connexion

Pb mise en page IE6/Firefox...

Sujets conseillés

ronus

Dan

ronus

Dan

drakulls

ronus

Dan

ronus

drakulls

Veuillez vous connecter pour commenter

Parcourir

Activité