[Résolu] Création d'un menu horizontal et déroulant avec CSS

Azad · Le 19/05/2015, à 19:35

Bonjour,

Je m’intéresse au développement web. Je débute. J'essaye d'apprendre les bases des langages HTML et CSS, En parallèle j'essaye de construire une petite site d'internet avec du HTML et CSS sans utilisation de JavaScript ou bootstrap.

J'utilise que Bluefish ou Gedit pour travailler. Je ne veux pas passer par les systèmes CMS genre Wordpress, Joomla ou Drupal mais je les ai installés quoi même sur mon pc pour voir a quoi ils ressembles et pour faire des exercices.

Je ne maîtrise pas non plus les logiciels Bluegriffon, Netbeans, Eclipse ou autres logiciels de type IDE ou WYSIWYG mais je les ai installés quoi même sur mon pc pour voir a quoi ils ressembles.

Pour le moment les langages HTML et CSS et un bon éditeurs (Gedit ou Bluefish de préférence) et la méthode "artisanale" me paré la plus simple et le mieux adapter pour bien débuter et apprendre ! Quoi que je ne suis pas sur d'être sur le bon chemin ?

Depuis un mois je fait que des recherches, de lectures et je regarde des tutoriels vidéos sur le net pour bien comprendre/apprendre mais j'ai le sentiment d'être face a un océan d'informations sur le sujet qui diffère d'un site a l'autre, d'une personne a autre. Alors je suis un peu perdue !

J'ai plusieurs questions sur le sujet, aujourd’hui mes questions sont autour de la création et organisation d'un menu horizontal et déroulant avec CSS sans utilisation de JavaScript.

Mes questions:
-Est-il obligatoire de placer un menu dans un<div><ul><li><a...>...</a></li></ul></div> ou <nav><ul><li><a...>...</a></li></ul></nav> ?
-Est-il obligatoire de placer un menu dans un <ul><li><a ...>...</a></li></ul> ?
-Est-il pas suffisant de placer un menu dans un <ul><li>...</li></ul> sans création d'un <div></div>, <nav></nav> ou <a...>...<a/> ?
-Quelle est la méthode la plus simple, la plus écologique en terme de temps de lancement et d’énergie dépensée pour un page simple en couleurs de bases (noir et blanc) avec des lignes et boites simple ?
-Avez-vous la connaissance de quelque liens de sites web en français conforme et a jour des standards de w3c a me conseille ?
-Pouvez-vous analyser cette exemple simple d'un menu a deux niveaux que j'essaye de réaliser mais que je n’arrive pas faire afficher les sous menu et de me dire ou sont mes erreurs ?

Le fichier index.html:

<!DOCTYPE html>
<html>
<head>
<title>A</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="s.css" type="text/css">
</head>
<body>
<ul>
<li class="l1"><a href="a.html">A</a></li>
<li class="l1"><a href="b.html">B</a></li>
<li class="l1"><a href="c.html">C</a></li>
<li class="l1"><a href="d.html">D</a>
<ul class="l2">
<li><a href="e.html">E</a></li>
<li><a href="f.html">F</a></li>
<li><a href="g.html">G</a></li>
</ul></li>
<li class="l1"><a href="h.html">H</a>
<ul class="l2">
<li><a href="i.html">I</a></li>
<li><a href="j.html">J</a></li>
<li><a href="k.html">K</a></li>
<li><a href="l.html">L</a></li>
</ul></li>
<li class="l1"><a href="m.html">M</a></li>
<li class="l1"><a href="n.html">N</a></li>
</ul>
</body>
</html>

Le fichier style.css:

ul
{
list-style: none;
margin: 0px;
padding: 0px;
}
.l1
{
float: left;
border: 1px solid black;
width: 150px;
margin-right: 10px;
}
.l2
{
position: absolute;
margin-top: 1px;
margin-left: 1px;
display: none;
}
.l2 li
{
border: 1px black;
background: white;
width: 150px;
margin-top: 1px;
}
.li:hover > .l2
{
display: block;
}

Merci d'avoir pris le temps de me lire.

