5568 sujets

Sémantique web et HTML

Bonsoir.
J'ai un soucis avec les background image qui marchent très bien avec firefox, mais refusent de s'afficher avec ie6. En local (easyphp 1.8) comme en ligne (hébergé chez 1&1).

Voici le code en question:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" /> 

<html xmlns="http://www.w3.org/1999/xhtml" />
<head>
       <title>album photo</title>
       <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-15" /> 
       <link rel="StyleSheet" type="text/css" href="include\album.css" />
       <!--[if lte IE 6]>
	        <style type="text/css">
         	div#global {
	        	height: 100%;
        	}
        	div#footer {
         		bottom: -1px;
        	} 
	
	        </style>
        <![endif]-->
</head>
<body>
	<div id="global"> 
	  	<div id="banniere">
	 		 ERIC VAMPERE<br>
	 		 Photographe
	  	</div>
	   	<div id="menu_h">
	  		<a href="./index.php?navigation=admin.php" id="lien_menu_h_admin">Connection</a>
                         <div id="menu_h_lien_centre">
		   		<a href="./index.php" id="lien_menu_h"  >Acceuil</a>
		   		<a href="./index.php?navigation=gal_index.php" id="lien_menu_h"  >Gallerie</a>
		   		<a href="./index.php?navigation=contact.php" id="lien_menu_h"  >Contact</a>
				<a href="./index.php?navigation=test.php" id="lien_menu_h"  >test</a>
		   	</div>
	  	</div> 
	  	<div id="navigation">
			<p style="background-image:url('images/menu/coin_gh.jpg')">zdadsqds</p>
	  	</div>
	  	<div id="footer2">
	  		<div id="footer">Copyright BLALALALDScjkhvcxcvcxvxcv</div>
	  	</div>
	</div>
</body>
</html>


Et le css:
div {
	margin: 0 0 0 0;
	padding: 0 0 0 0;

}

p{
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

html {
	height: 100%;
	background-color:#f3efec;
}

body {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	height:100%;
}

div#global {
	min-height: 100%;
	width: 100%;
	margin: 0 0 0 0; 
	position:relative;
	
}

div#banniere {
	width: 100%;
	text-align:center;
	font-size:30px;
	padding-top:10px;
	padding-bottom:10px;
}


div#navigation {
	padding-bottom: 20px;
	overflow:auto;
}	 	

div#footer {
	position: absolute;
	width: 100%;
	bottom: 0;
	left:0;
	text-align:center; 
	background-color: #d6d4d4;
	border-top:1px solid black;
	height:1.5em;
	line-height: 1.2em;
}

div#footer2 {
	height: 30px;
	clear: both;
}

div#menu_h {
	background-color: #ede9e6;
	border-top: 1px solid; 
	border-bottom: 1px solid; 
	text-align:center;
	padding-top:10px;
	padding-bottom:10px;
	margin-top:10px;
	margin-bottom:10px;
	width:100%;
}

a#lien_menu_h {
	margin: 0px 10px 0px 10px;
	text-decoration: none;
	color:black;
	font-size:18px;
}

a#lien_menu_h_admin {
	margin: 0px 10px 0px 10px;
	text-decoration: none;
	color:black;
	position:absolute;
	right:10px;
	font-size:18px;
}

a#lien_menu_h:hover {
	color: #808080;
}
	
div#menu_h a.current {
	text-decoration:underline;
}


et voici la http://www.testouille.org/index.php?navigation=test.phpversion en ligne[/URL].

ici, c'est la balise <p> contenu dans la div "navigation" qui pose problème.
J'ai déjas éssayer de mettre la déclaration de la propriété de style "background-image" dans le fichiers css, ca ne change rien.
J'ai également éssayer des liens absolu et relatifs, ca ne change rien non plus. Pas plus que d'enlever les quotes qui englobe le lien vers l'image.

Du coup, je commence a fortement soupconner mon en-tête (DOCTYPE, balise html et head), honteuseument copié sans trop comprendre depuis le site w3c.
J'ai eu beau chercher de la doc la dessus, tous les sites que j'ai trouvé se "contente" de donner une liste d'en-tête types sans trop éxpliquer le pourquoi du comment.

Quelqu'un aurais t'il la bonté de me montrer mon erreur svp? Merci.


edit : J'ai réglé mon problème en replacant la propriété de style dans le css.

Mon erreur était qu'un chemin relatif dans un fichier css est relatif a l'emplacement du fichier css et non du fichier contenant la balise ciblé.
Cela dit, ca ne m'éplique pas pourquoi ca ne veut pas fonctionner en laissant la propriété de style dans le code html...
Modifié par triplebuze (10 Jan 2008 - 13:58)