Mikachu a écrit :
Re,
quelle est l'arborescence de tes fichiers (répertoire et sous répertoires), la position du fichier html, du fichier css et du fichier image) ?
IE est il configuré pour afficher les images ?
Je sais pas je cale un peu là sans exemple...
N'as tu vraiment pas moyen d'utiliser un bout de ftp pour montrer ces 3 éléments pour qu'on puisse comprendre d'où ca peut venir ?
Ma page HTML se trouve dans le répertoire racine R.
Ma feuille de style (Style.css) se trouve dans un répertoire "style1", sous-répertoire de "templates" qui est un sous répertoire de R
Mon image est dans un répertoire "images", sous-répertoire de "style1"
Je pense que IE est configuré pour afficher les images puisque lorsque je mets une adresse relative à la feuille de style, mon image s'affiche correctement sous IE (et du coup, ne s'affiche plus sous Firefox)
Voici mon code HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="copyright" content="(c) Copyright 2006 Hinanui">
<title>My page</title>
<link rel="stylesheet" href="templates/style1/Style.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="js/common.js"></script>
</head>
<body >
<div id="header" >
<div id="topleft" >
</div> <!-- topleft -->
<div id="topright" >
</div><!-- topright -->
<div id="top" >
<div id="headertitle" >
</div><!-- headertitle -->
</div> <!--top -->
</div> <!--header -->
<div id="content" >
<div id="left" ></div><!--left -->
<div id="right" ></div><!--right -->
<div id="middle" >
<div id="info" ></div><!-- info -->
<div id="text" ></div><!-- text -->
<div id="contact" ></div><!-- contact -->
</div><!-- middle -->
</div><!-- content -->
<div id="footer">
<div id="bottomleft" >
<a href="http://www.google.com">www.google.com</a>
</div> <!-- bottomleft -->
<div id="bottomright" >
</div><!-- bottomright -->
<div id="bottom">
<hr >
<p >blablablabla</p>
</div><!-- bottom -->
</div><!-- footer -->
</body>
</html>
Et ma feuille de style:
/* CSS Document template Jaune */
body {width: 760px; background-color: #f6f6e2; font-family: Arial, Helvetica, sans-serif; color: #000000; font-size: 10pt; margin: 0px;}
#header {width: 760px; margin: 0px; padding: 0px;}
#topleft {float: left; width: 131px; height: 98px; margin: 0px; padding: 0px; background-image: url("images/header_left.gif"); background-repeat: no-repeat;}
#topright {display: none; float: right; width: 0px;}
#top {width: 454px; margin: 0px 0px 0px 131px; padding: 0px; background-color: #FFFFFF; background-image: url("images/Heading.gif"); background-repeat: no-repeat;}
#headertitle {padding: 65px 0px 0px 10px;}
#content {clear: left; width: 760px;}
#left {float: left; width: 131px; height: 604px; background-image: url("images/left.gif"); background-repeat: no-repeat;}
#right {display: none; float: right; width: 10px;}
#middle {width: 454px; min-height: 604px; margin-left: 131px; background-color: #FFFFFF;}
#info {width: 454px;}
#datetitle {float: left; width: 100px;}
#timetitle {float: left; width: 100px; padding-top: 10px;}
#locationtitle {float: left; width: 100px; padding-top: 10px;}
#date {float: left; width: 354px;}
#time {float: left; width: 354px; padding-top: 10px;}
#location {float: left; width: 354px; padding-top: 10px;}
#text {width: 454px; padding-top: 20px;}
#contact {width: 454px; padding-top: 10px;}
#form {width: 454px;}
#footer {clear: left; width: 760px;}
#bottomleft {float: left; width: 131px; padding-top: 17px; vertical-align: bottom;}
#bottomright {display: none; float: right; width: 0px;}
#bottom {width: 454px; margin-left: 131px; background-color: #FFFFFF;}
/* ------- Images ----------- */
hr {color: #000000; height: 1px; width: 454px;}
/* ------------ TEXTES ------------ */
h1 {font-size: 12pt; font-weight: bold;}
h2 {font-size: 12pt;}
h3 {font-size: 10pt;}
p {font-size: 10pt;}
.small {font-size: 8pt;}
.medium {font-size: 12pt;}
.big {font-size: 14pt;}
ul {text-align: left; font-size: 10pt;}
li {line-height: 12pt;}
p.footer1 {font-size: 9pt; }
p.footer2 {font-size: 10pt; font-weight: bold; text-transform: capitalize; color: #000000;}
p.footer3 {font-size: 6pt; color: #999999;}
a:link, a:visited {font-size: 8pt; color: #706900; text-align: center; text-decoration: none; background-color: #F6F6E2; }
a:hover, a:active {font-size: 8pt; color: #003366; text-align: center; text-decoration: none; background-color: #D1D16F;}
Un oeil neuf pourrait trouver une solution à mon problème siouplait!
-->