Liste et sous liste impossible à réaliser

Salut,

Je patauge un peu en css et surtout pour les listes, je cherche a faire un menu vertical avec une liste et une sous liste, je veux que chaque element de la liste ait une bordure en bas et que chaque liste peut recevoir une sous liste avec un style different mais voilà apres de nombreuses tentatives je n'arrive pas à le realiser. Pour mieux comprendre je l'ai réalisé sous photoshop

Si quelqu'un veut bien m'aider à le realiser ça serait super. Merci

Salut.

A priori, ce n'est pas impossible du tout

Avec des listes imbriquées, tu devrais avoir suffisament de sélecteurs CSS disponibles pour pouvoir styler chaque niveau comme tu le souhaites :

<ul class="menu">
   <li>Liste 1
      <ul class="sousMenu">
         <li><a href="#" title="...">Sous-liste 1</a></li>
         <li><a href="#" title="...">Sous-liste 2</a></li>
      </ul>
   </li>
   <li>Liste 2
      <ul class="sousMenu">
         <li><a href="#" title="...">Sous-liste 1</a></li>
         <li><a href="#" title="...">Sous-liste 2</a></li>
      </ul>
   </li>
</ul>

ul.menu {
   list-style: none;
   margin: 0;
   padding: 0;
   background: #ddd;
}
ul.menu li {
   border-bottom: 1px solid #fff;
}
ul.sousMenu {
   margin-left: 20px;
   color: #c00;
   list-style-type: square;
}
ul.sousMenu li a {
   color: blue;
   text-decoration: none;
}
ul.sousMenu li a:hover {
   color: #c00;
}

Ca devrait fonctionner. Et je crois bien que j'en ai déjà beaucoup trop dit

Salut,

