Bonjour à tous,
je cherche à créer un cadre arrondi à ma page, sachant qu'elle sera composée d'un header, d'un contenu, et d'un footer. Je découpe donc ce cadre, pour chacun de ces 3 parties. De plus, le milieu de page sera composé de 2 parties: le vrai contenu et une colonne (vi ce sera un blog!
). Je décide donc de mettre ces deux parties dans des divs et de mettre l'image de fond dans un div conteneur. Les divs enfant sont des floats (left et right). Mon problème est que l'image de fond n'apparait pas avec les codes suivants:
et
Par contre, si je décommente la propriété overflow du div "middle", tout va bien... Je ne comprends pas bien pourquoi vis à vis de la définition de la propriété overflow.
Merci de votre retour,
Pascal
Modifié par DeVoUrErFR (17 Sep 2007 - 19:00)
je cherche à créer un cadre arrondi à ma page, sachant qu'elle sera composée d'un header, d'un contenu, et d'un footer. Je découpe donc ce cadre, pour chacun de ces 3 parties. De plus, le milieu de page sera composé de 2 parties: le vrai contenu et une colonne (vi ce sera un blog!
). Je décide donc de mettre ces deux parties dans des divs et de mettre l'image de fond dans un div conteneur. Les divs enfant sont des floats (left et right). Mon problème est que l'image de fond n'apparait pas avec les codes suivants:<!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="fr" lang="fr">
<head>
<title>Ceci est la page de test</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<div id="page">
<div id="header">
<h1>Titre</h1>
<p>Description de la page de test</p>
<div id="menu">
<ul>
<li><a href="#" title="Introduction">Introduction</a></li>
<li><a href="#" title="Presentation">Presentation</a></li>
<li><a href="#" title="A propos">A Propos</a></li>
</ul>
</div><!-- /menu -->
</div><!-- /header -->
<div id="middle">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel diam. Praesent lacus pede, luctus non, commodo sit amet, euismod at, risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur nec massa at tortor suscipit lobortis. Nunc iaculis consectetuer sem. Praesent venenatis tortor. Mauris sit amet quam. In scelerisque aliquam nunc. Fusce quam neque, mollis non, laoreet dignissim, ornare pulvinar, velit. Pellentesque sed leo vel pede porta tincidunt. Vestibulum sagittis, enim sit amet ullamcorper facilisis, neque nisi feugiat justo, eu pretium lectus ligula non arcu. Phasellus risus sapien, convallis nec, eleifend quis, vestibulum sit amet, enim. Integer et metus. Pellentesque ut ante. Vestibulum hendrerit neque nec mi. Aliquam erat volutpat. Sed adipiscing, ante in placerat vestibulum, tellus eros aliquam mi, ut accumsan mi purus ac dui. Aenean egestas varius lorem.</p>
<p>Suspendisse potenti. Aenean sem. Vestibulum nonummy. Praesent ut dui. Sed a velit eu est laoreet pellentesque. Etiam sollicitudin. Phasellus et arcu. In hac habitasse platea dictumst. Nam pulvinar, velit non tincidunt luctus, erat erat sodales libero, ut bibendum leo justo vitae urna. Morbi rhoncus sapien et neque pulvinar laoreet. Integer eleifend erat id enim. Vivamus dapibus feugiat quam. Sed vulputate sem sed est. Proin nibh pede, porta quis, porttitor vel, vestibulum in, mi. Mauris et lacus sodales ipsum venenatis ullamcorper. Maecenas velit urna, posuere ut, lacinia ac, ullamcorper tempor, diam. Praesent justo massa, ultricies vel, lobortis eu, viverra sit amet, nibh.</p>
<p>Phasellus posuere. Vestibulum eu lacus. Morbi commodo velit. Aliquam erat volutpat. In cursus. Sed velit elit, malesuada quis, egestas quis, pulvinar laoreet, libero. Donec malesuada lobortis odio. Nullam tortor lorem, mattis quis, vestibulum non, dictum sit amet, odio. Aliquam consectetuer velit elementum felis. Phasellus ac dui eu tellus sagittis ullamcorper. Nullam nec nunc ac mi egestas ornare.</p>
</div>
<div id="sidebar">
<p>Cras erat felis, convallis pulvinar, suscipit vitae, luctus vitae, lacus. Sed porttitor ornare sapien. Nam ullamcorper neque sed est viverra aliquet. Vivamus non neque. Etiam libero elit, faucibus non, consequat sed, placerat quis, felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum interdum dictum lorem. Sed lobortis pede a ante. Sed vel libero. Maecenas tortor lacus, laoreet fermentum, pharetra ac, iaculis eu, odio. Sed pharetra.</p>
</div>
</div><!-- /middle -->
<div id="footer">
<p>Auteur: Moi</p>
<p>Copyright: Site</p>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>et
body {
font-family: Lucida Grande, Arial, Helvetica, Sans-serif;
font-size: 0.8em;
text-align: left;
background: #fff;
color: #fc3;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
a {
color: #fc3;
text-decoration: none;
}
a:hover {
color: #555;
text-decoration: none;
}
#page {
margin: 0 auto 0 auto;
padding: 0;
width: 750px;
}
#header {
background: #fff url(bordure_haut.png) no-repeat;
border-bottom: 2px solid #fc3;
position: relative;
margin: 0 0;
padding: 0 0;
height: 150px;
width: 750px;
}
#header h1 {
/*background: red;*/
margin: 0;
padding: 30px 30px 0 0;
text-align: right;
}
#header p {
/*background: blue;*/
padding: 0 30px 0 0;
text-align: right;
}
#menu {
position: absolute;
bottom: 0;
right: 0;
}
#menu ul {
padding: 0 30px 0 0;
list-style-type: none;
}
#menu ul li {
display: inline;
}
#menu a:hover {
color: red;
background: #ffcc33;
}
#middle {
/*overflow: hidden;*/
position: relative;
background: url(bordure_centre.png) repeat-y;
width: 750px;
}
#content {
/*background: Green;*/
float: left;
margin: 0 0 0 20px;
width: 550px;
}
#sidebar {
/*background: Yellow;*/
float: right;
margin: 0 20px 0 0;
width: 160px;
}
#footer {
background: #fff url(bordure_bas.png) no-repeat;
border-top: 2px solid #fc3;
height: 100px;
width: 750px;
clear: both;
}
#footer p {
text-align: right;
padding: 0 30px;
}
Par contre, si je décommente la propriété overflow du div "middle", tout va bien... Je ne comprends pas bien pourquoi vis à vis de la définition de la propriété overflow.
Merci de votre retour,
Pascal
Modifié par DeVoUrErFR (17 Sep 2007 - 19:00)
