Discussion :

[ciol007]

Bonjour,
Je n'arrive pas à aligner mon sommaire comme je le souhaite.
J'ai cherché sur internet un bon moment mais je ne trouve rien.
J'ai fait une liste imbriquée avec <ul>.

Visuellement je voudrais avoir ça :

Sommaire :
......Standards XHTML et CSS : quelle différence ?
..........Le W3C et les standards du Web
..........Séparer le fond de la forme avec HTML et CSS

J'obtiens ça avec mon code html et mon CSS

.........Sommaire :
.............Standards XHTML et CSS : quelle différence ?
..................Le W3C et les standards du Web
..................Séparer le fond de la forme avec HTML et CSS

Je souhaite aligner sur la gauche sans marge mais quand je mets padding-left:0px, c'est toute la liste qui est alignée à gauche et il n'y a plus de décalage lié aux puces.

Merci de votre aide

[rodolphebrd]

Bonjour,

pouvez-vous poster votre code HTML et CSS.

[laurentSc]

Comme le dit Rodolphebrd, ça serait plus facile avec du code, mais essaye quand-même de remplacer padding-left par margin-left

[ciol007]

Bonjour,
Je viens d'essayer avec margin left mais ça ne fonctionne pas.

Voici le code html :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<ul>
	<li>Sommaire</li>
	<ul>
		<li>Standards XHTML et CSS : quelle différence ?</li>
		<ul>
			<li> Le W3C et les standards du Web </li>
			<li>Séparer le fond de la forme avec HTML et CSS</li>
		</ul>
	</ul>
</ul>

Code :

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

1
2
ul{list-style-type: none; padding-left: 0px;}
h3{font-weight: normal;}

[Torgar]

Pourquoi ne pas sortir le texte "Sommaire" de la liste tout simplement ?

[rodolphebrd]

N'hésitez pas à consulter les cours CSS

Code :

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

1
2
3
ul:first-child{
   padding-left: 0px;
}

http://codepen.io/anon/pen/nEsow

[Bovino]

Ni les cours HTML... histoire de créer des listes imbriquées correctes !

[ciol007]

Merci pour vos réponses. Dur d'être débutant .

Par contre ça ne marche toujours pas avec la balise first-child.

Code :

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

1
2
3
ul:first-child{
   padding-left: 0px;
}

ça ne change rien à la mise en page.

Et pourquoi ne pas le retirer de la liste ?
Car après il y a un espace d'une ligne entre le sommaire et la liste et je souhaite que ça soit collé.

[rodolphebrd]

Bovino : oeil de lynx.

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
<ul class="pad">
  <li>Sommaire
    <ul>
      <li>Standards XHTML et CSS : quelle différence ? 
        <ul>
          <li> Le W3C et les standards du Web          </li>
          <li>Séparer le fond de la forme avec HTML et CSS</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

Code :

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

1
2
3
.pad{
  padding-left: 0px;
}

[ciol007]

Merci ça marche !
C'est qui le bovin ? C'est moi !?

Je ne connaissais pas cet outil c'est pratique.

Pour gérer le décalage entre les éléments de cette liste il faut faire de la même manière en mettant une classe dans la balise html concernée c'est ça ?

[rodolphebrd]

C'est qui le bovin ? C'est moi !?

Il suffit d'ouvrir les yeux...

[laurentSc]

Pour gérer le décalage entre les éléments de cette liste il faut faire de la même manière en mettant une classe dans la balise html concernée c'est ça ?

Oui, c'est bien ça, afin de n'appliquer le CSS qu'à la première liste.

[rodolphebrd]

POur cibler les éléments il y a ça :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
ul{
  list-style-type: none; 
}
ul:not(:only-child){
  padding-left: 0px;
  color:green;
}
 
ul ul {
  color:red;
}
ul ul ul{
  color:blue;
}

http://codepen.io/anon/pen/Jbhjs

[ciol007]

lol ah oui j'avais pas vu bovino ..

Merci en tous cas !

[laurentSc]

Tel quel, le codepen ne fonctionne pas (si on clique la couleur ne change pas), mais j'ai la flemme chercher un CSS correct...

[rodolphebrd]

Codepen corrigé