Bonjour,
J'ai un petit souci avec la propriete background-attachment:scroll pour firefox.
En effet je positionne un background dans une div en oveflow et j'aimerais que l'image de fond defile. Pour une fois IE ne pose pas de probleme mais c firefox
Voila le code xhtml avec le hack IE7
Voici ma feueille de style
Je joins aussi l'image de fond de la div
J'ai un petit souci avec la propriete background-attachment:scroll pour firefox.
En effet je positionne un background dans une div en oveflow et j'aimerais que l'image de fond defile. Pour une fois IE ne pose pas de probleme mais c firefox
Voila le code xhtml avec le hack IE7
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<!-- compliance patch for microsoft browsers -->
<!--[if lt IE 7]>
<script language="JavaScript">
// only apply the PNG transparency hack to files ending in ".PNG"
IE7_PNG_SUFFIX = ".png";
</script>
<script src="../scripts/IE7/ie7-standard-p.js" type="text/javascript"></script>
<script src="../scripts/IE7/ie7-css3-selectors.js" type="text/javascript"></script>
<script src="../scripts/IE7/ie7-css2-selectors.js" type="text/javascript"></script>
<script src="../scripts/IE7/ie7-css-strict.js" type="text/javascript"></script>
<![endif]-->
<script src="../scripts/fonction.js" type="text/javascript"></script>
<link href="../styles/style_pop_up.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site">
<div style="width:300px;">
<h1 class="fiche">Fiche produit </h1>
<h2 class="produit">Nom produit</h2>
</div>
<div class="description">
<div class="gauche">
<img src="../medias/boutique/1.jpg" width="115" height="77" style="margin-bottom:5px;" alt="123" /><br />Ref : 10120501 </div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc condimentum odio et tortor. Sed magna turpis, luctus nec, tempor vel, dapibus nec, erat. Pellentesque tortor neque, tristique placerat, lacinia nec, varius nec, mauris. Quisque et arcu. Nullam tincidunt condimentum erat. In at orci. Vestibulum consequat eleifend pede. Mauris condimentum accumsan risus. Fusce a augue. Aenean pharetra nunc sit amet tortor. Sed lobortis dapibus est. Donec ornare tempus pede. Curabitur in orci sed ipsum rhoncus feugiat.
<div style="clear:both"></div>
</div>
<div class="prix">Prix TTC : 20,15 €</div>
<div class="caddie">Ajouter au caddie</div>
</div>
</body>
Voici ma feueille de style
body {
margin:0;
background-image: url(../medias/images/fond.jpg);
background-repeat: repeat;
background-position: left top;
background-attachment:fixed;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
color:RGB(76,76,68);
}
#site{
width:400px;
height:300px;
margin:5px;
padding:5px;
border:2px solid white;
background-image:url(../medias/images/logo.jpg);
background-position: 300px 15px;
background-repeat:no-repeat;
background-attachment:scroll;
background-color:RGB(230,230,218);
overflow:auto;
}
h1.fiche{
font-size:18px;
border-bottom:solid 1px #CC9900;
width:250px;
height:30px;
margin-top:5px;
}
h2.produit{
font-size:14px;
height:20px;
text-align:center;
color:#FF0000;
width:250px;
line-height:20px;
}
.description{
margin-top:30px;
margin-bottom:5px;
}
.gauche{
float:left;
margin:10px;
width:115px;
text-align:center;
}
.prix{
text-align:center;
margin-top:10px;
margin-bottom:10px;
height:20px;
line-height:20px;
}
.caddie{
margin:5px;
text-align:right;
}
Je joins aussi l'image de fond de la div