28220 sujets

CSS et mise en forme, CSS3

Différence IE et Netscape pour centrage

Bonjour,

J'ai un petit problème de compatibilité entre Internet Explorer et Netscape en ce qui concerne le centrage d'une image dans un DIV de ma page HTML.

Je vous avoue que ca fait un moment que je cherche le pourquoi du comment mais j'ai beau essayer toutes les techniques trouvées sur le net, je ne m'en sors pas (je veux bien admettre que ca vient de moi... Smiley decu ).

Plus concrétement, je cherche à centrer ma carte dans un DIV de ma page (le DIV violet) pour pouvoir y ajouter ensuite des images qui me servent de liens pour accéder à d'autres pages. Sous IE, la carte est bien centrée, mais sous Netscape, elle se retrouve en haut de la page...

Voici la page :
http://aroundourworld.free.fr/travels.html

Et voici le CSS utilisé : 

	body 
	{
		padding: 0px;
		margin: 0px;
		font-size: 0.8em;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		background-color: #ffffff;
		scrollbar-face-color: #9F0081; 
		scrollbar-shadow-color: #000000;
		scrollbar-highlight-color: #FFFFFF;
		scrollbar-3dlight-color: #FFFFFF; 
		scrollbar-darkshadow-color: #FFFFFF; 
		scrollbar-track-color: #fff0ff; 
		scrollbar-arrow-color: #fff0ff;
	}
	
	.conteneur 
	{
		position: absolute;
		left: 50%;
		margin-top: 5px;
		margin-left: -385px;
		width: 750px;
		background-color: #fff0ff;
	}

	.boite 
	{
		height:100px ;
		background-color:#CCCCCC ;
		border: 0px;
		position:relative ;
	}

	.boite2 
	{
		float: left;
		width:150px ;
		height:500px ;
		background-color:#00CCCC ;
		border: 0px;
		position:relative ;
	}

	.boite3 
	{
		float: left;
		width:600px ;
		height:500px ;
		background-color:#CC00CC ;
		border: 0px;
		position:relative ;
	}

	.boite3 img 
	{
		position:relative ;
		left: 50%;
		width: 590px;
		top: 50%;
		height: 302px;
		border: 0px;
		margin-left:-295px ;
		margin-top:-151px;
	}

	.boite4 
	{
		Height:500px ;
		background-color:#CC0000 ;
		border: 0px;
		position:relative ;
	}


Et voici le code HTML : 

<!DOCTYpE HTML pUBliC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html lang=fr xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Around our world</TITLE>
	<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
	<link rel="stylesheet" type="text/css" href="styles.css" />
	<meta content="MSHTML 6.00.2800.1498" name=GENERaTOR>
</head>

<body>
	<div class="conteneur">
		<div class="boite"></div>
		<div class="boite4">
			<div class="boite2"></div>
			<div class="boite3">
				<img src="./Design/World.gif"/>
			</div>
		</div>
	</div>
</body>
</html>


Pourriez-vous m'aider svp, car là je commence à tourner en rond malgrès tout ce que j'ai essayé... le plus frustrant, c'est que je sens que c'est une bétise...

Merci beaucoup par avance de votre aide.

Amicalement.

Bruno
Modifié par NonoF (02 Jun 2005 - 00:31)
Bonsoir,
il te suffit de modifier la classe conteneur comme suit (testé sous Firefox)

.conteneur 
	{
position: absolute;
		left: 50%;
		margin-top: -300px;
		margin-left: -385px;
		width: 750px;
		background-color: #fff0ff;
top:50%;
	}
Je te remercie de ton aide. Je vais tester.

Pourrais-tu juste m'expliquer stp :
- pourquoi tu modifies le conteneur et non pas le DIV parent de l'image??
- pourquoi mettre une valeur " margin-top: -300px; " et " top:50%; "??

Merci d'avance.

Bruno
Salut,

j'ai peut-être mal compris ce que tu cherches à faire (et lu trop vite). En fait je pensais que tu voulais centrer l'ensemble de ta page (ton conteneur) en hauteur et en largeur (ce que tu avais déjà fait).

Tu parles de centrer ton image dans ton div bloc3, que sur IE c'est ok mais pas sous Netscape.. Et bien en comparant à la fois sur ces 2 navigateurs + Firefox j'obtiens à chaque fois le même rendu: l'ensemble du site en centré en largeur et se positionne en haut de page. L'image etant à chaque fois positionnée de la même façon dans son bloc div parent, de manière centrée.. il me semble !
En fait, la version Netscape 7.02 décale l'image du bloc3 en haut de la page (l'image est centrée horizintalement par rappot au bloc3 mais est coupé en haut de la page).

J'ai essayé avec une autre version de Netscape (la 7.2 il me semble) et là, cela fonctionne...

C'est vraiment pénible tous ces problèmes de compatibilités...

Du coup j'ai essayé une autre technique qui semble fonctionner : j'ai utilisé l'image comme background que j'ai centré : 

background: url(./Design/World.gif) center center no-repeat;
Oui j'ai également testé sur la version 7.2 de Netscape.
Question bête: es-tu vraiment obligé de faire en sorte que ca fonctionne sous les versions inférieures à la 7.2 ? Smiley confus Ca ne représente pas beaucoup de monde je pense; si tu fais en sorte que cela marche dans IE5+, Mozilla, Firefox et Opera c'est quand-même là l'essentiel. (même si.. je sais).
Sujet clos
Aller à