Discussion :

[pierrot10]

Bonjour
j'ai un petit doute.
J'aimerais que mes <li> soit a l'horizontal au lien de les avoir les un dessous les autres
Pour cela j'ai comme ceci dans mon CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
li.menu{
display : list-item;
float:left;
list-style-position:outside;
margin-right:25px;
list-style-type:circle;
}

ca marche, mais je suis pas convaincu que le float:left soit la bonne solution, surtouzt que j'aimerais que mes <li> soit aligner au centre de la page

Comment l'auriez vous fait?

Merci

[MasterOfChakhaL]

Salut,

Moi j'aurais mis un display:inline en lieu et place du float:left.

Maintenant, si tes li contiennent des éléments de type block, ce n'est pas correct de les mettre dans un élément qui devient en ligne -> float: left dans ce cas

[pierrot10]

j'ai essayé en enlevant aussi le float:left, ca marche mais ca me supprime mes bullets, et... je veux les garder :o)

[MasterOfChakhaL]

Je te laisse bien sur faire tes propres choix

Mais il est possible de faire ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
#menu li {
  display: inline;
  padding-left: 30px;
  background: transparent url('bullet.gif') center left no-repeat;
}

Le 30px est bien sur à titre indicatif et dépend de bullet.gif (à créer)

[Orgied]

Salut, pour t'assurer de na pas avoir de marges un peu partout, voici un exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
body ul#menu {
position: relative; 
margin: 0px; //retire les marges externes en haut, à droite, en bas et à gauche
padding: 0px; //retire les marges internes en haut, à droite, en bas et à gauche
list-style-type: none; //aucune puce affichée
}
ul#menu li {
margin: 0px; //retire les marges externes en haut, à droite, en bas et à gauche
padding: 2px 2px 2px 30px; //place des marges interne dans l ordre suivant : haut, droite, bas, gauche
display: inline; 
background-image: url(./i/ico.gif); //image de background
background-repeat: no-repeat;
background-position: 0px 0px; //permet d ajuster la position de ton icone si tu en as besoin
}