Bonjour à toutes et à tous,

une fois de plus, je patauge en css.
Je vous montre la partie qui me pose problème :


/***** HEADER *****/

#header {
  border-width: 0px;
  border-style: solid;
  border-color: #008000;
  background : black;
  color : red;
}

/* MENU */

#header a {
  color : red;
  font : bold;
  text-decoration : none;
}

#header a:hover {
  color : red;
  border-bottom : 2px solid;
  border-top : 2px solid;
  border-color : red;
}

#header ul {
  width : 100%;
  list-style-type : none;
}

#header li {
  padding-right : 15px;
  float : left;
}


et le code html :


<div id="header">

<ul>
<li>
    <a href="#mainmenu">.: Aller directement au menu :.</a>
</li>
<li>
    <a href="#mainpage">.: Aller directement au contenu :.</a>
</li>
<li>
    <a href="#">.: Plan du site :.</a>
</li>
<li>
    <a href="about.html">.: A propos :.</a>
</li>
</ul>
<center>
<br /><br /><br /><br />
Ici se trouvera le logo/la bannière du Helpdesk Belpic
<br /><br /><br /><br />
</center>
<br />
<ul>
<li>
    <a href="index.html">.: Home :.</a>
</li>
<li>
    <a href="#">.: Communes :.</a>
</li>
<li>
    <a href="index.html">.: Mondossier :.</a>
</li>
<li>
    <a href="index.html">.: Zetes :.</a>
</li>
<li>
    <a href="index.html">.: Infra :.</a>
</li>
<li>
    <a href="index.html">.: Planning :.</a>
</li>
</ul>

</div>


et mon problème :

Je voudrais simplement faire un menu horizontal mais si je ne met pas "width : 100%" dans ul, à cause (je suppose) du float:left dans le il, il ne passe pas de ligne après le menu. Il indique la suite directement après sur la même ligne.
Et, en plus, il n'applique pas les propriétés que j'ai définies pour le a:hover, alors qu'il les applique pour lorsque je retire le float:left

En bref, je suis perdu une fois de plus. Dîtes-moi ce que j'ai fait comme bétises svp Smiley decu

Et, au cas ou vous le demanderiez, je ne peut pas vous montrer ce que j'obtiens parce que je l'ai en local et impossible de faire des ftp depuis mon boulot.

Merci d'avance si vous pouvez m'aider
Modifié par RedOx (10 May 2006 - 15:44)
Bonjour RedOx,

Je n'ai pas bien compris à quoi te sert :

width: 100%;

à

#header ul {
  width : 100%;
  list-style-type : none;
}

mais si tu l'enlèves et que tu mets :

display: inline;

à la place de :

float: left;

à :

#header li {
  padding-right : 15px;
  float : left;

tu auras déjà l'effet du hover.
super, effectivement, ca fonctionne.

Le width : 100% c'était parce que je tatonais :s
Je tentais de trouver un moyen pour qu'il passe à la ligne et n'indique plus à la suite.

Merci beaucoup pour ton aide, je vais mettre [résolu] dans mon titre.
Merci