[resolu] interlignes dans une liste avec CSS

galad · Message par **galad** » 08 juil. 2006, 16:54

Bonjour,
Je voudrais mettre des espaces entre les éléments d'une liste pour bien les séparer, mais dans une seule partie de ma page.
je pense qu'il faut faire quelque chose dans le genre
<ul=style machin>
<li> toto1 </li>
<li> toto2 </li>
</ul>
mais je bute au niveau de la feuille de style.
Quelqu'un a une idée ? Merci d'avance.

Message par **Ymai** » 08 juil. 2006, 17:17

Bonjour
J'aurais vu quelque chose comme ceci:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title></title>
  <style type="text/css">
#espace li {
padding-bottom: 15px;
}
  </style>
</head>
<body>
<div>qsdfqsdf </div>
dddqsdf<br>
<ul id="espace">
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
</ul>
</body>
</html>

La règle vaut donc pour les <li> qui se trouvent dans un bloc dont l'id est "espace".
On pourrait aussi mettre

Code : Tout sélectionner

<div id="espace">
<ul>
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
  <li>quatre</li>
</ul>
</div>

si l'on souffre de "div-ite"

calimo · Message par **calimo** » 08 juil. 2006, 17:48

Ymai a écrit :On pourrait aussi mettre [un code sans div] si l'on souffre de "div-ite"

Ymai a écrit :
Code : Tout sélectionner
<body>
<div>qsdfqsdf </div>
dddqsdf<br>

Parce que ça c'est pas de la divite ?

(Note : ça ne sert à rien de me le rappeler, je suis atteint de strictite

)

Ceci dit, il me semble que galad demandait une séparation entre les éléments, non ?
Dans ce cas, tout simplement :

Code : Tout sélectionner

li {
	margin-bottom: 2em;
}

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.4) Gecko/20060508 Firefox Firefox/1.5.0.4

Message par **Ymai** » 08 juil. 2006, 17:56

calimo a écrit : Ceci dit, il me semble que galad demandait une séparation entre les éléments, non ?
Dans ce cas, tout simplement :
Code : Tout sélectionner
li {
	margin-bottom: 2em;
}

Je ne conteste pas, mais elle avait aussi demandé à ce que cela ne se passe que sur une partie de sa page.
Pour ma part, je comprends cela comme si elle souhaitait pouvoir disposer de certaines listes avec espacement "normal" et d'autres avec espacement "large" dans la même page.
Le code que je proposais permettait effectivement:
- un espacement entre les <li>
- de choisir si la liste profite de cet espacement ou non.

[edit] em est mieux que px [/edit]

galad · Message par **galad** » 08 juil. 2006, 18:01

En effet, je souhaite ce type d'espace que dans mon bloc gauche.
J'ai suivi le conseil de Ymai et le div en question a bien les espaces entre les li, mais il est également décalé sur la gauche.
Voici ma feuille de style au cas où le problème viendrait de là

Code : Tout sélectionner

/* Generated by KaZcadeS */

#conteneur {
    font-family: Verdana;
    font-size: 80%;
    color: #000080;
}
#bandeau {
    background-repeat: no-repeat;
    background-position: center top;
    height: 100px;
}
#gauche {
    border-style: double solid solid double;
    border-color: #000080;
    text-align: center;
    background-image: url(images/fond3.gif);
    float: left;
    width: 160px;
    font-size: 80%;
    padding-left: 2px;
    padding-right: 2px;
}
#centre {
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}
#droit {
    border-style: double solid solid double;
    border-color: #000080;
    text-align: center;
    background-image: url(images/fond3.gif);
    width: 160px;
    float: right;
    font-size: 80%;
    padding-left: 2px;
    padding-right: 2px;
}
#piedepage {
    float: none;
    position: relative;
}
li {
    list-style-type: none;
    font-weight: bold;
}
a:link {
text-decoration: none;
}

a:visited {
text-decoration: none;
    color: #663366;
}

a:hover {
    color: #ff0000;
}

#espace li { 
padding-bottom: 15px; 
}

Message par **Ymai** » 08 juil. 2006, 18:12

C'est peut-être du chipotage, mais:

Code : Tout sélectionner

#espace li {
padding-bottom: 2em;
margin-left: -3em;}

galad · Message par **galad** » 08 juil. 2006, 18:32

Ymai a écrit :C'est peut-être du chipotage, mais:
Code : Tout sélectionner
#espace li {
padding-bottom: 2em;
margin-left: -3em;}

Ca fonctionne, merci Ymai. j'ai même mis -4em. Je suppose que le nécessité de cette marge négative est en rapport avec l'absence de puce ... (comprenite aigüe ?) En tout cas, l'aperçu est satisfaisant sur les différents navigateurs.

Merci encore.

calimo · Message par **calimo** » 08 juil. 2006, 18:35

