cerhu > comp.divers.* > comp.infosystemes.www.auteurs

AlainL (30/11/2018, 15h35)
Bonjour,
Dans un menu déroulant j'utilise la balise <li>
L'intervalle entre les lignes me convient...
mais l'un des titres/liens (le 2e ci-dessous) occupe trois lignes ce qui
induit un certain cafouillage !

<li><a href="salle_polyvalente.php" title="salle polyvalente">Salle
polyvalente</a></li>

<li><a href="economie.php" title="entreprises, artisans">Acteurs
économiques et associatifs</a></li>

<li><a href="environnement1.php" title="assainissement, aménagement"
>Environnement</a></li>


Est-il possible de réduire l'intervalle entre les lignes utilisées dans
un <li>

Le menu, appelé par <include>, apparaît sur la page
[..]

Merci

alainL
Duzz' (30/11/2018, 15h59)
Le 30/11/2018 à 14:35, AlainL a écrit :
[..]
> un <li>
> Le menu, appelé par <include>, apparaît sur la page
> [..]


Dans le CSS de la balise <li> ajouter :

margin-top: 10px;
line-height: 15px;
AlainL (30/11/2018, 17h01)
Le 30/11/2018 à 14:59, Duzz' a écrit :
> Le 30/11/2018 à 14:35, AlainL a écrit :
> Dans le CSS de la balise <li> ajouter :
> margin-top: 10px;
> line-height: 15px;


Je l'ai déjà dans le css et ça définit l'interligne entre les <li>. Moi
je voudrais diminuer l'interligne seulement en cas de saut à la ligne
pour un titre/lien trop long

voici la feuille de style du menu

#menu ul ul {display: none; position: absolute; left: 127px; top: -1px;
margin:0; padding: 0; border: 2px solid yellow;}

#menu li {list-style-type: none; position: relative; width: 125px;
padding: 2px; margin: 0; line-height:30px;}

#menu li:hover, #menu li.sfhover {background-color: #7FFFD4;}

#menu li.plus {list-style-type:none; width:125px; padding-left:5px;
background-position:right; background-image:
url(illustrations/fdroite.gif); background-repeat: no-repeat;
border-bottom: 1px solid #B0B0B0;}

#menu li:hover ul.niveau2, #menu li.sfhover ul.niveau2 {display: block;}
Duzz' (30/11/2018, 17h17)
Le 30/11/2018 à 16:01, AlainL a écrit :
> Le 30/11/2018 à 14:59, Duzz' a écrit :
> Je l'ai déjà dans le css et ça définit l'interligne entre les <li>. Moi
> je voudrais diminuer l'interligne seulement en cas de saut à la ligne
> pour un titre/lien trop long


Dans ton CSS tu as "margin" et non "margin-top".

Voici la capture d'écran du résultat que j'obtiens dans Firefox avec
cette modification du CSS :
<http://news.nemoweb.net/jntp/8a7eb56f94712c398dfb8585c9686bf6de2b31a0/Data/Media:1>
AlainL (30/11/2018, 17h51)
Le 30/11/2018 à 16:17, Duzz' a écrit :
> Le 30/11/2018 à 16:01, AlainL a écrit :
> Dans ton CSS tu as "margin" et non "margin-top".
> Voici la capture d'écran du résultat que j'obtiens dans Firefox avec
> cette modification du CSS :
> <http://news.nemoweb.net/jntp/8a7eb56f94712c398dfb8585c9686bf6de2b31a0/Data/Media:1>


Merci. C'est bon dans Ffx mais ça persiste dans Chrome !
AlainL (30/11/2018, 17h54)
Le 30/11/2018 à 16:51, AlainL a écrit :
> Le 30/11/2018 à 16:17, Duzz' a écrit :
> Merci. C'est bon dans Ffx mais ça persiste dans Chrome !


C'est bon ! Il m'a juste fallu vider le cache !

Bonne soirée

alainL
Nicolas George (30/11/2018, 18h11)
Duzz' , dans le message
<d6e69d9f4021d86254b1183dff423749287ebc1b>, a écrit :
> margin-top: 10px;
> line-height: 15px;


*PAF* pour l'utilisation de tailles absolues en pixels.
Duzz' (30/11/2018, 18h15)
Le 30/11/2018 à 16:51, AlainL a écrit :
> Le 30/11/2018 à 16:17, Duzz' a écrit :
> Merci. C'est bon dans Ffx mais ça persiste dans Chrome !


