Différences

Ci-dessous, les différences entre deux révisions de la page.

--- nsi:langages:html:menu [2024/10/28 19:19] – créée goupillwiki
+++ nsi:langages:html:menu [2024/10/28 19:41] (Version actuelle) – goupillwiki
@@ Ligne 28: / Ligne 28: @@
 ===== Le style =====
-Pour l'instant le menu est laid. C'est une liste à puces avec des  liens
+Pour l'instant le menu est laid. C'est une liste à puces avec des  liens.
+Comme ce n'est pas évident, je vous propose un bout de style tout fait :
+<code css>
+div.menu {
+  background-color:#EEEEEE;
+  padding:10px;
+  width:200px;
+  float:left;
+  margin:10px;
+}
+div.menu ul {
+  list-style:none;
+}
+div.menu ul li {
+  border: 1pt solid #FF0000;
+}
+div.menu ul li a {
+  display:block;
+  background-color:#FFAAAA;
+  padding:5px;
+  text-decoration:none;
+}
+div.menu ul li a:hover {
+  background-color:#FFCCCC;
+}
+</code>
+Vous trouverez cela en action sur ce [[https://jsfiddle.net/gromax/ghvnqs49/7/|jsFiddle]]. Vous pouvez ainsi tenter des expériences.
+Quelques explications sur le css :
+  * ''div.menu ul li a'' : correspond à un lien ''<a>'' qui serait contenu dans une balise item de liste ''<li>'' elle-même contenu dans une balise de liste non numérotée ''<ul>'' elle même contenu dans un ''<div>'' ayant la classe ''menu''. On peut donc finement sélectionner les éléments qui reçoivent un style.
+  * Le dernier élément avec '':hover'', c'est un lien quand on passe le curseur de souris au-dessus.
+  * Certains éléments sont là pour casser la façon normale dont les choses s'affichent. Normalement une liste ''<ul>'',  c'est une liste à puces. On ne veut pas de puce ici donc ''list-style:none;''. Normalement, les liens apparaissent avec un soulignement. Ici on veut que les liens ressemblent à des boutons de menu, sans le soulignement donc ''text-decoration:none;''.
+  * On veut que le menu se mette sur la gauche : ''float:left;''.
+===== Cas absolute =====
+Il est possible de positionner le menu à une place de façon qu'il ne bougera pas, même si on descend dans la page. On appelle cela un positionnement absolu, en pixels par rapport aux bords de la fenêtre. Vous trouverez un exemple [[https://jsfiddle.net/gromax/8rcpx64L/6/|ici]].
+La partie importante est :
+<code css>
+position:absolute;
+top: 5px;
+left:5px;
+</code>
+''top'' donne la distance par rapport au haut de la fenêtre et ''left'' est la distance par rapport au bord gauche.