Dernière modification par Azad (Le 20/05/2015, à 22:31)

Compte anonymisé · Le 19/05/2015, à 20:22

Bonsoir,
Une bonne doc complète avec des exemples http://www.w3schools.com/ en anglais, mais ça aide bien.

Pour du HTML5 pur : http://www.w3schools.com/html/default.asp

Cdt

Rufus T. Firefly · Le 19/05/2015, à 20:33

Salut,

Un très bon site pour ce genre de choses : http://www.alsacreations.com/
Par exemple : http://www.alsacreations.com/tuto/lire/ … n-CSS.html

A part ça, ton indentation (facultative) n'est pas logique :

<ul>
    <li class="l1"><a href="a.html">A</a></li>
    <li class="l1"><a href="b.html">B</a></li>
    <li class="l1"><a href="c.html">C</a></li>
    <li class="l1"><a href="d.html">D</a>
<ul class="l2">
    <li><a href="e.html">E</a></li>
    <li><a href="f.html">F</a></li>
    <li><a href="g.html">G</a></li>
</ul></li>
...

Plutôt ça, où l'on voit immédiatement qui est dans quoi :

<ul>
    <li class="l1"><a href="a.html">A</a></li>
    <li class="l1"><a href="b.html">B</a></li>
    <li class="l1"><a href="c.html">C</a></li>
    <li class="l1"><a href="d.html">D</a>
        <ul class="l2">
            <li><a href="e.html">E</a></li>
            <li><a href="f.html">F</a></li>
            <li><a href="g.html">G</a></li>
        </ul></li>
...

Dernière modification par Rufus T. Firefly (Le 19/05/2015, à 20:37)

J5012 · Le 19/05/2015, à 20:59

dans le css tu as une grosse erreur d'heritage entre ul et li , par rapport à leur ordonnance logique dans le fichier html

les imbrications de ul et li en code html devraient afficher un menu vertical fixe et non deroulant, mais meme celui-ci ne s'affiche pas : juste en dessous de D, tu crees un menu l2 qui est quoi ? → un sous-menu de qui ? ou un menu du cote droit par rapport au premier ? seulement qui est imbriqué dans le premier ul (pas de ul fermant) ? pour le navigateur cette imbrication est incomprehensible : resultat il considere ce bout de code et les suivants comme du texte au mieux, au pire rien ne s'affiche ...

ton code devrait etre du genre

<ul menu1>
  <li option1>url option1</li>
  <li option2>url option2</li>
</ul>
<ul menu2>
  <li option1>url option1</li>
  <li option2>url option2</li>
</ul>

dans le css, l'option display:block doit etre declaree pour menu1 et menu2
si tu regroupes menu1 et menu2 dans une div, tu pourras associer l'option display:block à cette balise div

puisque tu veux apprendre à programmer en partant de la base , la methode éprouvée est :
- tu maitrises le html 3.2 , les recommendations html4 et 5 sont optionnelles, cette maitrise est tres importante, ne la neglige pas : ca t'evitera le genre d'erreur bete et basique que tu as fait avec l'imbrication de ul et li ...

- ensuite tu dois comprendre comment le javascript s'articule avec le code html, ce qu'il permet de faire, de comprendre quand et comment l'utiliser à bon escient ...

- en dernier vient le css avec les balises de la recommendation html4/5 , par ex coder du css sans utiliser de balise div est tres compliqué voire non possible dans certaines situations

on peut resumer html, js, css par :
- html est un langage de placement de contenu (textes, images, medias, formulaires)
- javascript est un outil de manipulation de ces contenus (menu deroulant, boutons animés, etc)
- css est un ensemble de regles de mise en forme du contenu, regles manipulables par javascript (css inline + javascript inline : modifier l'affichage en fonction d'une entrée dans un formulaire)

le site w3schools est une bonne adresse pour commencer

Dernière modification par J5012 (Le 19/05/2015, à 21:00)

Azad · Le 19/05/2015, à 23:10

@jojo81 : Merci pour le lien.

