Voila, je me suis inscrit sur ce forum avec l'espoir de résoudre ce pb qui persiste depuis pas mal de temps et commence à m'erriter serieusement...(je débute avec les feuilles de styles)
Donc en fait, mon menu flottant de gauche ne s'aligne pas correctement avec ma banniere sous IE, par contre sur Firefox et opera aucun souci. De meme que si je retire le width du corps opera et firefox prenne bien en compte la limite du corps et celui ci saligne bien avec la banniere tandis que sur IE tout m.... Aidez moi !!!
(http://tahitibeach.ifrance.com )
Le code CSS:
Et mon code html du menu :
Modifié par momo59 (30 May 2006 - 23:11)
Donc en fait, mon menu flottant de gauche ne s'aligne pas correctement avec ma banniere sous IE, par contre sur Firefox et opera aucun souci. De meme que si je retire le width du corps opera et firefox prenne bien en compte la limite du corps et celui ci saligne bien avec la banniere tandis que sur IE tout m.... Aidez moi !!!
(http://tahitibeach.ifrance.com )
Le code CSS:
body
{
width: 960px;
margin:auto; /* Pour centrer notre page */
margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
margin-bottom: 20px; /* Idem pour le bas du navigateur */
text-align: center;
background-image: url(fond2.jpg);
background-attachment: fixed;
background-position:center;
}
#menu
{
float:left;
width: 120px; /* Très important : donner une taille au menu */
margin-top:10px;
text-align: left;
}
.element_menu
{
background-color: #c4e738;
border: 3px solid black;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
.element_menu h3 /* Tous les titres de menus */
{
color: #FF0000;
font-family: "Verdana";
text-align: center;
}
.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-image:url(blackpearl.gif);
padding: 0; /* Tous les côtés ont une marge intérieure de 0 pixels */
padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
margin: 0; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}
.element_menu a /* Tous les liens se trouvant dans un menu */
{
color: #000000;
font-family: "Verdana";
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
color: #0099FF;
font-family: "Verdana";
background-color:#fffe7a;
}
#corps
{
width:805px;
margin-top: 20px;
margin-left: 140px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
margin-bottom: 20px; /* Ca c'est pour éviter que le corps colle trop au pied de page en-dessous */
padding: 5px; /* Pour éviter que le texte à l'intérieur du corps ne colle trop à la bordure */
color: #663399;
border: 2px dashed black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
font-family: "Verdana";
font-size:14px;
background-color:#c4e738;
text-align: left;
}
#corps h1
{
text-align: center;
font-family: "Comic Sans MS";
color: #FF3333;
background-color:#fffe7a;
}
#corps h2
{
height: 30px;
font-family: "Verdana";
background-repeat: no-repeat;
padding-left: 30px;
color: #000000;
text-align: left;
}
#corps h3
{
height: 20px;
font-family: "Verdana";
color: #000000;
text-decoration: underline;
text-indent: 5px;
}
.table
{
font-family: "Verdana";
color: #663399;
margin-bottom: 20px;
border-color: #000000;
}
.texte_table
{
color: #663399;
font-family: Verdana;
font-size: 14px;
text-align: center;
}
.a:link
{
color: #FF0000;
font-family: "Verdana";
}
.a:visited
{
color: #0099FF;
font-family: "Verdana";
}
legend
{
font-family: "Verdana";
font-size: 24px;
color: #663399;
}
Et mon code html du menu :
<html>
<body>
<div id="menu">
<div class="element_menu">
<h3>Contact</h3>
<ul>
<li><a href="livreor.php">Livre d'or </a></li>
<li><a href="form.php">Formulaire</a></li>
<li><a href="mailto:francois.morez@cegetel.net">e-mail</a></li>
</ul>
</div>
<div class="element_menu">
<h3>Tahiti</h3>
<ul>
<li><a href="archipel.php">Archipels</a></li>
<li><a href="avisiter.php">Tourisme</a></li>
<li><a href="lexique.php">Lexique</a></li>
</ul>
</div>
</div>
</body>
</html>
Modifié par momo59 (30 May 2006 - 23:11)
