Bonjour,
Novice en codage, je tente de faire une mise en page et je rencontre quelques problemes...
Voici mon code HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="styles.css">
<title>Positionnement CSS</title>
</head>
<body>
<div id="bandeau">Ceci est le bandeau</div>
<div id="menu">
<div id="menu_haut">Menu haut</div>
<div id="menu_moyen">Menu moyen</div>
<div id="menu_bas">Menu bas</div>
</div>
<div id="contenu">Ceci est le contenu</div>
<div id="colonne_droite">Ceci est la colonne droite</div>
<div id="pied_page">Ceci est le pied de page</div>
</body>
</html>
Voici mon CSS:
div {
text-align:center;
}
div#bandeau {
position:absolute;left:210px;
width:600px;
height:120px;
background-color:#00CCFF;
}
div#menu {
float:left;
width:200px;
height:600px;
background-color:#FF6699;
}
div#menu_haut {
width:200px;
height:200px;
background-color:#66CC33;
}
div#menu_moyen {
width:200px;
height:200px;
background-color:#FFCCEE;
}
div#menu_bas {
width:200px;
height:200px;
background-color:#CC99CC;
}
div#contenu {
position:absolute;left:210px;
margin-top:150px;
width:600px;
height:450px;
background-color:#FFCC00;
}
div#colonne_droite {
position:absolute;left:820px;
margin-top:150px;
width:150px;
height:450px;
background-color:#66CC33;
}
div#pied_page {
clear:both;
width:800px;
height:100px;
background-color:#33FF99;
}
Le rendu souhaité est celui de Firefox.
Je souhaiterai qu'il fonctionne egalement tout navigateur, ce qui n'est pas le cas. Par exemple, sous IE7, tout est sans dessus dessous...
Merci pour votre aide,
Talmai