@Rufus T. Firefly : Merci pour le lien et la remarque concernant l'indentation, ça m'a permis de mieux comprendre l'indentation, même si c'est facultatif, mais important pour un bon visibilité et pour se retrouver plus facilement dans le code.

@J5012 : Merci pour ton analyse détaillé et pour tes conseilles.

J5012 a écrit :

...juste en dessous de D, tu crées un menu l2 qui est quoi ? → un sous-menu de qui ? ou un menu du cote droit par rapport au premier ? seulement qui est imbriqué dans le premier ul (pas de ul fermant) ?…

Pour être honnête je ne pas bien compris ce que tu veux dire. Je n'ai pas bien compris parce que je ne maîtrise pas encore le langage HTML et le langage CSS, mais les termes ( héritage entre ul et li, les imbrications de ul et li, comment le javascript s'articule avec le code html, quand et comment l'utiliser à bon escient ...etc) que tu a utilisé me permettront au mieux faire des recherches sur les sujets en questions.

Veux tu dire que le code HTML doit être comme celui ci:

<!DOCTYPE html>
<html>
<head>
<title>A</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div>
<ul menu1>
<li><a href="a.html">A</a></li>
<li><a href="b.html">B</a></li>
<li><a href="c.html">C</a></li>
<li><a href="d.html">D</a></li>
<ul menu2>
<li><a href="e.html">E</a></li>
<li><a href="f.html">F</a></li>
<li><a href="g.html">G</a></li>
</ul>
<li><a href="h.html">H</a></li>
<ul menu2>
<li><a href="i.html">I</a></li>
<li><a href="j.html">J</a></li>
<li><a href="k.html">K</a></li>
<li><a href="l.html">L</a></li>
</ul>
<li><a href="m.html">M</a></li>
<li><a href="n.html">N</a></li>
</ul>
</div>
</body>
</html>

?

Dernière modification par Azad (Le 19/05/2015, à 23:20)

Rufus T. Firefly · Le 20/05/2015, à 00:24

Le code ne doit pas être comme ci ou comme ça... Tout dépend du résultat que tu veux obtenir.
En gros, le html c'est la structure et le contenu. Les css, c'est juste la décoration...

Regarde par exemple le forum ubuntu, et fais, dans firefox, affichage -> style de la page -> aucun style.
Là tu vois ce que donne le html, une fois traité par le navigateur. La seule différence avec la vue habituelle, c'est qu'il n'y a plus les css...
Tu peux aussi installer l'extension firebug (modules complémentaires firefox) et regarder le code la page de près et les css associées à chaque élément (et d'autres choses encore). Tu peux même changer des choses et voir ce que ça fait...

Si ta page est bien conçue elle est aussi facilement utilisable sans css qu'avec. Bien sûr, c'est moins joli...

Pour ton code, au-dessus, il suffit de le mettre dans un fichier, test.htm par exemple, et ouvrir ce fichier avec le navigateur. Si la structure correspond à ce que tu veux faire, c'est bon (aux erreurs près, genre balise fermante qui manque, ou des trucs comme ça).

Edit : une erreur à ne pas faire, c'est de fourrer des balises <div> partout. Donc, bien étudier et comprendre la différence entre balises blocs et balises inline ainsi que la notion de flux...

Dernière modification par Rufus T. Firefly (Le 20/05/2015, à 00:30)

bruno · Le 20/05/2015, à 13:26

Bonjour,

-Est-il obligatoire de placer un menu dans un<div><ul><li><a...>...</a></li></ul></div> ou <nav><ul><li><a...>...</a></li></ul></nav> ?

Non, mais la balise <nav> en HTML5 donne du sens à ton code : c'est un bloc servant à la navigation

-Est-il obligatoire de placer un menu dans un <ul><li><a ...>...</a></li></ul> ?

Non, mais d'un point de vue sémantique ce que tu fait est une liste de liens. Il est donc logique et recommandé d'utiliser le balisage des listes.

Ton code HTML est correct mais peu lisible car mal indenté, voici une identification correcte :

