Salut, encore moi :)
C'est la première fois que j'essaye de mettre deux fonds et c'est pas fameux, je n'y arrive pas =(
Mon Objectif:
Mettre 2 fonds, avec 1 fonds(fond.png) répète et un fond(fond_special.png) qui ne se répète pas.
Mon problème :
Je mets une image dégrade (un dégrade déjà tout fait) en repeat-x, et cela marche très bien. Ensuite j'essaye de mettre un autre fond avec une div1, cela marche très bien aussi mais après lorsque je rajoute une autre div2 pour mettre ma bannière, la div1 prends les valeurs de div2 (je sais pas si on dit valeur, je voulais dire que div1 prend la marge de div2).
En code :
Ma page css
html{
background: url(images/fond.png) repeat-x top center;
}
body
{
background: url(images/fond_special.png) no-repeat top center;
height: 1289px;
text-align: center;
margin: 0 0 0 0;
padding:0 0 0 0;
color: #b4b4b4;
font-style: verdana, times news roman;
font-size: 16px;
}
#banniere{
background: url(images/banniere.png) no-repeat top center;
height: 145px;
width: 276px;
margin: 100px 0 0 0;
}Ma page htm :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr" />
<link rel="stylesheet" media="screen" type="text/css" title="OtakAsia design 1" href="test.css" />
<link rel="shortcut icon" type="image/png" href="images/favicon.png" />
</head>
<body>
<!--//////////////////////BANNIERE////////////////////// -->
<div id="banniere">sqdvsdvsdq</div>
</body>
</html>Si vous n'avez pas compris je peu vous faire une screen shot de se que je veux faire et ce que cela me fait. Merci d'avance ^^
4 réponses
Ton lien est mort je crois bien lol.
Je pense que ça vient du margin: 100px 0 0 0 essaye avec ceci:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css">
html,
body{
width: 100%;
height: 100%;;
margin: 0;
padding:0;
background: transparent url(images/fond.png) repeat-x top center;
text-align: center;
color: #b4b4b4;
font-style: verdana, times news roman;
font-size: 16px;
min-height: 1289px;
}
#fond{
background: transparent url(images/fond_special.png) no-repeat top center;
min-height: 1289px;
width: 100%;
height: 100%;
}
#banniere{
background: transparent url(images/banniere.png) no-repeat center 100px;
height: 145px;
width: 276px;
padding: 100px 0 0 0;
}
.center{
margin: 0px;
width: 960px;
}
</style>
<link rel="shortcut icon" type="image/png" href="images/favicon.png" />
</head>
<body>
<div id="fond">
<div id="banniere">
<div class="center">
</div>
</div>
<div id="contenu" class="center">
</div>
</div>
</body>
</html>En utilisant padding la div#fond reste collé en haut et la div#banniere et au bon niveau après il suffit de déplacer l'image selon y de 100px.
J'ai rajouter aussi une taille minimum a body.
Salut,
heu je suis pas sur que html prenne background comme règle enfin bon.
Ce que tu peux faire par contre :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css">
html,
body{
width: 100%;
height: 100%;;
margin: 0;
padding:0;
background: url(images/fond.png) repeat-x top center;
text-align: center;
color: #b4b4b4;
font-style: verdana, times news roman;
font-size: 16px;
}
#fond{
background: url(images/fond_special.png) no-repeat top center;
min-height: 1289px;
width: 100%;
height: 100%;
}
#banniere{
background: url(images/banniere.png) no-repeat top center;
height: 145px;
width: 276px;
margin: 100px 0 0 0;
}
.center{
margin: 0px;
width: 960px;
}
</style>
<link rel="shortcut icon" type="image/png" href="images/favicon.png" />
</head>
<body>
<div id="fond">
<div id="banniere">
<div class="center">
</div>
</div>
<div id="contenu" class="center">
</div>
</div>
</body>
</html>Je n’ai pas testé ce code mais vu que c'est basé sur le même principe que le site que je réalise, je pense que cela devrait fonctionner.
J'ai toujours le même problème, avec ton code je me retrouve au point départ ;p
http://www.hostingpics.net/viewer.php?id=317165Sanstitre2.png
je veux que fond special(l'image des 2 personnes) reste en haut.
Merci il me semble que le code est bon, je vais essaye en le séparant avec le css. Je te tient au courant.