18041 sujets

Questions générales et questions de débutants

[RESOLU]Des div qui se déplace sous IE

Bonjour a toutes et tous !

J'ai, même en dévorant le forum, pas trouvé de solution a mon problème...

Le voici:

html (je préfère tout mettre comme ça pas de perte de temps en blabla...)

<body>
	<div id="top">
		<img src="images/top.jpg" alt="design qui contient le menu et des élément graphique" hspace="0" vspace="0" />
	</div>
	<div id="menu">
		<div id="menu_lien">
			<table border="0">
				<tr>
					<th width="100px" valign="top" align="right">
						<a href="#" class="active">HOME</a><br />
						<a href="#" class="noactive">CONVICTIONS</a><br />
						<a href="#" class="noactive">PERSONNEL</a><br />
						<a href="#" class="noactive">LISTE 4</a><br />
						<a href="#" class="noactive">PLAN DU SITE</a><br />
						<a href="#" class="noactive">LIENS</a>
					</th>
					<th width="10px" valign="top" align="left">&nbsp;
						
					</th>
					<th width="570px" valign="top" align="left">
						&nbsp;<!--ici va se trouvé les sous menu-->
					</th>
				</tr>
			</table>
		</div>
	</div>
	<div id="container">
		<div id="contenu">
			<table border="0">
				<tr>
					<th width="305px" valign="top" align="right">
						<h2>BONJOUR A TOUTES ET TOUS</h2><br />
						<h3>Je vous remercie tout d’abord de votre visite et vous souhaite un agréable moment en ma compagnie. Ce site vous permettra, je l’espère, de mieux me connaître et peut-être de confirmer votre choix en me soutenant le </h3><h2>21 octobre prochain pour les élections fédérales.</h2><br />

<h3>Bien que préférant l’échange direct, le regard, la parole, internet représente une forme de communication incontournable que j’utilise chaque jour et par laquelle je me ferai un plaisir de répondre à vos questions, remarques, suggestions et autres échanges d’idées.<br /><br /></h3>

<h2>Faites-moi signe !</h2>
					</th>
					<th width="21px" valign="top" align="left">&nbsp;
						
					</th>
					<th width="599px" valign="top" align="left">
						<img src="images/flyer_promo_pcs.jpg" alt="flyer promotionnel de beatrice ackermann pour les elections 07, liste 4" />
					</th>
				</tr>
			</table>
		</div>			
	</div>
	
	<div id="bottom">
		<img src="images/bottom.jpg" alt="design qui contient le bas de page, la signature de beatrice ackermann et des élément graphique" />
	</div>
	<div id="centre_bottom">
		<div id="citation">
			<h3>« Chaque nouvelle femme au pouvoir renforce les autres parce qu’elle bouscule un stéréotype, qu’elle inaugure une nouvelle image »<br /><br />
	
	Ruth Dreyfuss</h3>
		</div>
	</div>
</body>
</html>


et voici ma css



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

body{
	background-image:url(images/background.jpg);
	background-repeat:repeat;
	background-position: center top;
}

img{
	border:0px;
}

h1, h2, h3, h4, h5, h6, a{
	font-family:Arial, Helvetica, sans-serif;
}

h2{
	font-size:12px;
	font-weight:bold;
}

h3{
	font-size:12px;
	font-weight:100;
}

a{
	text-decoration:none;
	font-size:12px;
}

.active{
	color:#0097ac;
}

.noactive{
	color:#000;
}


/**************** TOP *****************/

#top{
	background-image: url(images/repeat_hautdepage.jpg);
	background-repeat: repeat-x;
	background-position: center top;
	text-align:center;
	width:100%;
	height:142px;
	
}

/**************** MENU ****************/

#menu{
	position:relative;
	margin-left:-258px;
	margin-top:-130px;
	left:50%;
	height:130px;
	width:700px;
}

#menu_lien{
	font-size:12px;
}

/************** CONTENU ***************/

#container{
	background-image:url(images/middle.jpg);
	background-repeat:repeat;
	width:100%;
}

#contenu{
	position:relative;
	margin-left:-488px;
	left:50%;
	width:936px;
	padding:20px;
	color:#FFFFFF;
}

/************** BOTTOM ****************/

#bottom{
	background-image: url(images/repeat_basdepage.jpg);
	background-repeat: repeat-x;
	background-position: center top;
	text-align:center;
	
}

#centre_bottom{
	position:relative;
	margin-left:-143px;
	margin-top:-125px;
	left:50%;
	height:130px;
	width:260px;
}

#citation{
	color:#FFFFFF;
}


Je m'excuse déjà pour la longueur du poste, mais je pense que le code est important à voir en entier !

Je vous laisse voir les quelques pixel d'erreur qui s'immisce dans mon graphisme à l'adresse: http://www.ngtornay.ch/pcs/

Entre guillemets c'est juste sous FF/Safari mais sous IE6 pas moyen de coller mon contenu au design du haut !

Merci beaucoup de votre aide !
Le débutant vous remercie déjà beaucoup de vous pencher sur mon problème !

Cordialement,
Chum
Modifié par Chum (16 Aug 2007 - 16:29)
Salut,

il semblerait que ton div menu pousse un peu ton div container vers le bas.

Soit je mettrais son height à 126px au lieu de 130px.

Soit, via un commentaire conditionnel pour IE<7, je mettrais un margin-top:-4px à container.

A+
Hello,

Pour le height a 126px: ca marche sous IE mais plus sous FF...

J'ai un problème pour la seconde solution: c'est koi un commentaire conditionnel ?
C'est exploiter un bug ie ? c'est ça ?

Merci beaucoup pour tes réponses !

Elle m'ont déjà fait comprendre la provenance du problème ! je vais faire des recherche pour ces commentaire conditionnel et je vais voir ce que je peux faire.

Merci beaucoup !

chum
Heyoan a écrit :
Re',

effectivement il faut un commentaire conditionnel pour les 2 solutions. Pour plus d'infos, c'est dans la FAQ. Smiley cligne


Oui merci beaucoup !!!

Alors j'ai utilisé le code !important; pour définir la bonne taille dans FF/Safari et une 2ème taille pour ie


#menu{
	position:relative;
	margin-left:-258px;
	margin-top:-130px;
	left:50%;
	height:130px !important;
	height:126px;
	width:700px;
}


Merci beaucoup Heyoan ! tes conseil m'ont beaucoup aidé !

A bientot !

Chum
Sujet clos
Aller à