Discussion :

[noradan]

bonjour

j'ai une liste horizontale centrée. Les item de cette liste vont (dans le futur) ouvrir des sous-listes au survol.
Pour le moment je veux que ces sous-listes soient masquées.
J'ai donc logiquement écrit le code suivant
:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#nav { text-align: center; }
#nav li { display: inline; list-style: none;} /* horizontale et sans puce*/
#nav>li>div{display:none} /* pas d'affichage de div*/
#justif{margin-left:5px;text-align:justify}

et en html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<ul id="nav"><li><a href="#">Menu1</a></li>
                <div>
             <h3>sous-liste</h3>
                    <ul id="justif">    <!--je veux des item justifiés et pas centrés-->
                        <li><a  href="truc"> item</a></li>
                        <li>item</li>
                        ...
                    </ul>
                </div>  
                   <li><a href="#">Menu2</a></li>
</ul>

quelqu'un peut-il m'expliquer pourquoi mon display=none n'est pas appliqué ? "sous-liste" et les item apparaissent sur la page.

Il y a quelque chose dans la manière de fonctionner du html que je ne pige pas du tout. Il n'y a pas que ce "none" ; j'ai très souvent ce problème, par exemple une déclaration explicite de position n'est pas appliquée. Par exemple "center" ne centre que quand il veut ... les "inline", un coup ça marche, un coup ça marche pas. Ailleurs j'ai écrit explicitement p{text-align:justify}, parce que par défaut c'est centré et bien mon texte reste centré et html se contrefiche de mon justify etc
J'ai pourtant l'habitude d'un langage de description avec LaTeX que je manie très bien mais vraiment html je ne comprends pas

Merci pour toute explication.

[NoSmoking]

Bonjour,

quelqu'un peut-il m'expliquer pourquoi mon display=none n'est pas appliqué ?

mais avec grand plaisir, simplement car aucun élément dans ton code ne répond au sélecteur utilisé

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
#nav > li > div {
  display:none
}

... le sélecteur cible un élément <div> enfant direct d'un élément <li> lui même enfant direct d'un élément ayant pour id="nav", lecture de droite à gauche.
Reprend le code fourni, cet élément n’existe pas !

Il y a quelque chose dans la manière de fonctionner du html que je ne pige pas du tout.

Dans ce cas il faut revenir au base

Ailleurs j'ai écrit explicitement p{text-align:justify}, parce que par défaut c'est centré et bien mon texte reste centré et html se contrefiche de mon justify etc ...

... non, cela fonctionne très bien mais il faut que la justification puisse se justifier donc il faut au moins que le contenu dépasse la largeur du conteneur


Ressource :

• 6.1. Text Alignment: the text-align shorthand

[noradan]

Bon d'accord j'ai fermé mon "li" un peu trop tôt
mais ça n'a fait que reporter le problème.
Si en effet les listes sont masquées je veux quand même qu'elles apparaissent au survol. Or si j'ajoute

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
#nav>li:hover>div{display:flex;backgroung:#A57110}
#nav>li:hover{color:green}

le comportement est étrange car ma sous-liste n'apparait pas du tout au survol mais si je tire un peu sur "Menu1" de surcroît ce n'est pas "Menu1" qui apparait en vert mais le contenu du <div>
Je n'ai pourtant fait que recopier un truc qui fonctionne sur une autre page ou en effet

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
nav > ul > li > a {
    display: block;
    width: 150px;
    height: 40px;
    font-size:32px;
font-family:"carolingia"
  }
 
nav > ul > li > div{
    display: none;
    position: absolute;
    left: 0;
}
 
nav > ul >  li:hover > div{
    text-align:center;
    display: flex;
    background: #A57110;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<nav>
    <ul>
        <li> <a  href="#">Menu1</a>
            <div>
                <div id="liste">
                    <h3>sous-liste1</h3>
                    <ul id="justif">
                        <li><a href="#">item</a> </li>
                        <li><a href="#">item</a> </li>
                     </ul>
                 </div>
                 <div id="liste">
                    <h3>sous-liste</h3>

fonctionne!
Et je ne vois pas du tout la différence, hormis "#" ou pas "#"


Quand à mon <p> il est vrai qu'il contient des sauts de lignes <br> mais un texte justifié se doit d'aligner les débuts de toutes les lignes. Concrètement mon <p> contient 3 lignes et je veux qu'elles commencent toutes au même endroit.