Bonjour,
Juste un problème sur ton bloc #conteneur, un petit overflow: hidden; pour qu'il suive son contenu sous FF et quelques bricoles.(le <h1> biensur)
Je te mets les bases du code (j'avoue, j'ai fait fort au niveau des couleurs !!)
Bonne continuation.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
body {background: yellow; margin-top: 5px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;
}
#global {
position:relative;
background-color: #f9f9f9;
margin-left:auto;
margin-right:auto;
width:780px;
text-align:left;
}
div#conteneur {
margin:0 auto 0 auto;
width:780px;
overflow:hidden; /* ------------ Le problème était principalement là -------------*/
background-color: #35ffee;
background-repeat: no-repeat;
background-position: top left;
margin:0;
z-index:1;
}
.header {
width: 780px;
height: 148px;
background-color: red;
}
.menu {
background-color: blue;
background-repeat: no-repeat;
background-position: top left;
height: 106px;
margin:0px;
padding-left:135px;
padding-top:2px;
text-align:left;
border: 0;
}
.menufloat {
float:left;
position:absolute;
height: 38px;
margin:0px;
text-align:left;
}
.titremenugauche {
background-color: green;
background-repeat:no-repeat;
padding-left:18px;
font-family:Geneva, Arial, Helvetica, sans-serif;
color:#EEF5FD;
font-size:14px;
font-weight:bold;
letter-spacing:3px;
}
.menugauche {
width: 80%;
background-color: orange;
background-repeat:no-repeat;
text-align:left;
margin: auto;
}
#partiegauche {
width:235px;
height:600px;
float:left;
background-color: #6dff6f;
}
#partiedroite {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
width:510px;
margin-left: 235px;
}
#partiedroite p{
margin-left: 25px;
margin-right: 25px;
}
.footer {
clear: both;
height:15px;
background-color: #f900fc;
background-repeat: repeat-x;
background-position: top left;
text-align: center;
padding-top:11px;
padding-bottom:11px;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:11px;
color:#ffffff;
}
h1 {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
letter-spacing:2px;
color:#EC4811;
text-align:left;
padding-left:30px;
background-color: white;
background-repeat: no-repeat;
width:400px;
padding: 0;
}
</style>
</head>
<body>
<div id="global">
<div class="header">
</div>
<div class="menu">
</div> <!-- fin du div du MENU //-->
<div id="conteneur">
<div id="partiegauche">
<div class="menugauche">
<font class="titremenugauche">Divers - Liens</font> <br />
<br />
<br />
<img src="images/design/design3/bullet3.gif" width="10" height="5" align="absmiddle" /> <a href="contact.php" class="liengauche">Nous contacter</a><br />
<br />
<img src="images/design/design3/bullet3.gif" width="10" height="5" align="absmiddle" /> <a href="gallerie.php" class="liengauche">Gallerie de photos</a><br />
<br />
<img src="images/design/design3/bullet3.gif" width="10" height="5" align="absmiddle" /> <a href="liens.php" class="liengauche">Liens</a> <br />
<br />
<img src="images/design/design3/bullet3.gif" width="10" height="5" align="absmiddle" /> <a href="invite.php" class="liengauche">Parlez de ce site à un ami</a><br />
<br />
<br />
<br />
<br />
<br />
<br />
<h2 class="titremenugauche">Météo</h2> <br />
</div> <!-- fin du div du MENU Latéral//-->
</div>
<div id="partiedroite">
<h1>Voila un titre... </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam egestas augue cursus est. Mauris pretium placerat libero. Suspendisse in dolor. Praesent blandit enim non arcu. Suspendisse viverra ullamcorper risus. Quisque tristique pulvinar diam. Phasellus dictum dui eget neque. Duis faucibus pede. Duis quis lacus. Aliquam erat volutpat. Nunc et nisi id lorem sollicitudin rutrum. In eleifend, felis a scelerisque rutrum, libero nibh gravida velit, vel tristique neque massa sit amet pede. Nam tempus libero eget libero molestie porttitor. Cras lectus.
<br />
Morbi feugiat eros a felis. Donec in nisl at dui mattis tempor. Morbi nec libero eget sapien vehicula varius. Praesent cursus bibendum orci. Donec augue. Sed eu urna id urna suscipit accumsan. Ut varius rhoncus urna. Nullam porttitor eleifend felis. Integer imperdiet, lectus nec vulputate porttitor, urna mi porta dolor, ut imperdiet dolor ante a sem. Suspendisse vel mi eget pede sodales pellentesque. Morbi vitae metus. Curabitur ipsum risus, gravida eu, lacinia eget, sodales quis, enim. Duis vitae eros.
<br />
Pellentesque scelerisque neque commodo tellus. Ut et sapien ac ipsum euismod viverra. Nulla facilisi. In eget ipsum id dolor semper interdum. Proin adipiscing. Maecenas ultrices augue. Integer at nulla sed mi ornare auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vestibulum. Aenean tellus. Suspendisse eleifend iaculis lacus. Fusce porta nunc id augue. Nulla facilisis vehicula elit. Ut tincidunt interdum enim. Aliquam eget dolor. Praesent tincidunt pede vel nulla. Integer dictum urna. Etiam rutrum blandit neque.
</p>
</div><!-- fermeture du div partiedroite //-->
<div class="footer">Site cré par <a href="http;//www.shantee.net">Shantee Studio ! </a></div>
</div> <!-- fin du div du CONTENEUR //-->
</div> <!-- fin du div GLOBAL //-->
</body>
