Bonjour à tous,
Je débute en CSS et je rencontre quelques problèmes au niveau de l'alignement de mes blocs J'ai un menu à gauche en "float:left", et un bloc à sa droite, le corps, contenant tout mon texte.
Sous firefox, y'a pas de pro, mais sous IE6, mon corps se positionne en dessous du menu (diagonalement car je lui ai appliqué une marge).
Voici mon code html :
Et voici mon CSS :
J'imagine que ce bug doit être assez courant (?)
Je vous remercie d'avance pour votre aide !
Je débute en CSS et je rencontre quelques problèmes au niveau de l'alignement de mes blocs J'ai un menu à gauche en "float:left", et un bloc à sa droite, le corps, contenant tout mon texte.
Sous firefox, y'a pas de pro, mais sous IE6, mon corps se positionne en dessous du menu (diagonalement car je lui ai appliqué une marge).
Voici mon code html :
<!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" >
<head>
<title>Bienvenue sur mon site !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles/1ersite.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="en_tete"><img src="images/structure/images_bandeaux/FR/bandeau_bienvenue_FR.jpg" alt="" width="765" height="150" /></div>
<div id="menu"> <!-- Cadre englobant tous les sous-menus (en bleu marine sur le schéma) -->
<div class="element_menu"> <!-- Cadre correspondant à un sous-menu -->
<h3>Bienvenue aux Valades</h3>
<ul>
<li>Qui sommes-nous ?</li> <!-- Liste des liens du sous-menu -->
<li>Chalets bois</li>
<li>Le site</li>
<li>Etang de pêche</li>
</ul>
<h3>Nos formules</h3>
<ul>
<li>Escapade romantique</li> <!-- Liste des liens du sous-menu -->
<li>Aventure</li>
<li>Préhistoire</li>
<li>Tarifs</li>
</ul>
<h3>Contact</h3>
</div>
<div class="element_menu">
<h3>Nos liens</h3>
<ul>
<li>Camping</li> <!-- Liste des liens du sous-menu -->
<li>Blog</li>
<li>Vidéos</li>
</ul>
</div>
</div>
<div id="corps">
<h1>Locations de vacances en Dordogne</h1>
<h2>Hébergement en chalet bois sur un site naturel</h2>
<p>Venez séjourner dans le cadre intime et chalheureux d'un <a href="FR/chalets-bois.html">chalet en bois</a> et</p>
<p>Vous ressourcer dans un écrin de verdure paradisiaque</p>
<P>Surprise, <strong>idée cadeau</strong> à offrir ou à s'offrir</p>
<img src="images/contenu/animations/anim_1.jpg" alt="" /> <img src="images/contenu/animations/anim_2.jpg" alt="" /></P>
<h2>Découvrez nos idées week-end et nos séjours à thèmes</h2>
<p>Escapade romantique ? Séjour sportif ? Semaine farniente ? De l'<strong>hébergement simple</strong> au <strong>séjour organisé</strong>, trouvez la formule qui vous correspond !</p>
<p><strong>Etang de pêche</strong>, randonnée, calme et repos</p>
<h2>Découvrez nos idées week-end et nos séjours à thèmes</h2>
<p>Escapade romantique ? Séjour sportif ? Semaine farniente ? De l'<strong>hébergement simple</strong> au <strong>séjour organisé</strong>, trouvez la formule qui vous correspond !</p>
<p><strong>Etang de pêche</strong>, randonnée, calme et repos</p>
</div>
<div id="pied_de_page">
<p>Camping LES VALADES<a href="mailto:info@lesvalades.com">info@lesvalades.com</a>- +33 (0) 5 53 29 14 27<br/>
COPYRIGHT © 2008 Les Valades Dordogne</p>
</div>
</body>
</html> Et voici mon CSS :
body
{
width: 1100px;
margin: 20px auto;
background-image:url('../images/structure/cadre%20general/fond_rayures.jpg');
color:#330000;
font-family:Trebuchet MS, georgia, arial; margin-top:20px; /
margin-bottom:20px
}
#en_tete
{
width: 1100px;
height: 180px;
background-image: url('../images/structure/cadre%20general/bandeau_nature.png');
background-repeat: no-repeat;
margin-bottom: 10px
}
#en_tete img
{
position: relative;
left: 323px;
top: 19px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
#menu
{
float: left;
width: 187px;
border: 2px solid #A3A864;
}
.element_menu
{
background-color: #3E4307;
margin-bottom: 20px;
}
.element_menu h3
{
color: #FFDB32;
text-align: center;
}
.element_menu ul
{
padding: 0px;
padding-left: 20px;
margin: 0px;
margin-bottom: 5px;
color: #FFFFFF;
}
.element_menu a
{
color: #FFFFFF;
}
.element_menu a:hover
{
color: #FFFF33;
}
#corps
{
margin-left: 190px;
margin-bottom: 20px;
background-image: url('../images/structure/cadre%20general/fond_beige_milieu.jpg');
background-repeat: repeat-y;
border: 2px solid #A3A864;
width: 913px;
background-position: center 50%;
}
#corps h2
{
position: relative;
left: 30px;
}
#pied_de_page
{
width: 913px;
text-align: center;
margin-bottom: 20px;
font-size: small;
margin-left: 190px;
} J'imagine que ce bug doit être assez courant (?)
Je vous remercie d'avance pour votre aide !