Re,
Je verrais un truc comme ça :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST</title>
<style>
#conteneur{
width: 950px;
margin: auto;
padding: 0;
margin-top: 0;
background: url(fond_test.jpg);/*-- Ton fond avec bordure verte à gauche et bordure grise à droite de 950px sur 1px --*/
repeat: repeat-y;
}
#header{
width: 907px;
background: #e6e4e5;
height: 70px;
margin-left: 36px;
margin-top: 0;
}
#gauche{
float: left;
width: 200px;
reapeat: repeat-y;
overflow: hidden;
}
#contenu{
margin-left: 15px;
width: 715px;
margin-top: 50px;
margin-bottom: 50px;
overflow: hidden;
}
#menu2{
margin-left: 20px;
margin-top: 30px;
width: 150px;
background-color: #a3daff;
}
.image{
float: left;
margin-left: 100px;
}
hr {
display:block;
width: 635px;
margin: 0;
_margin: -7px 0;
margin-left: 50px;
padding: 0;
clear: both;
background-color: #fff;
height:1px;
border:1px dashed #000;
}
.texte{
padding-right: 25px;
padding-left: 50px;
margin-left: 200px;
margin-top: 10px;
margin-bottom: 10px;
border-left: 4px solid #188cb9;
}
h1{
margin-bottom: 50px;
font-size: 1.2em;
}
</style>
</head>
<body>
<div id="conteneur">
<div id="header">
<p> menu</p>
</div>
<div id="gauche">
<div id="menu2">
<p>menu2</p>
<p>menu2</p>
<p>menu2</p>
<p>menu2</p>
<p>menu2</p>
<p>menu2</p>
</div>
</div>
<div id="contenu">
<h1> > Actualité</h1>
<img src="image_test.jpg" class="image" alt="" />
<div class="texte">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut quis metus. Aenean ante quam, tristique ut, lacinia nec, lacinia quis, ante. Fusce eu orci. Aenean erat elit, varius nonummy, varius quis, tincidunt eget, nisl. Integer viverra varius nibh. Vivamus posuere. Mauris ornare mattis enim. Fusce porttitor.
</div>
<hr />
<img src="image_test.jpg" class="image" alt="" />
<div class="texte">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas consequat urna et diam. Morbi urna metus, ullamcorper in, ultricies ut, mollis eget, ante. Curabitur cursus mi et odio. Nullam luctus tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur mollis sem eu risus placerat sollicitudin. Mauris at orci at nulla rutrum luctus. In hendrerit imperdiet purus. Nunc dictum dignissim ante. Integer ut est. Nam rhoncus.
</div>
<hr />
<img src="image_test.jpg" class="image" alt="" />
<div class="texte">Nam nonummy arcu a orci. Vivamus ornare purus sed est. Mauris massa orci, interdum vitae, faucibus a, feugiat sit amet, tellus. Praesent vitae dui a felis varius nonummy. Proin at quam. Nullam et quam non metus congue molestie. Nunc neque sapien, rhoncus eu, feugiat a, adipiscing vel, leo. Aliquam blandit scelerisque nibh. Nunc augue. Ut quam dolor, mattis vitae, venenatis ac, adipiscing ut, leo. Nam justo augue, luctus vitae, pulvinar eget, feugiat id, elit. Phasellus euismod.
</div>
<hr />
</div>
</div>
</body>
</html>
Ce n'est pas paufiné au top, juste pour l'idée...
Bon courage
je crois compatible FF et IE ... à vérifier
Modifié par ghost (30 Sep 2006 - 02:10)