<ul>
    <li class="l1"><a href="a.html">A</a></li>
    <li class="l1"><a href="b.html">B</a></li>
    <li class="l1"><a href="c.html">C</a></li>
    <li class="l1"><a href="d.html">D</a>
        <ul class="l2">
            <li><a href="e.html">E</a></li>
            <li><a href="f.html">F</a></li>
            <li><a href="g.html">G</a></li>
        </ul>
    </li>
    <li class="l1"><a href="h.html">H</a>
        <ul class="l2">
            <li><a href="i.html">I</a></li>
            <li><a href="j.html">J</a></li>
            <li><a href="k.html">K</a></li>
            <li><a href="l.html">L</a></li>
        </ul>
    </li>
    <li class="l1"><a href="m.html">M</a></li>
    <li class="l1"><a href="n.html">N</a></li>
</ul>

Un code CSS minimal pour faire fonctionner le « déroulement des sous-menu au survol :

/* les sous menus ne sont pas affichés*/
.l2 {
    display:none;
}
/* un survol d'un élément provoque l'affichage du sous-menu imbriqué */
li:hover .l2 {
    display:block;
}

Dernière modification par bruno (Le 20/05/2015, à 13:27)

Compte anonymisé · Le 20/05/2015, à 15:20

Pour le CSS, si il s'agit de quelques lignes, l'utilité d'une feuille\ de\ style.css séparée n'est pas forcément justifiée. Vous pouvez aussi faire

<balise style="untruc:dimensions;"></balise> <!-- On met dans les balises par l'attribut style la mise en forme -->

par fainéantise.
Cdt

Rufus T. Firefly · Le 20/05/2015, à 15:37

Tout de suite les mauvais conseils...
Si tu ne comptes faire qu'une seule page html dans ta vie, ok...
Mais cette façon de faire transforme la modification d'un site de plusieurs pages, ou sa maintenance en véritable casse-tête... C'est vraiment la pire manière de faire !

Compte anonymisé · Le 20/05/2015, à 16:10

Pas de soucis, je disais que c'était possible de faire ainsi. Je n'ai pas dit que c'était à faire.

Azad · Le 20/05/2015, à 17:20

@Rufus T. Firefly:

Rufus T. Firefly a écrit :

Le code ne doit pas être comme ci ou comme ça... Tout dépend du résultat que tu veux obtenir.

Oui, je comprends. Ce que je veux est un menu horizontal de sept (7) éléments (A,B,C,D,H,M,N). Élément D contient trois (3) sous éléments (E,F,G). Élément H contient quatre (4) sous élément (I,J,K,L). Je veux que au passage de la souris sur éléments parent D et H leur sous éléments se déplie, s'affiche, qu'il fasse même hauteur et même largeur de leurs parents et qu'il ce place en sous leurs parents en verticale.

Rufus T. Firefly a écrit :

...le html c'est la structure et le contenu. Les css, c'est juste la décoration..

Oui ça j'ai bien compris.

Rufus T. Firefly a écrit :

Tu peux aussi installer l'extension firebug (modules complémentaires firefox) et regarder le code la page de près et les css associées à chaque élément (et d'autres choses encore). Tu peux même changer des choses et voir ce que ça fait…

C'est déjà fait.

Rufus T. Firefly a écrit :

Pour ton code, au-dessus, il suffit de le mettre dans un fichier, test.htm par exemple, et ouvrir ce fichier avec le navigateur. Si la structure correspond à ce que tu veux faire, c'est bon (aux erreurs près, genre balise fermante qui manque, ou des trucs comme ça).

Oui, je sais faire ça aussi.

Rufus T. Firefly a écrit :

...bien étudier et comprendre la différence entre balises blocs et balises inline…

Oui, en théorie je comprends la différence entre balises blocs et balises inline .

Rufus T. Firefly a écrit :

...ainsi que la notion de flux…

La notion de flux…? Je vais voir ça de plus prés de que je peux pour comprendre ce que tu veux dire par “la notion de flux”.

Rufus T. Firefly a écrit :

...une erreur à ne pas faire, c'est de fourrer des balises <div> partout.

