je débute ds le html et css et jaimerai faire un menu horizontal déroulant... mais rien que de mettre mon menu ds cette position me pose problème! vous serait-il possible de me donner un coup de main! je tourne en rond depuis hier.. je désespère!!! Help!!!
Voice mes codes:
#header{
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Glucose Festival 2011</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="site" href="essai.css"
</head>
<body>
<!-- L'en-tête -->
<div id="en_tete">
</div>
<!-- Les menus -->
<div id="menu">
<ul id="menu">
<li>
<a href="page1.htlm">Accueil</a>
<li/>
<li>
<a href="page2.html">Programmation</a>
<ul>
<li><a href="page1.html">Horaires</a></li>
<li><a href="page2.html">Groupes</a></li>
</ul>
</li>
<li><a href="url_de_votre_page3">Billetterie</a>
<ul>
<li><a href="page4.html">Tarifs</a></li>
<li><a href="page5.html">Réservation en ligne</a></li>
</ul>
</li>
<a href="url_de_votre_page4">Infos</a>
<a href="url_de_votre_page5">Photos</a>
<a href="url_de_votre_page5">Contact</a>
<ul/>
</div>
<!-- Le corps -->
<div id="corps">
<h1>Bienvenue sur le site du Glucose Festival</h1>
<p>
Pour tous les amoureux de la musique française, la prochaine édition se fera au mois de mai 2011.
<br/> Après une première édition plus que réussi, nous vous invitons à jeter un coup d'oeil au programme de la prochaine session.
<br/> Rock, Reggea, Chanson, ..., la programmation se veut éclectique. Un style par soirée pour que tout le monde soit content!!!!
</p>
</div>
<!-- Le pied de page -->
<div id="pied_de_page">
<p>Copyright "Tout pourri Corporation" 2005, tous droits réservés</p>
</div>
</body>
</html>
Code : Tout sélectionner
#header{
body
{
width: 100%;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 65px;
font-family: harabara, arial, sherif;
font-size: 14px;
color: rgb(248, 129, 26);
background: url(./image/fond_site.gif) scroll repeat-x ;
}
h1
{
margin-top: 300px;
margin-bottom: 20px;
text-align: center;
font-weight: bolder;
font-variant: small-caps;
font-size: 40px;
}
p
{
color: rgb(0, 0, 0);
text-align: justify;
font-size: 25px
}
#en_tete
{
width: 100%;
height: 200px;
background-image: url("./image/logo.gif");
background-repeat: no-repeat;
margin-bottom: 10px;
margin-left: 50px;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li
{
float : left;
padding: 0;
background-color: none;
margin : auto;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
.element_menu a:hover
{
color: rgb(153, 51, 51);
}
#menu a, #menu a:visited
{
color: rgb(51,0,0);
text-align:justify;
padding-top:3px;
}
#menu a:hover, #menu a:visited:hover
{
color: rgb(51,0,0);
text-decoration:none;
}