Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

CSS: dans agrandir espace entre

2 réponses
Avatar
alainL
Bonjour,
J'essaie d'adapter un menu déroulant.
C'est à peu près calé mais je voudrais augmenter l'espace entre les
lignes(uniquement dans la liste). Je pensais naïvement à un <br> mais ça
ne va pas. Line-height semble agrandir la font et je ne peux pas (le div
menu des pages n'a que 20% du terrain pour s'épanouir :-)
Y a-t-il une autre solution ?
Merci
----------------------------------------------------------------
<style type="text/css">
ul ul {display: none; position: absolute; left: 110px; top: -1px;
margin:0px; padding: 0px; border: 2px solid yellow;}
li {list-style-type: none; position: relative; width: 110px;
/*background-color: green;*/ padding: 2px; margin: 0px}
li:hover, li.sfhover {background-color: #FFA500;}
li:hover ul.niveau2, li.sfhover ul.niveau2 {display: block}
li.plus {background-position:right; background-image:
url(illustrations/fdroite.gif); background-repeat: no-repeat;
border-bottom: 1px solid #B0B0B0;}
</style>

<ul class="niveau1">
<li><ahref="index.php">Accueil</a></li>
<li><ahref="albums.html" title="cartes postales et photos">Album
d'images</a>
<ul class="niveau2">
<li
class="plus"><ahref="Album/Anciennes/album/index.html">Anciennes</a></li>
<li><ahref="Album/Fetes/album/index.html">Evènements</a></li>
<li><ahref="Album/Visite/album/index.html">Paysages</a></li>
</ul>
</li>
<li><ahref="la_commune1.php" title="description, situation">La
commune</a></li>

etc ------------------------------------------------------------

--
AlainL

2 réponses

Avatar
alainL
Le 12/03/2015 11:20, alainL a écrit :
Bonjour,
J'essaie d'adapter un menu déroulant.
C'est à peu près calé mais je voudrais augmenter l'espace entre les
lignes(uniquement dans la liste). Je pensais naïvement à un <br> mais ça
ne va pas. Line-height semble agrandir la font et je ne peux pas (le div
menu des pages n'a que 20% du terrain pour s'épanouir :-)
Y a-t-il une autre solution ?
Merci
----------------------------------------------------------------
<style type="text/css">
ul ul {display: none; position: absolute; left: 110px; top: -1px;
margin:0px; padding: 0px; border: 2px solid yellow;}
li {list-style-type: none; position: relative; width: 110px;
/*background-color: green;*/ padding: 2px; margin: 0px}
li:hover, li.sfhover {background-color: #FFA500;}
li:hover ul.niveau2, li.sfhover ul.niveau2 {display: block}
li.plus {background-position:right; background-image:
url(illustrations/fdroite.gif); background-repeat: no-repeat;
border-bottom: 1px solid #B0B0B0;}
</style>

<ul class="niveau1">
<li><ahref="index.php">Accueil</a></li>
<li><ahref="albums.html" title="cartes postales et photos">Album
d'images</a>
<ul class="niveau2">
<li
class="plus"><ahref="Album/Anciennes/album/index.html">Anciennes</a></li>
<li><ahref="Album/Fetes/album/index.html">Evènements</a></li>
<li><ahref="Album/Visite/album/index.html">Paysages</a></li>
</ul>
</li>
<li><ahref="la_commune1.php" title="description, situation">La
commune</a></li>

etc ------------------------------------------------------------





OOOOPSS ! Ça marche avec line-height... J'avais dû oublier une virgule
qq part !
Bonne soirée

--
AlainL

http://autourdalos.fr
Avatar
Pascale Peyrol
Le Thu, 12 Mar 2015 20:50:19 +0100, alainL a écrit :

OOOOPSS ! Ça marche avec line-height... J'avais dû oublier une virgule
qq part !



Salut Alain,

Encore plus simple, tu utilises un padding-top et/ou un padding-bottom (ou
alors margin-top margin-bottom selon le résultat que tu veux avoir).

--
Pascale Peyrol
Kekcestruc, Le Jardin des Amis,
Mon Beau Jardin, frj-gazette, Raphia, Valinfo
et autres outils de jardin sont sur http://www.la-grille-verte.net

---
L'absence de virus dans ce courrier électronique a été vérifiée par le logiciel antivirus Avast.
http://www.avast.com