Bonjour,
Voilà j'ai un souci sous Firefox, mes images de fond (format .png) ne s'affichent pas alors que sous IE tout fonctionne.
La page html et la feuille de style CSS sont validées par le service W3C.
Si vous pouviez m'aider, j'en serais reconnaissant car j'ai beau chercher je ne trouve pas la cause à mon problème.
Merci
Code html :
Feuille de style css :
Modifié par Chypster (26 May 2007 - 13:33)
Voilà j'ai un souci sous Firefox, mes images de fond (format .png) ne s'affichent pas alors que sous IE tout fonctionne.
La page html et la feuille de style CSS sont validées par le service W3C.
Si vous pouviez m'aider, j'en serais reconnaissant car j'ai beau chercher je ne trouve pas la cause à mon problème.
Merci
Code html :
<!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" xml:lang="fr" lang="fr">
<head>
<title>Vos plus belles photos</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<link rel="stylesheet" media="screen" type="text/css" title="style" href="CSS/Aspect du site.css" />
</head>
<body>
<div id="conteneur">
<h1 id="header"><a href="test net/etape1.html" title="Colored Design - Accueil"><span>Colored Design</span></a></h1>
<?php include ('haut_page.php');?>
<div id="contenu">
<h2>Bienvenue !</h2>
<p>Ce site est principalement dédié à la publication de vos plus belles photos que ce soit sur la nature, les animaux, des portraits, des événements particuliers ou autres. Pourquoi un tel site me direz-vous ? Tout simplement dans le but que vous puissiez publier vos réalisations vis à vis soit de votre entourage soit tout bonnement pour partager votre passion de la photographie sur Internet. Vous vous posez peut être la question de savoir pourquoi ne publier que les plus belles photos dont vous disposez ? La raison est simple, ce site se veut artistique et il ne serait pas cohérent d'accepter des photos que vous jugeriez quelconques. De plus les photos mises sur le site seront destinées à être commenté et noté par les autres membres.
</p>
<p>C'est sur ces derniers mots que je vous souhaite une bonne visite.</p>
<p><strong>L'auteur du site: Stef</strong>
</p>
</div>
<?php include ('pied_page.php');?>
</div>
</body>
</html>
Feuille de style css :
/* CSS Document */
body
{
margin: 10px 0 ;
padding: 0 ;
text-align: center ;
font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
background: #dea ;
}
div#conteneur
{
width: 770px ;
margin: 0 auto ;
text-align: left ;
border: 2px solid #ab4 ;
background: #fff ;
}
h1#header
{
height: 258px ;
background: url("../Images du site/pellicule.png") no-repeat right top ;
margin: 0 ;
}
h1#header a
{
width: 400px ;
height: 150px ;
display: block ;
background: url("../Images du site/titre_site.png") no-repeat ;
position: relative ;
left: 10px ;
top: 15px ;
text-indent: -5000px ;
}/* On donne les mêmes dimensions au lien, chose
possible grâce à la propriété display: block ; qui transforme le lien
en élément de type block, auquel on peut donner des propriétés de taille.
On met aussi l'image de fond qui a les mêmes dimensions que le cadre ainsi créé */
/* Le text-indent négatif est fait pour pouvoir ne
cacher le texte hors de la page, ce que nous voulons. Ainsi il reste
exploitable pour les syntèses vocales */
ul#menu
{
height: 35px ;
margin: 0 ;
padding: 0 ;
list-style: none ;
text-align: center ;
background: url("../Images du site/fond_menu.png") repeat-x 0 -25px ;
}
/* On donne une hauteur au menu, correspondant a
la taille de l'image utilisée en fond, on met ensuite l'image de fond
avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */
ul#menu li
{
display: inline ;
margin-right: 1px ;
}
/* On rend les li en flottant pour pouvoir les
afficher horizontalement, on cache les puces, et on centre le texte */
ul#menu li a
{
padding: 4px 20px ;
border: 1px solid #600 ;
font: 1em "Trebuchet MS",Arial,sans-serif ;
line-height: 1em ;
text-align: center ;
text-decoration: none ;
color:#000000 ;
}
/* C'est sur les liens que le gros du travail est
effectué, largeur, hauteur de ligne, taille de police, graisse de police,
espacement des lettres, couleur, bordure et decoration du texte.
Nous pouvons dimensionner les a grâce à la propriété display: block ; */
ul#menu li a:hover
{
text-decoration: underline ;
}
/* Et pour finir on décale l'image de fond au passage
de la souris pour laisser aparaître l'état survolé de l'image,
voir le tutoriel sur les roll over pour plus de détails */
div#contenu
{
padding: 0 25px 0 100px ;
background: url(bg_page.gif) no-repeat 15px 15px ;
}
div#contenu h2
{
padding-left: 25px ;
line-height: 25px ;
font-size: 1.4em ;
background: url(little_apple.gif) no-repeat left bottom ;
color: #9b2 ;
border-bottom: 1px solid #9b2 ;
}
div#contenu h3
{
margin-left: 15px ;
padding-left: 5px ;
border-bottom: 1px solid #9b2 ;
border-left: 3px solid #9b2 ;
color: #9b2 ;
}
div#contenu p
{
text-align: justify ;
text-indent: 2em ;
line-height: 1.7em ;
}
div#contenu a
{
color: #000000 ;
}
div#contenu a:hover
{
color: #999999 ;
}
p#footer
{
margin: 0 ;
padding-right: 10px ;
line-height: 30px ;
text-align: right ;
color: #8a0 ;
}
pre
{
overflow: auto ;
background: #dea ;
border: 2px solid #9b2 ;
padding: 5px 0 0 5px ;
font-size: 1.2em ;
}
pre span
{
color: #560 ;
}
pre span.comment
{
color: #b30000 ;
}
#bulle
{
float:left ;
margin:5px ;
width:250px ;
border: 1px solid #999999 ;
padding: 10px ;
}
#navigation {
margin: 0 ;
padding: 0 ;
list-style: none ;
}
#navigation li {
float: left ;
width: 150px ;
border: 1px solid #600 ;
margin-right: 1px ;
color: #fff ;
background: #c00 ;
}
#navigation li a {
display: block ;
background: #c00 ;
color: #fff ;
font: 1em "Trebuchet MS",Arial,sans-serif ;
line-height: 1em ;
padding: 4px 0 ;
text-align: center ;
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
background: #900 ;
}
label,input {
display: block ;
width: 150px;
float:left ;
margin-bottom: 10px;
}
label {
text-align: left;
width: 150px;
padding-right: 20px;
}
br {
clear: left;
}
#table
{
float:right ;
margin-left:5px ;
}
Modifié par Chypster (26 May 2007 - 13:33)
) 