<ul class="menu">
   <li>Liste 1[#red]<li>[/#]
      [#red]<li class="sous_nav">
         <ul class="menu2">[/#]         
         <li><a href="#" title="...">Sous-liste 1</a></li>
         <li><a href="#" title="...">Sous-liste 2</a></li>
         </ul>
     </li>
   <li>Liste 2</li>
      [#red]<li class="sous_nav">
         <ul class="menu2">[/#] 
         <li><a href="#" title="...">Sous-liste 1</a></li>
         <li><a href="#" title="...">Sous-liste 2</a></li>
         </ul>
      </li>
</ul>

Moi, au boulot, on travaille de cette manière ci pour créer des menus.

Le fait que liste1 et liste2 n'ont pas de suite une balise fermante pourrait jouer peut-être de mauvais tours dans la mise en page?

pas mal tout ça mais le problème c'est que les sous-listes héritent de la bordure du bas, je n'arrive pas à m'en debarasser !

Bonjour,

@Oryo : le code indiqué par sopo est plus rigoureux. Dans ton code, en effet, les sous-menus ne sont plus structurellement liés à leur intitulé de premier niveau.

Côté CSS, en revanche, l'un ou l'autre ne feront aucune différence.
Modifié par Laurent Denis (10 Aug 2006 - 14:34)

Ah oui, tu fais sans doute

.menu li{
   border-bottom: 1px solid #fff;
}

Rajoute une class a tes li principaux, ainsi, les li du sous menu ne seront pas atteint.

.menu .liste1{
   border-bottom: 1px solid #fff;
}

et dans le code html:

<ul class="menu">
   [#red]<li class="liste1">Liste 1[/#]
        <ul class="menu2">         
         <li><a href="#" title="...">Sous-liste 1</a></li>
         <li><a href="#" title="...">Sous-liste 2</a></li>
         </ul>
     </li>
   [#red]<li class="liste1">Liste 2[/#]
         <ul class="menu2"> 
         <li><a href="#" title="...">Sous-liste 1</a></li>
         <li><a href="#" title="...">Sous-liste 2</a></li>
         </ul>
      </li>
</ul>

EDIT:>> tu as finalement raison une fois de plus Laurent
je rechange alors mon code html
Modifié par Oryo (10 Aug 2006 - 14:38)

julien.dj a écrit :
pas mal tout ça mais le problème c'est que les sous-listes héritent de la bordure du bas, je n'arrive pas à m'en debarasser !

Il suffit d'utiliser les bons sélecteurs et de supprimer la bordure :

ul.sousMenu li {
   border: 0;
}

@Oryo : pas besoin d'une classe en plus, il y a tout ce qu'il faut pour arriver aux éléments concernés dans le code

Tout ça m'a l'air parfait, reste quelques réglages à faire. La route est encore longue pour atteindre votre niveau... chapeau !

Si ton problème avec la liste est réglé, n'oublie pas de le signaler en ajoutant la mention [Résolu] dans le titre (voir FAQ)

Bon ben là, j'ai une mauvaise note.

Tant pis, julien.dj a sans doute bien compris ainsi avec nos divers post ce qu'il faut faire et ne pas faire
Modifié par Oryo (10 Aug 2006 - 15:01)

encore une question ou du moins un problème, lorsque je fais un lien sur element de la liste 1 la couleur est en noir alors que dans le feuille de style je lui ai bien précisé que pour les <a> c'etait du vert. je dois avoir une erreur mais je ne trouve pas.

voici le code html :

<ul class="menu">
	<li><a href="#">Liste 1</a>
	<ul class="sousMenu">
		<li><a href="#" title="...">Sous-liste 1</a></li>
		<li><a href="#" title="...">Sous-liste 2</a></li>
	</ul>
	</li>
	<li><a href="#">Liste 2</a>
	<ul class="sousMenu">
		<li><a href="#" title="...">Sous-liste 1</a></li>
		<li><a href="#" title="...">Sous-liste 2</a></li>
	</ul>
	</li>
	<li><a href="#">Liste 2</a></li>
	<li><a href="#">Liste 2</a></li>
</ul>

et le code css :

body {
     margin: 0; /* pour éviter les marges */
     text-align: center; /* pour corriger le bug de centrage IE */
     scrollbar-face-color: #ffffff;
	 scrollbar-highlight-color: #FFFFFF;
	 scrollbar-shadow-color: #0178B9;
	 scrollbar-3dlight-color: #0178B9;
	 scrollbar-arrow-color:  #0178B9;
	 scrollbar-track-color: #E2EFFF;
	 scrollbar-darkshadow-color: #ffffff;
     }
a { text-decoration: none; color: #000000;}
a:link { text-decoration: none; color: #000000;}
a:visited { text-decoration: none; color: #000000;}
a:hover { text-decoration: underline; color: #ac5d37;}
a:active { text-decoration: none; color: #000000;}

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	color: #FFFFFF;
	font-style: bold;
	white-space: normal;
	letter-spacing: 1px;
	margin-left: 4px;	
	display: inline;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #2d5978;
	font-style: bold;
	background: url(../images/carre.gif) no-repeat left;
	list-style-type: none;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 0px;
	padding-top: auto;
	padding-right: auto;
	padding-bottom: auto;
	padding-left: 12px;
}


ul.menu {
	margin: 0;
	padding: 0;
	width:  100%;
	list-style: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #2d5978;
	font-weight: bold;
	text-indent: 5px;
}
ul.menu li {
   border-bottom: 1px solid #fff;
   color: #2d5978;padding-left:5px;
}
ul.menu li a {
color: #2d5978;
   text-decoration: none;
}
ul.menu li a:link {
color: #2d5978;
   text-decoration: none;
}
ul.menu li a:hover {
   text-decoration: none;
}
ul.menu li a:visited {
   text-decoration: none;
}
ul.menu li a:active {
   text-decoration: none;
}
ul.sousMenu {
	padding-left: 0;
    margin-left: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	color: #894c24;
	list-style-type: square;
	margin-bottom: 10px;
	font-weight: normal;
}
ul.sousMenu li {
   border: 0;
}
ul.sousMenu li a {
   color: blue;
   text-decoration: none;
}
ul.sousMenu li a:hover {
   color: #c00;
}

.header {
	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	
}

Salut.

La couleur des liens dans la liste 1 est définie par

ul.menu li a {
   color: #2d5978;
}

Et après vérification, le code hexadécimal "2d5978" ne correspond pas à du vert, ni à du noir, mais à du bleu (relativement foncé, certes). Il y a donc un petit soucis à ce niveau, si tu voulais du vert.

A part ça, pourquoi déclares-tu toutes les pseudo-classes sur ces liens (:hover, :visited, etc) dans ta feuille de style si tu ne les modifies pas ? Elles héritent de toutes façons des propriétés du lien "normal", inutile de répéter 4 fois le text-decoration: none;

oui en effet c'est du bleu-vert on va dire. Mais le lien est tjs en noir alors que bizarrement sous mozilla il est bien en bleu.

concernant la declaration des pseudo classes, je l'ai fait par desespoir au cas où il aurait besoin de toute ces déclarations mais en effet c'est inutile.

mais pourquoi reste t il en noir ?

Apparement, il y a un petit bug et IE ne comprend pas bien le chemin pour arriver jusqu'au bon endroit. Il a de toute évidence conservé les couleurs que tu as définies pour le reste de la page

a {
color: #000000;
...
}

Essaie d'utiliser d'autres sélecteurs, ou d'en ajouter si possible à cette déclaration générale sur les liens ...

Par exemple :

ul.menu a {
   color: green;
}
div#contenu a {
   color: #000;
}

Il y a forcément une combinaison qui va fonctionner