Menu Horizontal
Posté : 12 févr. 2010, 18:05
bonjour à tous
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:
merci d'avance!!!
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;
}