Bonjour à tous,
je viens de nouveau à vous car j'ai un soucis d'image de background. Il s'agit toujours de ce site
J'utilise un repeat-y sur la div contenu pour poursuivre les lignes verticales lorsque le texte de la page est long. Sous IE ça fonctionne. Mais pas sous firefox.
La ligne de fond n'apparait pas, par contre la backgrnoud color du footer semble "déborder"...
La page HTML :
Et la feuille CSS :
Si vous aviez une piste à me donner sur la nature du problème, je serais ravi. Merci en totu cas de votre lecture.
Modifié par Fenris (05 Dec 2006 - 14:18)
je viens de nouveau à vous car j'ai un soucis d'image de background. Il s'agit toujours de ce site
J'utilise un repeat-y sur la div contenu pour poursuivre les lignes verticales lorsque le texte de la page est long. Sous IE ça fonctionne. Mais pas sous firefox.
La ligne de fond n'apparait pas, par contre la backgrnoud color du footer semble "déborder"...
La page HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Webavocat.fr</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<meta http-equiv="Content-Language" content="fr" >
<link href="style2.css" rel="stylesheet" type="text/css" >
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('ssmenu'+i)) {document.getElementById('ssmenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
</head>
<body>
<div id="conteneur">
<div id="header">
<h1>Webavocat.fr</h1>
<dl>
<dt><a href="#" ><img src="images/tuile1.jpg" alt="accueil" /></a></dt>
</dl>
<dl>
<dt><a href="#" ><img src="images/tuile2.jpg" alt="Vos interlocuteurs" /></a></dt>
</dl>
<dl>
<dt><a href="#" ><img src="images/tuile3.jpg" alt="Nos services" /></a></dt>
</dl>
<dl>
<dt><a href="#" ><img src="images/tuile4.jpg" alt="Nos honoraires" /></a></dt>
</dl>
<dl>
<dt><a href="#" ><img src="images/tuile5.jpg" alt="Contact" /></a></dt>
</dl>
</div><!-- fin du header -->
<div id="contenu">
<div id="gauche">
<img src="images/gauche.jpg" alt="Cabinet" />
<img src="images/adresse.jpg" alt="Adresse" />
</div>
<div id="centre">
<h2>Lorem ipsum</h2>
<h3>dolor sit amet, consectetuer adipiscing</h3>
<p>
...blabla de test .....
</p>
</div>
</div><!-- fin du div contenu -->
<div id="footer">Informations légales - Crédits</div>
</div>
</body>
</html>
Et la feuille CSS :
body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #75737A;
}
h2{
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #F3B06C;
font-weight: bold;
}
h3{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CB8164;
}
img{
border: 0;
display:block; /* Evite l'apparition de "marges" au bas des images du div gauche*/
}
#header {
height: 78px;
position:absolute;
top:0;
}
#header h1, dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#header li {
display: inline; /* Pour résoudre un pb de layout IE */
}
#header h1{
float:left;
width: 300px;
height:100%;
background: url(images/logo.png) no-repeat left top;
text-indent: -5000px ;
}
#header dl{
float :left;
width: 120px;
height:100%;
}
#header dt {
text-align:center;
width: 120px;
}
#header dd {
text-align:center;
}
#header dd li a, #header dt a{
color: #FFF;
text-decoration: none;
font-weight: bold;
font-family:"Times New Roman", Times, serif;
font-size: 14px;
display: block;
border-style: solid;
border-color: #F3B06C;
border-width: 1px 0px 0px 0px;
}
#ssmenu1 {
border: 1px solid #F3B06C;
background-color:#F9D7B4;
}
#ssmenu2 {
border: 1px solid #e5a069;
background-color:#F2CEB4;
}#ssmenu3 {
border: 1px solid #D68E66;
background-color:#EBC6B3;
}
#conteneur {
width: 900px;
padding-top:78px; /* laisser de la place au menu horizontal*/
margin: 0 auto; /* permet de centrer sur la page*/
}
#contenu {
height: 1%; /* Holy hack : à mort le haslayout sous IE...*/
background: url(images/line.jpg) repeat-y
}
#contenu div{
float:left; /* divs gauche et droite placés l'un à coté de l'autre.*/
}
#gauche {
width: 242px;
height:366px;
background: url(images/vertexte1.png) no-repeat right top;
padding :0 80px 0 0;
}
#centre{
width:578px;
/*height:320px;*/
text-align:justify;
background: url(images/horiligne.jpg) no-repeat top;
background-color:#FFFFFF;
padding-top : 46px;
overflow:auto;
}
#footer {
text-align:center;
background-color: #E1D7D5;
}
Si vous aviez une piste à me donner sur la nature du problème, je serais ravi. Merci en totu cas de votre lecture.
Modifié par Fenris (05 Dec 2006 - 14:18)
