Menu horizontal css

Bonjour,

J'aimerais créer un menu horizontal basique ul li sauf que j'aimerais pouvoir fixer la taille de mes li.

Mais je ne sais pas comment écrire cette particularité.

Merci pour votre aide.

Cordialement.

bonsoir ,

par exemple :

 ul li {
float:left; /* modifie le contexte de formatage et l'emporte sur les valeurs de display */ 
display:inline ; /* elimine un bug chez IE vielle version et les puces  ,*/
width:XXpx; /* enfin , grace a float , tu peut donner hauteur et largeur */
 }

GC

Voila mon code actuellement :


Ce menu fonctionne mais j'aimerais pouvoir fixer la taille de chaque bloc et non avoir des blocs qui font chacun 117px.

<div id="menu">
<ul>
<li><a href="#">ACCUEIL</a></li>
<li><a href="#">RADIO</a></li>
<li><a href="#">COMMANDE</a></li>
<li><a href="#">POCUS TV</a></li>
<li><a href="#">MUSIC</a></li>
<li><a href="#">AGENDA</a></li>
<li><a href="#">BONS PLANS</a></li>
<li><a href="#">STORE</a></li>
</ul>
</div>

#menu
{
width:944px;
}

#menu ul
{
margin:0;
padding:0;
list-style-type:none;
}
#menu li
{
float:left;
}
#menu a
{
color:#EEEEEE;
text-decoration:none;
display: block;
width:117px;
height:30px;
line-height:30px;
text-align:center;
background: url(../images/out.png)  no-repeat;
/*border-right: 1px solid #D2D2D2;*/
font-family: "Arial Black" ,sans-serif;
font-size:12px;
}
#menu a:hover
{
color:#801D72;
text-decoration:none;
background: url(../images/over.png)  no-repeat;
font-family: "Arial Black" ,sans-serif;
font-size:12px;
height:37px;
line-height:37px;
background-position:center;
}

Modifié par modogo (12 Mar 2010 - 08:41)

il te faut alors attribué une class ou une id a chacun de tes liens pour les cibler précisement .

Peux tu me montrer un exemple ?

Bonjour et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

D'ailleurs, je rappelle que le lien "Aide" qui apparaît tout en haut du forum est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation

Désolé j'ai été un peu vite et oublié le savoir vivre.

Voici un exemple ,

<div id="menu">
<ul>
<li><a href="#" >ACCUEIL</a></li>
<li><a href="#" class="cent20>RADIO</a></li>
<li><a href="#" class="cent20">COMMANDE</a></li>
<li><a href="#" class="cent40">POCUS TV</a></li>
<li><a href="#" class="cent10">MUSIC</a></li>
<li><a href="#" class="cent10">AGENDA</a></li>
<li><a href="#" class="cent30">BONS PLANS</a></li>
<li><a href="#" class="cent10">STORE</a></li>
</ul>
</div>

#menu
{
width:944px;
}

#menu ul
{
margin:0;
padding:0;
list-style-type:none;
}
#menu li
{
float:left;
}
#menu a
{
color:#EEEEEE;
text-decoration:none;
display: block;
width:117px;
height:30px;
line-height:30px;
text-align:center;
background: url(../images/out.png)  no-repeat;
/*border-right: 1px solid #D2D2D2;*/
font-family: "Arial Black" ,sans-serif;
font-size:12px;
}
#menu a:hover
{
color:#801D72;
text-decoration:none;
background: url(../images/over.png)  no-repeat;
font-family: "Arial Black" ,sans-serif;
font-size:12px;
height:37px;
line-height:37px;
background-position:center;
}

#menu a .cent10 {width:110px;}
#menu a .cent20 {width:120px;}
#menu a .cent30 {width:130px;}
#menu a .cent40 {width:140px;}

Il te faut (re)prendre quelques tutos de bases simples pour faire tes premiers pas (le site du zero peut-etre ? ) , enfin j'imagine

Cordialement

GC

Merci pour ton aide ça ma grandement aidé. C'est moins flou maintenant.