Il y a effectivement une différence dans le traitement de "line-height",
entre FF et Chrome.
Je n'ai pas de solution testée à proposer, mais tu peux essayer avec :

line-height: 1.2;
ou
line-height: 100%;
Duzz' (30/11/2018, 18h18)
Le 30/11/2018 à 17:11, Nicolas George a écrit :
> Duzz' , dans le message
> <d6e69d9f4021d86254b1183dff423749287ebc1b>, a écrit :
>> margin-top: 10px;
>> line-height: 15px;

> *PAF* pour l'utilisation de tailles absolues en pixels.


Et sinon, quelque chose d'utile à ajouter ?
Sergio (30/11/2018, 19h03)
Le 30/11/2018 à 14:35, AlainL a écrit :
> Bonjour,
> Dans un menu déroulant j'utilise la balise <li>
> L'intervalle entre les lignes me convient...
> mais l'un des titres/liens (le 2e ci-dessous) occupe trois lignes ce qui induit un certain cafouillage !
> <li><a href="salle_polyvalente.php" title="salle polyvalente">Salle polyvalente</a></li>
> <li><a href="economie.php" title="entreprises, artisans">Acteurs économiques et associatifs</a></li>
> <li><a href="environnement1.php" title="assainissement, aménagement" >Environnement</a></li>
> Est-il possible de réduire l'intervalle entre les lignes utilisées dans un <li>
> Le menu, appelé par <include>, apparaît sur la page
> [..]


Mettre une css sur la balise <li>...

genre:

<style type="text/css">
li {<!--- .... style de <li> -->
</style>

Par contre tu pourrais mettre un <title> différents "Accueil" : ça mettre "accueil" aussi comme titre d'un marque-page... Mets plutôt quelque chose comme "Alos-Sibas-Abense"
Duzz' (30/11/2018, 19h06)
Le 30/11/2018 à 14:35, AlainL a écrit :
> Le menu, appelé par <include>, apparaît sur la page
> [..]


Il y a un problème de CSS sur cette page qui m'affiche trois ascenseurs à
droite ... ;)
Probablement des "overflow: auto;" en trop quelque part.
Sergio (30/11/2018, 19h11)
Le 30/11/2018 à 14:59, Duzz' a écrit :
> Le 30/11/2018 à 14:35, AlainL a écrit :
> Dans le CSS de la balise <li> ajouter :
> margin-top: 10px;
> line-height: 15px;


Plutôt agir sur la largeur du conteneur, la classe "niveau1".

Sinon, critique au niveau sémantiques : pas besoin de mettre de majuscule à "Èlus" dans "Les Élus". (je crois que "Les Élus" s'applique uniquement aux saints du paradis...).
Nicolas George (30/11/2018, 20h05)
Duzz' , dans le message
<3b38600e5651e59e92b45a99980a4c3560a039ac>, a écrit :
> Et sinon, quelque chose d'utile à ajouter ?


À l'adresse de quelqu'un qui réagit ainsi ? Non, aucune chance.
Duzz' (30/11/2018, 20h08)
Le 30/11/2018 à 19:05, Nicolas George a écrit :
> Duzz' , dans le message
> <3b38600e5651e59e92b45a99980a4c3560a039ac>, a écrit :
>> Et sinon, quelque chose d'utile à ajouter ?

> À l'adresse de quelqu'un qui réagit ainsi ? Non, aucune chance.


C'est bien ce que je pensais, juste du caquetage sans le moindre intérêt,
comme d'hab'.
AlainL (30/11/2018, 20h23)
Le 30/11/2018 à 18:06, Duzz' a écrit :
> Le 30/11/2018 à 14:35, AlainL a écrit :
>> Le menu, appelé par <include>, apparaît sur la page
>> [..]

> Il y a un problème de CSS sur cette page qui m'affiche trois ascenseurs à
> droite ... ;)
> Probablement des "overflow: auto;" en trop quelque part.


Bon, j'ai ramené mes élus chez les mortels, pas de parti-pris politique!

Pour les ascenseurs, j'en ai encore 2 alors que je n'ai qu'un seul
overflow....

html, body {
height: 100%;
width: 100%;
overflow: auto;
}
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
background-image: url("Images/fond_degrade.gif");
background-repeat: repeat-y;
color : #000000;
}
#contenu {
height: 100%;
margin-left: 20%;
/* overflow: auto; */
color: #000000;
}

Discussions similaires
balise map

Editeur WYSIWYG : balise P ou balise DIV

Balise

balise <a rel> ?


Fuseau horaire GMT +2. Il est actuellement 23h10. | Privacy Policy