Ymai a écrit :[Je ne conteste pas, mais elle avait aussi demandé à ce que cela ne se passe que sur une partie de sa page.

Ah oui pardon au temps pour moi ça m'apprendra à lire

galad a écrit :Ca fonctionne, merci Ymai. j'ai même mis -4em. Je suppose que le nécessité de cette marge négative est en rapport avec l'absence de puce ... (comprenite aigüe ?) Je vais vérifier l'effet sur les différents navigateurs.

Non, elle doit probablement être due à un padding-left correspondant.

Mets plutôt :

Code : Tout sélectionner

#espace li {
padding-bottom: 2em;
margin-left: 0;
padding-left: 0;}

Sinon tu risques de te retrouver avec des retraits spectaculaires dans les navigateurs qui appliquent un margin (mais pas de padding) à gauche des listes (Opera ?)

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.4) Gecko/20060508 Firefox Firefox/1.5.0.4

galad · Message par **galad** » 08 juil. 2006, 18:51

calimo a écrit :
galad a écrit :Ca fonctionne, merci Ymai. j'ai même mis -4em. Je suppose que le nécessité de cette marge négative est en rapport avec l'absence de puce ... (comprenite aigüe ?) Je vais vérifier l'effet sur les différents navigateurs.
Non, elle doit probablement être due à un padding-left correspondant.

Mets plutôt :
Code : Tout sélectionner
#espace li {
padding-bottom: 2em;
margin-left: 0;
padding-left: 0;} 
Sinon tu risques de te retrouver avec des retraits spectaculaires dans les navigateurs qui appliquent un margin (mais pas de padding) à gauche des listes (Opera ?)

Calimo, je viens d'essayer avec ta solution et tout est re-décalé à gauche. Ca devient compliqué cette histoire

mais j'ai quelques visiteurs qui utilisent opéra.

Et si on reprenait avec une autre solution ?

Message par **Ymai** » 08 juil. 2006, 19:28

et avec

Code : Tout sélectionner

<style type="text/css">
#espace {
  margin: 0;
  padding: 0;
}
#espace li {
  padding-bottom: 2em;
  list-style-type: none;
}
#espace ul {
  border: 1px solid #ff0000;
}
</style>

galad · Message par **galad** » 08 juil. 2006, 19:53

toujours décalage ...

Message par **Ymai** » 08 juil. 2006, 20:14

Ce ne serait pas le text-align:center de #gauche qui ferait problème?
J'ai rajouté un text-align: left à #espace et, chez moi, la liste est parfaitement collée au bord gauche (trop, même).
Et tout ça avec KompoZer

, sans aucun souci...

Heuuuu... Ca donne quoi dans IE et dans Opera?

Code : Tout sélectionner

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title></title>
  <style type="text/css">
#conteneur {
  font-family: Verdana;
  font-size: 80%;
  color: #000080;
}

#bandeau {
  background-repeat: no-repeat;
  background-position: center top;
  height: 100px;
}

#gauche {
  border-style: double solid solid double;
  border-color: #000080;
  background-image: url(images/fond3.gif);
  float: left;
  width: 160px;
  font-size: 80%;
  padding-left: 2px;
  padding-right: 2px;
  text-align: center;
}

#centre {
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}

#droit {
  border-style: double solid solid double;
  border-color: #000080;
  text-align: center;
  background-image: url(images/fond3.gif);
  width: 160px;
  float: right;
  font-size: 80%;
  padding-left: 2px;
  padding-right: 2px;
}

#piedepage {
  float: none;
  position: relative;
}

li {
  list-style-type: none;
  font-weight: bold;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
  color: #663366;
}

a:hover {
  color: #ff0000;
}

#espace {
  margin: 0;
  padding: 0;
  background-color: #66ff99;
  text-align: left;
}

#espace li {
  padding-bottom: 2em;
}
  </style>
</head>
<body>
<div id="gauche">
<ul id="espace">
  <li>ligne 1</li>
  <li>ligne 2</li>
  <li>ligne 3</li>
</ul>
</div>
</body>
</html>

calimo · Message par **calimo** » 08 juil. 2006, 20:56

Il y a un endroit où on peut tester la page (histoire de pouvoir la passer à la moulinette d'Edit CSS) ?

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.4) Gecko/20060508 Firefox Firefox/1.5.0.4

galad · Message par **galad** » 08 juil. 2006, 22:13

voila ma page ici
le cadre rouge est le div modifié

Message par **Ymai** » 08 juil. 2006, 23:48

Sous FF, j'ajoute la règle

Code : Tout sélectionner

#espace ul { 
padding: 0;
text-align: left;
}

Ceci dit, je n'explique pas pourquoi

Code : Tout sélectionner

#espace { 
padding: 0;
text-align: left;
}

n'est pas suffisant.
Il me semblait que #espace ul devrait hériter de #espace

Geckozone

[resolu] interlignes dans une liste avec CSS

[resolu] interlignes dans une liste avec CSS

Qui est en ligne ?