[XHTML, CSS] Menu avec des balises li et ul

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [XHTML, CSS] Menu avec des balises li et ul

*LighTninG*

Salut à tous,

J'ai quelques problèmes pour finaliser mon menu en css, mon objectif étant d'arriver à ça

Je suis novice avec l'utilisation des ul et des li en css, et je commence à en avoir mal à la tête. Ce serait très sympa de votre part si vous pouviez m'aider. Merci d'avance

Ma page de test, du code tout bete:

Code :

<html>
<head>
<link href="style2.css" type="text/css" rel="stylesheet" />
</head>
<body>
<ul class="nav">
<ul>Accueil</ul>
<ul>Menu1</ul>
<ul>
<li>sousmenu1</li>
<li>sousmenu2</li>
<li>sousmenu3</li>
<li>sousmenu4</li>
</ul>
<ul>Menu2</ul>
<ul>
<li>sousmenu1 </li>
<li>sousmenu2</li>
<li>sousmenu3</li>
<li>sousmenu4</li>
</ul>
<ul>Menu3</ul>
<ul>
<li>sousmenu1 </li>
<li>sousmenu2</li>
<li>sousmenu3</li>
<li>sousmenu4</li>
</ul>
<ul>Menu4</ul>
<ul>Menu5</ul>
</ul>
</body>
</html>

Mon code css:

Code :

body
{
font-weight: bold;
font-family: arial;
font-size: 12px;
color: #FFFFFF;
}
ul.nav, .nav ul
{
padding: 0;
margin: 0;
list-style-image: url(images/icone-main.bmp);
background: url(./images/fond-main.bmp) no-repeat;
cursor: default;
display: block;
width: 161px;
}
ul li.nav, .nav ul li
{
padding: 0;
margin: 0;
list-style-image: url(images/icone-sub.bmp);
background: url(./images/fond-menu.bmp) repeat;
cursor: default;
display: block;
}

Publicité

mechkurt

:pfff:
<ul>blah blah</ul>
c'est :heink:

tu devrait peut etre regarde du cote des listes de definitions <dd> <dt> <dl>

---------------
D3

*LighTninG*

wouhou merci du conseil, je ne connaissais pas ces balises mais je suis arrivé à ce que je voulez en 15 fois plus simple... merci encore !

CNeo

Il faut que tu agrandisses les marges internes de tes li et que tu places des images en arrière plan de tes li en les décalant là où tu veux.

Edit : #FFFFFF peut être remplacé par #FFF

Message cité 1 fois
Message édité par CNeo le 24-10-2005 à 21:51:39

gatsusat

FAUT QUE TU fasses marcher ton ceaveau
et on met que des LI dans un UL, rien d'autre.

donc ca ferai :

Code :

<ul>
<li>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li></li>
<li>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>

base toi sur listamatic http://css.maxdesign.com.au/listamatic/index.htm

---------------
Les CSS c'est bon mangez-en

CNeo

CNeo a écrit :

Il faut que tu agrandisses les marges internes de tes li et que tu places des images en arrière plan de tes li en les décalant là où tu veux.

Edit : #FFFFFF peut être remplacé par #FFF

:hello: :hello: On pourrait peut-être me remercier!!! Mon truc marche.

Message cité 1 fois
Message édité par CNeo le 25-10-2005 à 12:17:58

gatsusat

CNeo a écrit :

:hello: :hello: On pourrait peut-être me remercier!!! Mon truc marche.

faudrait d'abord qu'il corrige sa sémantique.

et puis le mieux c'est de virer toutes les marges dès le début :

#identifiant,#identifiant * {
margin:0; padding:0
}

---------------
Les CSS c'est bon mangez-en

FORUM HardWare.fr

Programmation

HTML/CSS

[XHTML, CSS] Menu avec des balises li et ul

Sujets relatifs
Adapter CSS selon la resolution	[CSS][Résolu] Un pixel en trop sur du li
[CSS] Tableau	[CSS] utilisation du symbole *
menu deroulant choix multiples	menu en css
[CSS] barre de navigation qui part en vrille	mon menu javascript passe "en dessous" de mon anim flash
Du PHP dans fichier CSS	Menu sous conditions
Plus de sujets relatifs à : [XHTML, CSS] Menu avec des balises li et ul

Page générée en 0.048 secondes