Bonsoir
je voudrais renover mon site. je travaille sur le design (avec l'aide du livre notemment). J'ai un problème pour mon menu horizontal qui se trouve en essous de la bannière. Il ne prend pas les bonnes caractéristiques. Pourriez vous me dire ce qui ne va pas.
Le code Html :
j'ai une image du chevauchement : http://img451.imageshack.us/my.php?image=essaiik8.png
Merci Hélly
Modifié par helly (10 Jan 2007 - 22:06)
je voudrais renover mon site. je travaille sur le design (avec l'aide du livre notemment). J'ai un problème pour mon menu horizontal qui se trouve en essous de la bannière. Il ne prend pas les bonnes caractéristiques. Pourriez vous me dire ce qui ne va pas.
Le 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" lang="fr">
<head>
<title>Index Costa Rica</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="essai3.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="en_tete"><!-- Ici on mettra la bannière -->
</div>
<div id="menuhz"> <!-- Ici on mettra le menu horizontal -->
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="menuhz/nous.htm">Nous</a></li>
<li><a href="menuhz/destinations.htm">Destinations</a></li>
<li><a href="menuhz/liens.htm">Liens</a></li>
<li><a href="menuhz/contact.htm">Contact</a></li>
</ul>
</div>
<div id="menuvertical">
<div class="lienpays">
<ul>
<li><a href="lerecit.htm">Le récit</a></li> <!-- Liste des liens du sous-menu -->
<li><a href="pagecarte.htm">La carte</a></li>
<li><a href="pagebudget.htm">Le budget</a></li>
<li><a href="pagesacados.htm">Le sac à dos</a></li>
<li><a href="pagephoto.htm">Les photos</a></li>
<li><a href="pagelien.htm">Liens utiles</a></li>
<li><a href="pagequizz.htm">Le quizz</a></li>
</ul>
</div>
<div class="formulaire">
<p>le formulaire</p>
<p>le formulaire</p>
</div>
</div>
<div id="corps">
<div id="presentation">
<h2>Bienvenue sur notre site</h2>
<p>Au retour, pour faire profiter les internautes de notre expérience et pour rester un peu dans le voyage, nous avons décidé de faire notre carnet de voyage, en espérant qu'il y aura, plus tard, d'autres destinations. Ce site comporte donc pour l'instant deux rubriques : notre carnet de voyage du Costa Rica</p>
</div>
</div>
<div id="corps">
<p>Les news</p>
</div>
<div id="pied_de_page"> <!-- Enfin, on mettra en bas de la page le nom de l'auteur, un copyright... -->
<p><strong>Conception du site :</strong> Olivier. <strong>Textes et photos :</strong> Fabienne et Olivier. </p>
<p>Début de création du site : le 1/03/2005.</p>
</div>
</body>
</html>body {
padding: 20px;
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 */
}
#en_tete {
width: 800px;
height: 200px;
background-image: url("images/bellebanniere.gif") ;
background-repeat: no-repeat;
border: 1px dotted black;
}
#menuhz {
float: left
width:80px;
border:1px solid black;
color: green;
background-color: #FF9933;
margin: 0 15px ;
text-decoration:none;
text-align:center;
}
#menuhz a{
color: green;
background-color: #FF9933;
margin: 0 15px ;
text-decoration:none;
text-align:center;
}
#menuhz a:hover {
color: orange;
}
#menuvertical
{
clear:both;
margin: 10px;
float: left; /* Le menu flottera à gauche */
width: 120px; /* Très important : donner une taille au menu */
}
.lienpays
{
background-color: #FF9933;
border: 2px dotted black;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
.lienpays ul /* Toutes les listes à puces se trouvant dans un menu */
{
list-style-type: none; /* On change l'apparence des puces */
padding: 2px; /* 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: 0px; /* 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 */
}
.lienpays a /* Tous les liens se trouvant dans un menu */
{
color: #333399;
}
.lienpays a:hover /* Quand on pointe sur un lien du menu */
{
background-color: #B3B3B3;
color: black;
}
.formulaire
{
background-color: #FF9933;
border: 2px dotted black;
margin-bottom: 20px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
#corps
{
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: #330066;
background-color: #99CC33; /* Une couleur de fond pour le corps */
border: 2px solid black; /* Une bordure pour bien marquer les limites du corps et pour faire joli */
}
#pied_de_page
{
margin-left: 140px;
padding: 2px;
text-align: center;
color: #330066;
background-color: #339999;
border: 2px solid black;
}
j'ai une image du chevauchement : http://img451.imageshack.us/my.php?image=essaiik8.png
Merci Hélly
Modifié par helly (10 Jan 2007 - 22:06)