Bonjour à tous,
j'essaie de réaliser un template contenant 4 backgrounds en employant le minimum de divs mais je sèche un peu...
voici le code :
Le problème, c'est que cette mise en forme ne me convient pas vraiment. J'aimerai pouvoir placer sur la zone de contenu une image en top, passant sur le background de body, ainsi qu'un background répété
en arrière plan du contenu et un background en bas de page cloturant le contenu. Pourquoi autant de background ? Car le texte débutera sur l'image du dessus, se prolongera sur le background d'arrière plan et se cloturera sur le background de bas de page.
De plus, le contenu sera divisé en deux parties. Le côté gauche contient des titres, des textes et des images. Le côté droit contient des animation flash, des liens et des news en bref.
Dans le cas présent, je n'arrive pas à m'en sortir sans utiliser trois divs imbriqués et j'aime pas trop ça.
D'avance, merci pour votre aide !
j'essaie de réaliser un template contenant 4 backgrounds en employant le minimum de divs mais je sèche un peu...
voici le code :
<!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="en" lang="en">
<head>
<title></title>
<style type="text/css">
HTML {
margin: 0px;
padding: 0px;
}
BODY {
margin: 0px;
padding: 0px;
background-image: url(i/bback.jpg);
background-repeat: repeat-x;
background-position: 0px 0px;
}
BODY #container {
position: relative;
margin: 0px auto;
padding: 0px;
width: 980px;
background-image: url(i/cback.jpg);
background-repeat: repeat-y;
background-position: 0px 0px;
}
#container #content {
position: relative;
margin: 0px;
padding: 105px 20px 0px 280px;
width: 680px;
height: 299px;
min-height: 299px;
background-image: url(i/top.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
text-align: justify;
}
#content #overflow {
position: relative;
margin: 0px;
padding: 0px;
width: 460px;
overflow: hidden;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
border: 1px solid red;
}
#container #right {
float: right;
margin: 0px;
padding: 0px;
width: 200px;
list-style: none;
}
#right #ranim {
margin: 0px;
padding: 0px;
width: 200px;
height: 194px;
background-image: url(i/ranim.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}
#right LI {
margin: 0px;
padding: 0px;
list-style: none;
display: block;
}
#right #tright {
background-image: url(i/fback.jpg);
background-repeat: repeat-y;
background-position: 0px 0px;
}
#right #fright {
background-image: url(i/fback.jpg);
background-repeat: repeat-y;
background-position: 0px 0px;
}
BODY #footer {
position: relative;
margin: 0px auto;
padding: 0px;
width: 980px;
height: 130px;
background-image: url(i/cbottom.jpg);
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<ul id="right">
<li id="ranim">
</li>
<li id="tright"><img src="i/ftop.jpg" height="34" width="200" alt="" /></li>
<li id="fright"></li>
<li><img src="i/fbottom.jpg" height="30" width="200" alt="" /></li>
</ul>
</div>
</div>
<div id="footer">
Foot
</div>
</body>
</html>
Le problème, c'est que cette mise en forme ne me convient pas vraiment. J'aimerai pouvoir placer sur la zone de contenu une image en top, passant sur le background de body, ainsi qu'un background répété
en arrière plan du contenu et un background en bas de page cloturant le contenu. Pourquoi autant de background ? Car le texte débutera sur l'image du dessus, se prolongera sur le background d'arrière plan et se cloturera sur le background de bas de page.
De plus, le contenu sera divisé en deux parties. Le côté gauche contient des titres, des textes et des images. Le côté droit contient des animation flash, des liens et des news en bref.
Dans le cas présent, je n'arrive pas à m'en sortir sans utiliser trois divs imbriqués et j'aime pas trop ça.
D'avance, merci pour votre aide !
