Bonjour à tous !
Actuellement en stage dans une entreprise, le client me demande de faire un site web et je galère sur le menu.
Il faut que je positionne les élements du menu manuellement en positionnement absolu et que les éléments soient "en ligne" et je n'y arrive pas...
voici le code html :
Voici le CSS :
Qu'es-ce qui cloche ?
merci d'avance...
Actuellement en stage dans une entreprise, le client me demande de faire un site web et je galère sur le menu.
Il faut que je positionne les élements du menu manuellement en positionnement absolu et que les éléments soient "en ligne" et je n'y arrive pas...
voici le code html :
<html>
<head>
<title>Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" media="screen" type="text/css" title="Base" href="styles.css" />
</head>
<body>
<div id="page">
<h1>Titre du site</h1>
<div id="menu_principal">
<ul id="menu">
<li id="index"><a href="index.html">Accueil</a></li>
<li id="fonctionnement"><a href="fonctionnement.html">Fonctionnement</a></li>
<li id="delais"><a href="delais.html">Delais</a></li>
<li id="tarifs"><a href="tarifs.html">Tarifs</a></li>
<li id="demonstrations"><a href="demonstration.html">Demonstrations</a></li>
<li id="autres"><a href="autres.html">Autres services</a></li>
<li id="contact"><a href="contact.html">Contact</a></li>
</ul>
<ul id="nav_tools">
<li id="moncompte"><a href="">Mon compte</a></li>
<li id="phone"><a href="">Téléphone</a></li>
<li id="devis"><a href="">Devis Gratuit</a></li>
<li id="cahiercharges"><a href="">Cahier des charges</a></li>
</ul>
</div><!--Fin NAVIGATION -->
<div id="content">
<p>Contenu de la page web !</p>
</div><!--Fin CONTENT -->
</div><!--Fin HAUTPAGE -->
<div id="baspage"></div><!--Fin BASPAGE -->
</body>
</html>
Voici le CSS :
@charset "utf-8";
/* CSS Document */
/*Normalise les marges et le remplissage*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {margin:0; padding:0;}
/*Normalise les tailles de polices pour les en-tête*/
h1, h2, h3, h4, h5, h6 {font-size:100%;}
/*Supprime list-style pour les listes*/
ol, ul {list-style-type:none;}
/*Supprime les bordures dans les tableaux*/
table {border-collapse:collapse; border-spacing:0;}
body {background:#ccc;}
div#page {
position:relative;
width:980px;
margin:0 auto;
text-align:left;
background:url(images/bg_page_haut.png) left top no-repeat;
}
div#baspage {
position:relative;
width:980px;
margin:0 auto;
text-align:left;
background:url(images/bg_page_bas.png) left bottom no-repeat;
height:37px; /*Taille de l'image en arrière plan*/
}
#content {
position:relative;
background:#FFFFFF url(images/bg_content.png) 50% top no-repeat;
height:300px;
/*min-height:600px;*/
padding:30px 40px;
}
/*LE MENU*/
div#menu_principal {
position:relative;
height:50px;
background:#FFF;
z-index:10;
}
ul#menu {
position:absolute;
top:35px;
left:325px;
margin:0;
width:440px;
height:50px;
}
ul#menu li {
display:inline;
}
/*Positionnement des onglets du menu principal*/
li#index {left:0;}
li#fonctionnement {left:150px;}
li#delais {left:300px;}
li#tarifs {left:450px;}
li#demonstrations {left:600px;}
li#autres {left:750px;}
li#contact {left:900px;}
li#index a, li#fonctionnement a, li#delais a, li#tarifs a, li#demonstrations a, li#autres a, li#contact a {
display:block;
height:50px;
width:140px;
}
Qu'es-ce qui cloche ?
merci d'avance...
