28220 sujets

CSS et mise en forme, CSS3

Images sous ie absente ?

Bonsoir, je viens de faire ma mise en page avec des divs, j'ai passer mon site au validator xhtml strict et css, tout est valide mais lorsque je regarde le site sous ie, j'ai des soucis d'images tandis que sous FF tout est nikel.

Voici la page index :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
  <title>Mon titre de page</title>
  <meta http-equiv="Content-Type"
        content="text/html; charset=iso-8859-15" />
		<link rel="stylesheet" type="text/css" href="styles.css" />
		</head>
		
		<body>
		
		
		
		
        <div id="conteneur">

<div id="header">
</div>

<div id="bgg">
</div>

<div id="menuh">
</div>

<div id="bgd">
</div>

<div id="path">
</div>

<div id="cgauche">
</div>

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

<div id="cdroit">
</div>

<div id="footer">
</div>

        </div>

		
		
				
		</body>
		</html>


et la page css :

html {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 0;
	color: #000;
	background-color: #bba986;
	text-align: center;
	font-family: "Trebuchet MS", Verdana, "Lucida Grande", Tahoma, Helvetica, Sans-Serif;
	font-size: 85%;
}

#conteneur {
position: relative;
width: 626px;
height: 500px;
margin: 0 auto;
}


#header {
background: url(images/index_01.gif);
height: 105px;
width: 626px;
}

#bgg {
background: url(images/index_02.gif);
height: 28px;
width: 30px;
margin-top: 0;
}

#menuh {
margin-top: -28px;
margin-left: 30px;
background: url(images/index_03.gif);
width: 572px;
height: 28px;
}

#bgd {
background: url(images/index_04.gif);
height: 28px;
width: 24px;
margin-left: 602px;
margin-top: -28px;
}

#path {
background: url(images/index_05.gif);
width: 626px;
height: 34px;
}

#cgauche {
background: url(images/index_06.gif);
width: 16px;
height: 232px;
}

#content {
background: url(images/index_07.gif);
width: 592px;
height: 232px;
margin-left: 16px;
margin-top: -232px;
}

#cdroit {
background: url(images/index_08.gif);
width: 18px;
height: 232px;
margin-left: 608px;
margin-top: -232px;
}

#footer {
background: url(images/index_09.gif);
width: 626px;
height: 51px;
}


je comprend pas, le code a l'air parfait mais le résultat n'est pas présent sous ie, pourtant le code que j'utilise devrais passer sous ie non ?
Bonjour.

J'ai fait tourner ce code sous IE et FF, et je trouve qu'il y a des problèmes sous les deux.

Un conseil pour débuguer : encadrer temporairement les div pour les visualiser, au besoin avec plusieurs couleurs.

Par exemple :
#bgg {border:2px solid red;...


En effet, certains div sont masqués par d'autres. Donc, les images, nécessairement....
Modifié par GeorgesM (13 Sep 2005 - 09:10)
Re-bonjour, je viens de tester d'assigné une bordure de 2px et de couleurs différente a chaques div, j'ai donc replacer les imates comme il le fallait grâce au bordure mais le résultat final été pire Smiley decu

je comprend pas trop le système la Smiley decu
Avec les bordures, on voit bien que des div sont recouvertes par d'autres...
Donc les images sont (ou étaient) cachées dessous.
Je pense qu'il faut retravailler le canevas avec les méthodes présentées
sur ce site.
Attention, c'est pas facile. Faut s'acrocher un peu.
Bon courage.
Modifié par GeorgesM (13 Sep 2005 - 12:36)
Oui, ça j'au vu mais comment y remedier ?
J'ai essayer de changer les tailles etc... afin que tout soit cote a cote mais le résultat est mauvais..
Sujet clos
Aller à