Bonjour,
je suis entrain de créé un site web je suis dans la première page , j'ai déjà fait la bannière et le menu (en utilisant css ) mon pb c au niveau du menu malgré qu'il la la mm taille en largeur avec la bannière mais en testant la page il manque qq pixel pour qu'il soit exacte j'ai essayer de le régler mais soit les item desend en bas soit il devient plus petit :( ??? voila le code html et css
<!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>Site Commune Sousse</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" media="screen" type="text/css" title="design" href="designSite.css">
<!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<!--><![endif]-->
</head>
<body>
<!-- en tete :) -->
<div id="en_tete"> </div>
<!-- menu -->
<div id="menu">
<ul>
<li><a href="# ">Presentation de la ville </a>
<ul>
<li>Situation Géographique</li>
<li>Histoire de la ville</li>
<li>Sites touristique </li>
<li> La ville en chiffres</li>
</ul>
</li>
<li><a href="# "> Presentation de la mairie </a>
<ul>
<li>Date de création</li>
<li>Arrandissement Municipaux</li>
<li>Conseil municipal </li>
<li>Conseil municipal des enfants</li>
<li>Services</li>
</ul>
</li>
<li><a href="# ">Réalisations </a></li>
<li><a href="# "> Relations entre les citoyens</a></li>
<li><a href="# "> Coopération internationnal</a></li>
</ul>
</div>
<div id="element-menu">
<ul><h4>Présentation</h4>
<li>Féstivité</li>
<li>News</li>
<li>Prix</li>
<li>Plan du site</li>
</ul>
</div>
<!-- corp -->
<div></div>
<!-- pied de page -->
<div></div>
</body>
</html>
body {
background: #42afdc url(images/html-bg.gif) repeat-x;
padding: 0px;
margin: 0px;
color: #333333; font-style:normal; font-variant:normal; font-weight:normal; line-height:170%; font-size:75%; font-family:Verdana
}
#en_tete
{
width: 900px;
height:153px;
background: url('images/banniere-sousse.jpg') no-repeat center top;
background-repeat: no-repeat;
margin-bottom: 10px;
margin: auto;
}
#menu {
height:50px;
}
#menu ul
{ padding:0px;
width: 900px;
margin: 0 auto ;
list-style-type: none ; /*pour les points de chaque titre (.presentation...) il faut pas qu'elle s'affiche */
text-align:center;}
#menu li
{
margin: auto ;
padding: 0 ;/* affichage horizontal */
float: left ; /*pour ne pas qu'ils (li) s'empilent les uns sur les autres, on déclare les différents élément flottants à gauche ,ce qui va permettre aux li suivants d'aller se mettre... à droite*/
background: #3399CC;/*bleu comme l'arriere plan*/
border: 1px solid #006699 ;
}
#menu li a /*premier vu*/
{
/* float: left ;*/
display:block; /*va permettre de donner une largeur fixe et identique à chaque li*/
width: 175px ;
color: #FFFFFF ;
padding: 4px 0 ;
text-decoration: none ; /* non souligné*/
/* float: left ;*/ }
#menu li a:hover /* au clik*/
{
color: #030676 ;
background: #E1C75B ;
}
#menu ul li ul {
display:none;/*Pour faire disparaître les sous-items, on rajoute un display:none à la sous-liste (on lit en remontant : le ul inclus dans le li du ul du cadre id="menu") */
width: 175px;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#element-menu{
background-color: #e4d731;
float: left;
margin-left: 170px;
border: 1px solid #D1B02E ;
}
#element-menu h4{
margin: auto;
}
#element-menu li {
list-style-type: none ;
margin: auto ;
padding:0;
}
