CSS et liste ordonnée

[Spike Spiegel]

Bonjour!

Je m'exerce un peu sur la conception d'un site et j'ai un petit souci. J'ai un menu type CSS que j'ai fait comme ceci:

Code: Tout sélectionner

ul {
width:800px;
height:40px;
position:absolute;
left:50%;
margin-left: -360px;
margin-top: 10px;
}

.menu li {
list-style-type: square;
float: left;
}

.menu a{
margin: 0 1px;
width: 100px;
height: 20px;
display: block;
text-align: center;
border: 1px dashed black;
text-decoration: none;
color: #000;
background: #fff;
}

.menu a:hover {
background: cyan;
border: 1px solid black;
}

.menu a:active {
background: blue;
border: 1px solid black;
color: #fff;
}

Ca me fait un menu vraiment sympa mais le problème est que je n'arrive plus à faire de liste avec des puces ou des numéros. Si je souhaite par exemple faire un liste avec des petits carrés, la liste apparaitra mais sans les carrés...

Apparement ce code CSS désactive les puces et ordonne au navigateur d'afficher une liste sans carré, sans rond et ce quoi qu'il arrive!

Mais alors comment contourner le problème?

Je m'en remets à vous les amis!

Spikou

[blankoworld]

Bonjour,

Je vois que tu as nommé ton menu "menu". Au lieu de mettre un point et de le mettre en "class" dans la page, essaies une fois en mettant un dièse # et en "id" dans la page. Puisque ce n'est seulement qu'un menu.
Essaies également de mettre l'ID à la balise "UL" et non pas aux balises "LI".
De cette manière :

Code: Tout sélectionner

<ul id="menu">
<li><a href="" alt="">Mon lien numéro 1</a></li>
<li><a href="" alt="">Mon lien numéro 1</a></li>
...
</ul>

Puis dans le CSS :

Code: Tout sélectionner

ul#menu {
width:800px;
height:40px;
position:absolute;
left:50%;
margin-left: -360px;
margin-top: 10px;
list-style-type: square;
}

#menu li {
float: left;
}

#menu li a{
margin: 0 1px;
width: 100px;
height: 20px;
display: block;
text-align: center;
border: 1px dashed black;
text-decoration: none;
color: #000;
background: #fff;
}

#menu a:hover {
background: cyan;
border: 1px solid black;
}

#menu a:active {
background: blue;
border: 1px solid black;
color: #fff;
}

Pour le list-style-type je crois qu'il faut le mettre dans le ul, mais pas sûr.
Testes et dis moi ce que tu en penses et si le souci est résolu.
Il va de soi que les autres listes seront sous la forme <ul></ul>, sans l'id menu. De toute manière cela ne fonctionnerait pas puisque l'id veut dire que ce sera une et une seule fois dans la page. Tandis que la classe peut être utilisées plusieurs fois.

[blankoworld]

Alors ça donne quoi ? As tu réussi ? Et si oui comment ?

[Spike Spiegel]

Désolè j'ai bien lu ta réponse mais depuis j'ai eu d'autres problèmes à régler et j'ai oublié celui-ci

Demain je pense m'y remettre et je te tiens au courant !

merci en tout cas pour le suivi