[Débutant] padding dans liste <ul>

[programmeur400]

bonjour,

voilà d'abord le xhtml concerné:

Code html :

1
2
3
4
5
6
7
8
9
10
11
...
    <div id="menu">        
           <div class="element_menu">
               <h3>Titre menu</h3>
               <ul>
                   <li><a href="page1.html">Lien</a></li>
                   <li><a href="page2.html">Lien</a></li>
                   <li><a href="page3.html">Lien</a></li>
               </ul>
           </div>
...

.... et voilà le css concerné:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
.element_menu
{
   background-color: #626262;
   background-image: url("images/motif.png");
   background-repeat: repeat-x;
 
   border: 2px solid black;
 
   margin-bottom: 20px;
}
 
 
.element_menu ul    /* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-image: url("images/puce.png"); /* On change l'apparence des puces */
   padding: 0px; /* Tous les côtés ont une marge intérieure de 0 pixels */
   padding-left: 20px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   margin: 0px; /* Idem pour margin, ça nous évite d'avoir à en écrire 4 (margin-left, margin-right...) */
   margin-bottom: 5px; /* Même chose que tout à l'heure, on modifie ensuite juste margin-bottom, mais tous les autres sont à 0px */
}

A quoi servent les padding padding left et margin margin bottom dans ce cas precis?

Je sais que dans la balise <p> les padding gerent la marge entre le bord du <p> et le texte contenu dans le <p> c est la marge interieure et les margin c est la marge avec le prochain bloc ou marge exterieure mais dans ce cas d'une liste le padding est realise pour <ul> donc il gere la marge entre quoi et quoi exactement?

[Atomya Rise]

Afin de voir plus clair dans tes messages comportant du code, il serait nettement mieux que tu utilise la balise [ CODE ]

Voici un peu de lecture afin que tu comprennes mieux l'utilisation du padding et margin dans les listes déroulantes :

Pour le padding -> http://www.w3schools.com/css/css_padding.asp
Pour le margin -> http://www.w3schools.com/css/css_margin.asp

[programmeur400]

je comprends rien ..quand on fait un padding sur une balise p qui a une bordure, padding c est les marges entre le texte contenu dans p et cette bordure mais là dans le cas de ce ul, il n y a meme pas de bordure alors c est les marges interieures entre quoi et quoi?

[Atomya Rise]

Ben dans ce cas précis, padding est la marge entre <ul> et <li>

[eckerdecker]

il n y a meme pas de bordure alors c est les marges interieures entre quoi et quoi?

une bordure n'est qu'un effet de style au même titre que les marges internes et externes, si ça peut t'aider à visualiser fait des tests en ajoutant une bordure ou un fond, différent de celui de ton div, à ton ul et en faisant varier padding et margin.

dans la balise <p> les padding gerent la marge entre le bord du <p> et le texte contenu dans le <p> c est la marge interieure et les margin c est la marge avec le prochain bloc ou marge exterieure

la balise p n'est qu'une balise parmi tant d'autres, c'est une balise de type "block", ul en est une autre et stylisable de la même manière.
Tu le dis toi même, en généralisant un peu et en précisant un peu plus :
padding : la marge qui sépare un bloc de son contenu
margin : la marge qui sépare un bloc des blocs adjacents. Elle sépare aussi le bloc dans son conteneur d'ailleurs, et si ce dernier a lui-même un padding les deux valeurs seront ajoutées.

A quoi servent les padding padding left et margin margin bottom dans ce cas precis?

Dans ton cas tu as des listes dont les items doivent afficher une puce. Comme tu as pu le lire dans les liens que t'as conseillé Atomya Rise, les navigateurs aménagent la place des puces de manières différentes dans leurs styles par défaut, aussi le padding et le margin de tes balises ul sont mises à 0 avant d'être spécifiés. A gauche 20px pour laisser la place à tes puces et en bas 5px pour séparer de la suite.
Tu pourrais tout à fait remplacer le padding par un margin, et inversement, dans ton cas, visuellement il n'y aura pas de différence si tu ne fixes ni fond ni bordure.

Sur firefox, je te conseille d'installer le plugin firebug si ce n'est pas déjà fait, il te permettra de visualiser le code source de ta page et pointer les éléments pour obtenir un aperçu clair des margin, padding et border apposés dessus et de voir la zone "utilisable" du bloc.