Justement en tant que débutent j’essaye de déduire au minimum l'utilisation des balises que je ne maîtrise pas encore. C'est la raison pour laquelle je demandais s’il est obligatoire d'utiliser la balise <div>, <nav> ou <a>. Mais au fur et à mesure en parallèle avec mon niveau d'avancement je peux me permettre de faire des pages plus complexe.

Merci pour tes conseils avisés.

@bruno:

bruno a écrit :

Ton code HTML est correct mais peu lisible car mal indenté, voici une identification correcte :

Oui, après la remarque de @Rufus T. Firefly (post #3) j'ai compris et j'ai faite la modification.

bruno a écrit :

Un code CSS minimal pour faire fonctionner le « déroulement des sous-menu au survol :

Avec ton code CSS minimal le menu et verticalement correcte et parfaitement fonctionnelle.

-Maintenant je dois supprimer les points qui sont au début (a gauche) d'éléments (je crois que c'est ''list-style: none;'') !
-Placer les éléments de menu en horizontale ( je crois que c'est ''float: left;'') !
-Supprimer les marges interne et externe (je crois que c'est avec ''marging: 0px;'' et ''padding: 0px'')!
-Appliquer divers règles pour la hauteur des boites et de texte, la largeur (width), les couleurs d'éléments ...etc pour que le menu prend tout la largeur de la page et qu’ils adaptent a la largeur total des navigateurs et de type d'écran smartphone, tablette, pc portable ou pc bureau ((dite; site responsive) ...etc.

C'est exactement a ce niveau (la mise en forme avec le CSS) que tout se complique pour moi.

@jojo81:

jojo81 a écrit :

Pour le CSS, si il s'agit de quelques lignes, l'utilité d'une feuille\ de\ style.css séparée n'est pas forcément justifiée. Vous pouvez aussi faire
<balise style="untruc:dimensions;"></balise> 
par fainéantise.

Oui, je savais (en théorie) qu’on peut aussi définir les réglés de CSS dans le fichier HTML, dans <head> ou dans <body> mais faire un fichier style a par et conseiller donc je préfère suivre les '“standards”'.

Je crois que je vais retourner a étudié le HTML et sur tout le CSS.

Merci pour les liens (même que je connaissais déjà les sites en question), vos conseils et pour votre aide précieuse et avisée.

Dernière modification par Azad (Le 20/05/2015, à 17:38)

Rufus T. Firefly · Le 20/05/2015, à 20:44

Farfouille là-dedans, c'est une véritable mine de renseignements : http://www.alsacreations.com/

Par exemple : http://www.alsacreations.com/article/li … tie-1.html
ou ça : http://www.alsacreations.com/tuto/lire/ … ligne.html

Dernière modification par Rufus T. Firefly (Le 20/05/2015, à 20:49)

Azad · Le 20/05/2015, à 22:17

@Rufus T. Firefly:

Rufus T. Firefly a écrit :

Farfouille là-dedans, c'est une véritable mine de renseignements : http://www.alsacreations.com/
Par exemple : http://www.alsacreations.com/article/li … tie-1.html
ou ça : http://www.alsacreations.com/tuto/lire/ … ligne.html

Oui, merci.

Azad · Le 20/05/2015, à 22:28

Finalement voici le code CSS minimal dans mon cas c'est:

ul{
list-style: none;
margin: 00px;
padding: 00px;
}
.l1{
float: left;
}
.l2{
display: none;
}
li:hover .l2{
display:block;
}

Bien sur que après on peut ajouter ce qu on veux; bordure, hauteur, largeur, couleur ... etc.

Dernière modification par Azad (Le 23/05/2015, à 17:47)

Rufus T. Firefly · Le 21/05/2015, à 12:43

Personnellement je n'aime pas trop float. D'aimer ou de ne pas aimer, ce n'est pas un bon critère, évidemment. Et float est bien utile...
Mais float est un truc délicat, parce que ça sort les trucs du flux standard, parfois le résultat est un peu inattendu et ce n'est pas toujours très facile de trouver pourquoi. Quand tu n'as que 2 ou 3 bricoles sur ta page, ça peut passer. Mais quand tu auras une vraie page, avec des tas de choses dessus, tu verras des éléments positionnés à des endroits où ils ne devraient pas du tout être, tout simplement à cause d'un float quelque part...

Il y a une autre raison : les éléments <li> sont par définition des blocs. C'est-à-dire que leur css par défaut (toutes les balises en ont une) est :

li {
  display: block;
}

Donc si on veut un autre comportement, le plus logique est de modifier la propriété display, si possible...
Et en l'occurrence ça l'est :

li {
  display: inline-block;
}

Et ça, ça n'a pas du tout les inconvénients d'un float, en particulier parce que les <li> restent dans le flux standard...

Un bon conseil : fais ta page d'abord, avec par exemple un bloc d'en-tête, un bloc de menu, un bloc de contenu, un bloc de pied de page, et tout ce que tu veux. L'idée étant d'organiser le html de la manière la plus logique possible. Pour voir si c'est bon, tu contrôles avec un navigateur.
Tu ne passes à la mise en forme (donc aux css) que quand ta page est terminée et bonne.

Azad · Le 21/05/2015, à 15:21

Je te comprends et je veux bien suivre tes conseilles mais quand je place un ''display: block;'' a la place de ''float: left;'' le menu se positionne en verticale, et un ''display: inline-block;'' a la place de ''float: left;'' ne modifie pas la positionne horizontale de menu (qui est un bon signe) mais les sous menu s’ouvrent vers le haut au lieu de s'ouvrir vers le bas!

Mais si tu peux me montrer avec un exemple concret (par exemple dans mon cas), comment tu aurais organise ton code HTML et le CSS ? Peut être que je comprendrai mieux ce que tu veux dire, je comprendrai mieux comment faire.

Mais je tiens en compte tout tes conseilles technique et je fait de recherches en parallèle, je te remercie.

Dernière modification par Azad (Le 23/05/2015, à 17:45)

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 19/05/2015, à 19:35

[Résolu] Création d'un menu horizontal et déroulant avec CSS

#2 Le 19/05/2015, à 20:22

Re : [Résolu] Création d'un menu horizontal et déroulant avec CSS

#3 Le 19/05/2015, à 20:33

Re : [Résolu] Création d'un menu horizontal et déroulant avec CSS

#4 Le 19/05/2015, à 20:59

Re : [Résolu] Création d'un menu horizontal et déroulant avec CSS

#5 Le 19/05/2015, à 23:10

Re : [Résolu] Création d'un menu horizontal et déroulant avec CSS

#6 Le 20/05/2015, à 00:24

Re : [Résolu] Création d'un menu horizontal et déroulant avec CSS

#7 Le 20/05/2015, à 13:26

Re : [Résolu] Création d'un menu horizontal et déroulant avec CSS

#8 Le 20/05/2015, à 15:20

Re : [Résolu] Création d'un menu horizontal et déroulant avec CSS

#9 Le 20/05/2015, à 15:37

Re : [Résolu] Création d'un menu horizontal et déroulant avec CSS

#10 Le 20/05/2015, à 16:10

Re : [Résolu] Création d'un menu horizontal et déroulant avec CSS

#11 Le 20/05/2015, à 17:20

Re : [Résolu] Création d'un menu horizontal et déroulant avec CSS

#12 Le 20/05/2015, à 20:44

Re : [Résolu] Création d'un menu horizontal et déroulant avec CSS

#13 Le 20/05/2015, à 22:17

Re : [Résolu] Création d'un menu horizontal et déroulant avec CSS

#14 Le 20/05/2015, à 22:28

Re : [Résolu] Création d'un menu horizontal et déroulant avec CSS

#15 Le 21/05/2015, à 12:43

Re : [Résolu] Création d'un menu horizontal et déroulant avec CSS

#16 Le 21/05/2015, à 15:21

Re : [Résolu] Création d'un menu horizontal et déroulant avec CSS

Pied de page des forums