28173 sujets

CSS et mise en forme, CSS3

Probleme de decalage d'image sous ie

Bonjour et joyeux noel a tous Smiley smile ,

Voila je suis en train de faire le placement des images d'un site web, sous firefox aucun probleme les images sont centree horizontalement et elle se colle bien l'une a l'autre.
Mais sous ie7 les images ne sont pas centree et elle on un decalage.

Voici la page test http://www.minouch.net/test/accueil.html[/url]

Voici le code css :

body {

background-color:#9c8a6f;
margin: 0;
padding: 0;

}
#header {
height: 148px;
background-color: #9c8a6f;
}
#conteneur {
position: relative;
width: 917px;
height: 592px;
background-color: #9c8a6f;
margin: 0 auto;
}
#centre {
overflow: auto;
background-image:url(images/centre.jpg);
width: 395px;
height: 344px;
margin-left: 389px;
margin-right: 133px;
background-color: #9c8a6f;
}
#gauche {
position: absolute;
left:0;
width: 389px;
height: 344px;
background-color: #9c8a6f;
}
#droite {
position: absolute;
right:0;
width: 133px;
background-color: #9c8a6f;
}
#pied {
height: 98px;
background-color: #9c8a6f;
}
img {
border: 0;
}

p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #d7cdbd;
margin: 20px 40px 20px 10px;
text-align: justify ;
}

a:link { color: #feadc9; text-decoration: none; font-size:11px; }

a:visited { color: #feadc9; text-decoration: none; font-size:11px; }

a:active { color: #feadc9; text-decoration: none; font-size:11px; }

a:hover { color: #fd1f6d; text-decoration: none; font-size: 11px;}



Et voici le code html :


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Bienvenue sur le site de Minouch.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="fichier.css" />


</head>
<body>
<div id="conteneur">

	  <div id="header">
		<img src="images/haut.jpg">
	  </div>

	  <div id="gauche">
		<img src="images/gauche.jpg">
	  </div>
	  
	  <div id="droite">
		<img src="images/droit.jpg">
	  </div>
	  
  	<div id="centre">
	
<p>
Bienvenue sur mon site web.</br></br>

Vous-y trouverez des illustrations que j'ai faites de 2004 &agrave; maintenant.</br>
Des oeuvres seront ajout&eacute;es au site r&eacute;gulierement dans la section Portefolio.</br></br>


Bonne visite >>>>
</p>


  	</div>
	  
	  <div id="pied">
		<img src="images/menu.png">
	  </div>

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


pourriez vous m'aider svp???

Ha oui il n'y a pas encore les balise alt et autre pour l'instant et les font-size serons mise en em et non en px Smiley smile

D'avance merci a vous

Cybercodes
Modifié par cybercodes (28 Dec 2006 - 23:03)
Smiley decu y a t'il quelqu'un qui peut m'aider svp, car la je retourne la css dans tous les sens et essaye pleins de choses et rien ne fonctionne.
Bonjour cybercodes,

Pour le centrage : le document n'ayant pas de doctype, il ne sera pas interprété en mode standard par Internet Explorer (et en mode non standard, le centrage via les marges ne marche pas. Il y a un tuto sur cette question)
Il faudrait donc choisir un doctype

Le décalage : pour IE,
<div id="header">
		<img src="haut.jpg">
</div>

n'est pas rendu comme 
<div id="header"><img src="haut.jpg"></div>
Dans le premier cas, il ajoute une ligne de base sur laquelle s'alignent les images, l'espace sous celles-ci (le "décalage" dont tu parles) étant celui réservé pour la partie descendante des lettres minuscules (ainsi que d'autres caractères).

En mode standard strict (avec un Doctype strict), cet espace serait présent avec Firefox ou Opera qu'il y ait ou non d'espace. Il faut appliquer un style à ces images pour changer leur alignement vertical ou en les passer en display:block. (enfin dans ton cas il ne serait pas visible là où il y a une hauteur spécifiée)


Ceci dit il faudrait revoir d'une manière générale la manière dont tu t'y prends.
Modifié par Alan (27 Dec 2006 - 07:18)
Merci pour les informations, cela ressemble deja bc plus a ce que je voulais Smiley smile

Que veut tu dire la maniere general donc je m'y prend??? est ce qu'il y a bc de choses que je fais qui ne sont pas bonne?

Par contre j'ai constate qu'il y a un mini decalage de quelques pixels sous ie et aussi que ie na pas exactement les meme couleur "pour l'image contenant le menu qui est en png" par contre sous firefox il n'y a aucun probleme.

Meme les couleur il ne les gere pas bien???? Smiley lol
Donc la solution seras sans doute de soit tous mettre en png soit tous en jpg je suppose???

Par contre le mini decalage de quoi peut il provenir?

Un grand merci pour ton aide.
Modifié par cybercodes (27 Dec 2006 - 15:26)
cybercodes a écrit :
ie na pas exactement les meme couleur "pour l'image contenant le menu qui est en png" par contre sous firefox il n'y a aucun probleme.

Meme les couleur il ne les gere pas bien???? Smiley lol

Une solution : PngOptimizer
Modifié par 20cent (27 Dec 2006 - 15:35)
Et bien ce petit programme est super, cela fonctionne tres bien, merci Smiley smile
Modifié par cybercodes (27 Dec 2006 - 15:45)
Bon et bien voila

Il me reste juste un decalage d'un pixel sous ie et impossible de mettre le background fixe dans les deux browser tester en meme temps (firefox et ie)

En fait si je demande de fixé dans ma css, ie le fixe mais firefox le fait disparaitre) et si je ne le fixe pas, firefox l'affiche correctement et le fixe et ie l'affiche mais il scroll avec le texte.

J'espere que vous pourrez m'aider car la je vois vraiment pas
Sujet clos
Aller à