[resolu] interlignes dans une liste avec CSS
Modérateur : chinon37
[resolu] interlignes dans une liste avec CSS
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.
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>
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"
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Ymai a écrit :On pourrait aussi mettre [un code sans div] si l'on souffre de "div-ite"
Parce que ça c'est pas de la divite ? (Note : ça ne sert à rien de me le rappeler, je suis atteint de strictite )Ymai a écrit :Code : Tout sélectionner
<body> <div>qsdfqsdf </div> dddqsdf<br>
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
Je ne conteste pas, mais elle avait aussi demandé à ce que cela ne se passe que sur une partie de sa page.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; }
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]
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
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;
}
Code : Tout sélectionner
#espace li {
padding-bottom: 2em;
margin-left: -3em;}
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
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.Ymai a écrit :C'est peut-être du chipotage, mais:Code : Tout sélectionner
#espace li { padding-bottom: 2em; margin-left: -3em;}
Merci encore.
Ah oui pardon au temps pour moi ça m'apprendra à lireYmai a écrit :[Je ne conteste pas, mais elle avait aussi demandé à ce que cela ne se passe que sur une partie de sa page.
Non, elle doit probablement être due à un padding-left correspondant.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.
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
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.calimo a écrit :Non, elle doit probablement être due à un padding-left correspondant.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.
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 ?)
Et si on reprenait avec une autre solution ?
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>
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
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>
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Code : Tout sélectionner
#espace ul {
padding: 0;
text-align: left;
}
Code : Tout sélectionner
#espace {
padding: 0;
text-align: left;
}
Il me semblait que #espace ul devrait hériter de #espace
« Un enfant de cinq ans comprendrait cela ! Allez me chercher un enfant de cinq ans ! »
Groucho Marx.
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité