Version complète: sur le forum Webmaster Hub : Régler interligne dans les listes...
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
nomasis
vendredi 24 juin 2005 à 11:32
Hello...
c'est un truc que j'ai jamais compris et qui ne m'ennuyait pas trop, mais là ce n'est pas le cas.
J'ai ce chti bout de code html :
CODE
<div id="menu">
 <span onclick="javascript:montre('smenu1');">Menu 1
     <ul id="smenu1">
       <li><a href="#">Sous-Menu 1.1</a></li>
       <li><a href="#">Sous-Menu 1.2</a></li>
       <li><a href="#">Sous-Menu 1.3</a></li>
       <li><a href="#">Sous-Menu 1.4</a></li>
       <li><a href="#">Sous-Menu 1.5</a></li>
       <li><a href="#">Sous-Menu 1.6</a></li>
</ul></span>

Ce qui donne :



Comment faire pour que Sous-Menu 1.1 soit en dessous de Menu 1 avec un interligne simple ?
Eric (11)
vendredi 24 juin 2005 à 12:21
Déjà menu1 devrait être compris entre des balises tel que <p></p> ou <Hn>/<hn>. Ensuite il te reste à utiliser les css pour gérer l'espace (margin) entre paragraphe (p) ou titre (hn) et liste (ul).

Cordialement, Eric.
Nissone
vendredi 24 juin 2005 à 12:38
Pour chipoter, à propos de Menu 1, je ne partage pas ton avis.
Menu 1 sous-entend qu'il y aura un Menu 2 ; c'est donc aussi une liste.

CITATION
<ul>
<li>Menu1
<ul>
<li>Sous-Menu 1.1</li>
<li>Sous-Menu 1.2</li>
</ul>
</li>

<li>Menu2
<ul>
<li>Sous-Menu 2.1</li>
<li>Sous-Menu 2.2</li>
</ul>
</li>
</ul>


Juste sur ce point. Pour la propriété margin, rien à redire wink.gif
Je crois qu'il est conseillé aussi de préciser le padding, parce que IE et FireFox/Mozilla ne donnent pas les espaces aux listes par défaut de la même manière. (Euh... Elle est compréhensible, ma phrase ?! wacko.gif )

Moi, par habitude, je mets d'office ul, li {padding:0; margin:0}. C'est à voir en fonction de ce qu'on préfère.
Sebastien
vendredi 24 juin 2005 à 13:07
Menu1 introduit aussi la section qui suit , utiliser une balise hn est donc aussi valable smile.gif
Nissone
vendredi 24 juin 2005 à 13:15
Autant pour moi ! smile.gif
nomasis
vendredi 24 juin 2005 à 13:26
crotte...
je m'en sors pas en fait.

Je m'y suis sans doute mal pris au départ.

Ce que je souhaite faire est simple, mais je dois certainement le compliquer :

Il y a 5 phrases cliquables qui font apparaître un texte en dessous
On clique sur la phrase 1, un texte apparait en dessous
Si on clique sur la phrase 2 cela fait apparaitre le texte et referme le texte de la phrase 1

J'avais donc idée au départ de faire ça avec des listes et un peu de javascript.

Voila le "pourquoi". Mais j'ai pas le "comment".

EDIT : eh pi, les CSS c'est un peu MasterMind pour moi
Mamat
vendredi 24 juin 2005 à 13:50
Un petit coup de pouce concret !
Dans ta page :
CODE
<div id="menu">
<div onclick="javascript:montre('smenu1');" id="menu">
<p>Menu 1</p> <!-- C'est un exemple lis ce que les autres ont dit là dessus -->
 <ul id="smenu1">
   <li><a href="#">Sous-Menu 1.1</a></li>
   <li><a href="#">Sous-Menu 1.2</a></li>
   <li><a href="#">Sous-Menu 1.3</a></li>
   <li><a href="#">Sous-Menu 1.4</a></li>
   <li><a href="#">Sous-Menu 1.5</a></li>
   <li><a href="#">Sous-Menu 1.6</a></li>
</ul></div>


et dans une feuille de style :
#menu p {margin: 0; padding 0;}
#menu ul {margin: 0; padding 0;}
#menu ul li {margin: 0; padding 0;}
un peu bourrin comme mèthode masi après tu adaptes !
nomasis
vendredi 24 juin 2005 à 14:31
CITATION(Mamat @ vendredi 24 juin 2005, 14h50)
Un petit coup de pouce concret !
....
un peu bourrin comme mèthode masi après tu adaptes !
*

bourrin, bourrin...
c'est toi qui l'dis.
Ça fait bien le job : http://nomasis.com/nomasis2.php

1] Sous IE le texte démarre fer à gauche, tandis que sous Firefox il y a une indentation.
Peut on mettre ça homogène ?

2] Sous IE Blink n'est pas reconnu semble t-il ? Et j'ai rien trouvé de simple pour que ça clignote. Auriez vous une idée ?

3] Le truc génant du script
CODE
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
    for (var i = 1; i<=10; i++) {
 if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
    }
if (d) {d.style.display='block';}
}
//-->
</script>

c'est que le dernier menu reste ouvert. Comment peut-on le refermer ?
nomasis
vendredi 24 juin 2005 à 15:44
Point 2 réglé...
mais comme je suppose que ça n'intéresse pas grand monde de faire clignoter des caractères dans IE...
par contre je suis toujours preneur pour l'alignement des li dans Firefox... smile.gif
Mamat
vendredi 24 juin 2005 à 15:48
Blink est proptiétaire de netscape si je dis pas de bétise donc a laisser tomber effectivement ;oD je ne pense pas que bcp d'internaute soit encore sur cet ancetre...
nomasis
vendredi 24 juin 2005 à 15:56
point réglé disais-je : ça marche
(voir http://nomasis.com/nomasis2.php)
Nissone
vendredi 24 juin 2005 à 15:58
<out of topic>Très chouette design ! :up: </out of topic>
nomasis
vendredi 24 juin 2005 à 16:23
ça me rappelle ma jeunesse wink.gif
Sebastien
vendredi 24 juin 2005 à 16:25
Super chouette en effet, je changerais juste les propriété de cursor au survol, qu'on voit où sont les liens wink.gif
nomasis
vendredi 24 juin 2005 à 16:31
euh... vous déconnez là ? wink.gif
vi vi le curseur je m'en charge....

par contre j'arrive pas dans firefox à mettre les li à gauche (sans indentation)
nomasis
vendredi 24 juin 2005 à 16:54
tiens, c'est curieux :
a:hover {
cursor: hand;
}
ne marche pas...
Mamat
vendredi 24 juin 2005 à 17:18
heu... mais c'est le comprotement par défaut !
nomasis
vendredi 24 juin 2005 à 17:20
?
Mamat
vendredi 24 juin 2005 à 17:21
He bien sauf erreur de ma part tous les liens ont un "curseur:main" ?
nomasis
vendredi 24 juin 2005 à 17:22
oui mais que je le mette ou pas il n'y a pas de main
Mamat
vendredi 24 juin 2005 à 17:24
Tu as défini un cursor sur le ul, peut-être viens-tu de découvrir un nouveau bug ;oD
nomasis
vendredi 24 juin 2005 à 17:27
ça me rassure pas
Mamat
vendredi 24 juin 2005 à 17:31
Ok cursor hand n'existe pas... c'est pointer ;oD
nomasis
vendredi 24 juin 2005 à 17:38
que ce soit hand ou pointer c'est pareil
Mamat
vendredi 24 juin 2005 à 17:39
Tiens donc chez moi pointer passe sur le body...
nomasis
vendredi 24 juin 2005 à 17:43
oui je viens de le corriger
mais sur le lien, macache...
nomasis
vendredi 24 juin 2005 à 18:20
réglé avec un span...
ouf !
Nissone
samedi 25 juin 2005 à 08:21
cursor:hand c'est pour IE et cursor:pointer c'est pour FireFox ... ou l'inverse ! laugh.gif
C'est donc les deux qu'il faut mettre pour être compatible. (mais je ne me rappelle plus si l'ordre dans lequel on les met a une importance ou non unsure.gif )
Xavier
samedi 25 juin 2005 à 16:18
Pensez aux spécifications ! C'est là qu'on trouve tout biggrin.gif
En l'occurence : http://www.yoyodesign.org/doc/w3c/css2/ui.html#cursor-props

Donc le doigt c'est cursor:pointer. IE est sorti d'on ne sait où et nécessite un cursor:hand qui n'a jamais existé nulle part... huh.gif

Pour l'ordre logiquement un navigateur doit ignorer une propriété qu'il ne connaît pas.
Mamat
samedi 25 juin 2005 à 16:31
Oui c'est bien ce que je pensais... ha sacré ie on en apprend tous les jours avec lui ;oD
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.