Utilisation de clear:both en fin de menu horizontal
Bonjour,
J'ai récupéré un exemple de menu horizontal qui contient:
Code:
1
2
3
4
5
6
| .menuH li
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
} |
Cette écriture provoque l'écriture de l'élément suivant le menu sur la même ligne que ce dernier.
J'ai essayé de jongler avec des :: after et des clear:both mais je n'arrive pas à mon but.
La seule modification que j'ai apportée à ce style a été de remplacer un id par une classe.
Je joins mes codes css et html
HTML:
Code:
<ul class="menuH"><li><a href="editAccomp.php?stage=1">1 - Accompagnement</a></li><li><a href="editAccomp.php?stage=2">2 - Etat-civil, adresses</a></li><!-- suite 3 à 5 --></ul>
CSS:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| .menuH, .menuH ul {
padding : 0;
margin : 0;
list-style : none; /* on supprime le style par défaut de la liste */
line-height : 21px; /* on définit une hauteur pour chaque élément */
text-align : center; /* on centre le texte qui se trouve dans la liste */
}
.menuH {
font-weight : bold; /* on met le texte en gras */
font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
font-size : 12px; /* hauteur du texte : 12 pixels */
}
.menuH a {
display : block;
padding : 0;
background : #000;
color : #fff;
text-decoration : none;
width : 144px;
}
.menuH li
{
float : left;
/* pour IE qui ne reconnaît pas "transparent" */
border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body .menuH li
{
border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
} |
