Bonjour à tous!
J'ai depuis un moment des problèmes avec mes background sur FF. Mon souci est que lorsque j'indique un height:auto, FF n'affiche pas le background: je suis obligé de définir une taille en px ou en %. Problème: Cela n'est pas envisageable lorsque le contenu est aléatoire (php).
Pour régler le problème, j'avais utilisé des position:absolute, mais cela ne me satisfait pas.
Voici mon code HTML:
Voici le code CSS:
Je ne sais pas si cela est lié aux float:left ou aux position, car j'ai essayé plusieurs combinaisons et rien ne fonctionne sous FF. Le fait de passer de position:absolute à relative pour les div contenu et menu-actualites a tout de même permis de récupérer le background sous ie7.
Merci par avance si vous pouvez me donner un conseil ou une explication.
@+!
Modifié par Neomcdn (06 Feb 2008 - 18:20)
J'ai depuis un moment des problèmes avec mes background sur FF. Mon souci est que lorsque j'indique un height:auto, FF n'affiche pas le background: je suis obligé de définir une taille en px ou en %. Problème: Cela n'est pas envisageable lorsque le contenu est aléatoire (php).
Pour régler le problème, j'avais utilisé des position:absolute, mais cela ne me satisfait pas.
Voici mon code HTML:
<body>
<div id="global">
<div id="menu-actualites">
<div id="titre-site">Titre</div>
<div id="menus">
<div id="actualite-france">Actualités en France</div>
<div id="actualite-internationale">Actualités Internationales</div>
<div id="actualite-culturelle">Actu</div>
<div id="annuaire">Annuaire</div>
</div>
</div>
<div id="contenu">
<div id="gauche">
<div id="titre-page"><h1>Actualités Internationales</h1></div>
<p></p>
</div>
<div id="droite">
<div id="nouvelles-actualites">Dernières Actualités en France
<p>Bla bla</p>
</div>
</div>
</div>
<div id="piedpage">Liens | Contacts | Mentions légales</div>
</div>
</body>
</html>Voici le code CSS:
html {background-image:url(img/Fond/fond2.jpg);}
body,html {
margin:0;
height:100%;
font-family: Arial, Helvetica, sans-serif;}
#global{
height:auto;
width:1000px;
padding:0;
background: url(img/Fond/global.png) repeat-y;
margin: 0 auto;
position:relative;}
#menu-actualites{
margin: 0 0 0 21px;
width: 959px;
background: url(img/Fond/bandeau2.png) no-repeat;
height: 113px;
float:left;
}
#contenu{
width: 959px;
color: #FFFFFF;
position:relative;
float:left;
height:auto;}
#titre-site{margin: 10px 0 0 25px;
width: 934px;
float:left;
font-size:20px;
font-weight:bold;}
#titre-site a{text-decoration:none;
color: #8B8B8B;}
#menus{margin:25px 0 0 25px;
width: 934px;
float:left;}
#menus a{text-decoration:none;
color: #9DE029;
font-size: 20px;
}
#menus :hover{text-decoration:underline;}
#actualite-france{float:left;}
#actualite-internationale{margin-left:75px;
float:left;}
#actualite-culturelle{margin-left:75px;
float:left;}
#annuaire{margin-left:75px;
float:left;}
#gauche{float:left;
width:600px;
margin-left: 25px;
height:auto;}
#droite{float:left;
width: 309px;
height:auto;
}
#titre-page h1{font:32px bold Arial, Helvetica, sans-serif;
margin:0 0 30px 0;
text-indent:25px;
color:#9DE029;
text-decoration:underline;}
#nouvelles-actualites{
width:297px;
margin:0 0 0 12px;
height: auto;}
#piedpage a{color:white;
text-decoration:none;}
#piedpage{position:relative;
background:#FF0000;
margin:0 0 0 21px;
float:left;
text-align:center;
height:25px;
line-height:25px;
width: 959px;
color: #FFFFFF;}Je ne sais pas si cela est lié aux float:left ou aux position, car j'ai essayé plusieurs combinaisons et rien ne fonctionne sous FF. Le fait de passer de position:absolute à relative pour les div contenu et menu-actualites a tout de même permis de récupérer le background sous ie7.
Merci par avance si vous pouvez me donner un conseil ou une explication.
@+!
Modifié par Neomcdn (06 Feb 2008 - 18:20)
