5568 sujets

Sémantique web et HTML

Liste à puce complexe (ou pas)

Bonjout tout le monde,

N'étant pas très à l'aise avec les listes à puces (mis à part les listes dites simples) je me permet de venir vers vous afin d'éclaircir et de m'aider à solutionner mon problème...

Float left...Display inline, je m'y perds !

Voici mon problème :

J'aimerai avoir un menu se présentant de cette manière :

Titre1 Titre2 Titre3

Titre 4 Titre5 Titre6
=>Sousmenu4 =>Sousmenu5
=>Sousmenu4
=>Sousmenu4

Comme vous le voyez, des liens sur la première ligne, une autre suite de lien sur la seconde ligne avec un sous menus pour deux liens. Le tout aligné de cette manière. Pour aligner la première ligne, pas de soucis. Comment en revanche aligner la seconde ligne de liens avec les 2 sous catégories?

Je ne voudrai pas passer par un tableau, en revanche.

Merci de l'attention que vous proterez à mon problème

Smiley smile
Modifié par nemeton73 (27 Jun 2011 - 13:15)
Salut nemeton73,

<p>Titre1 Titre2 Titre3</p>
Titre 4 Titre5 Titre6
<li style="float: left">Sousmenu1 <li>Sousmenu2</li>
<li>Sousmenu3</li>
<li>Sousmenu4</li>


Ce code devrait t'aider. Smiley cligne
Salut,

xBEAD a écrit :
Salut nemeton73,

&lt;p&gt;Titre1 Titre2 Titre3&lt;/p&gt;
Titre 4 Titre5 Titre6
&lt;li style=&quot;float: left&quot;&gt;Sousmenu1 &lt;li&gt;Sousmenu2&lt;/li&gt;
&lt;li&gt;Sousmenu3&lt;/li&gt;
&lt;li&gt;Sousmenu4&lt;/li&gt;


Ce code devrait t'aider. Smiley cligne

Oulaah... non !

<ul>
  <li><a href="">Titre 1</a></li>
  <li><a href="">Titre 2</a></li>
  <li><a href="">Titre 3</a></li>
  <li><a href="">Titre 4</a>
    <ul>
      <li><a href="">Sous titre 4.1</a></li>
      <li><a href="">Sous titre 4.2</a></li>
      ...
    <ul>
  </li>
  <li><a href="">Titre 5</a>
    <ul>
      <li><a href="">Sous titre 5.1</a></li>
      <li><a href="">Sous titre 5.2</a></li>
      ...
    <ul>
  </li>
  <li><a href="">Titre 6</a></li>

Une balise <li> doit être contenue dans une balise <ul> ou <ol>. Pour que ton sous menu suive son menu, il faut qu'il soit dans sa même balise <li>, de sorte d'en garder la largeur et s'y adapter.
Modifié par Mikachu (27 Jun 2011 - 14:19)
Certes, j'ai un peu (beaucoup) merdé là Smiley lol
J'aurais du tester mon code avant. Smiley cligne
Même si mon code était juste pour aider un peu, vaux mieux pas le regarder Smiley ravi

Bon code Mikachu !
Modifié par xBEAD (27 Jun 2011 - 14:37)
Tu peux partir du code donné par Mikachu, qui est très bien, et utiliser display:inline-block pour les LI de premier niveau. Par exemple, si tu as mis un id "menu" sur le UL de premier niveau:
#menu > li {
  display: inline-block;
  width: 200px;
  vertical-align: top;
}
Merci mikachu et fvsch pour ces infos fort utiles ! C'est un peu plus clair pour moi. quelques points que j'aimerai éclaircir et modifier :

Concernant l'exemple, pour les sous-menus, nous avons un second niveau de liens. J'aimerai que les titres 4 et 6 ne soient pas des liens et ainsi que leurs sous-menus soient visibles, le tout aligné comme dans mon exemple.

Une petite question également : vertical-align: top; est indispensable?

Merci pour votre aide en tout cas !
nemeton73 a écrit :
J'aimerai que les titres 4 et 6 ne soient pas des liens et ainsi que leurs sous-menus soient visibles, le tout aligné comme dans mon exemple.

La structure HTML donnée par Mikachu est un bon point de départ pour ça, et il me semble que le code CSS que j'ai donné également. Bien sûr si les subtilités du positionnement CSS t'échappent il est toujours temps de reprendre quelques lectures, par exemple le Guide de survie du positionnement CSS (et les articles de fond qui y sont mentionnés).

Si tu veux une aide plus précise, il va falloir se mettre au boulot, faire des essais et nous les montrer si tu bloques sur des choses précises. Smiley smile

nemeton73 a écrit :
Une petite question également : vertical-align: top; est indispensable?

Si tu utilises display:inline-block, oui, c'est mieux. Par défaut un élément en display:inline-block sera aligné sur la ligne de base du texte, ce qui n'est pas toujours heureux. La différence en image:

upload/2043-1309516151.png
Salutation tout le monde.

Peut-être que le site de Max Design pourrait t'aider à mieux comprendre la navigation horizontale avec les listes.

De bon tutoriels sur le site avec de nombreux exercices.

..
Merci fvsch. Tu as raison, une lecture minutieuse de documentation me fera le plus grand bien !

Je regarde ça et je reviens vers vous.

Smiley cligne

Merci zardoz pour le lien, je regarde également.
Sujet clos
Aller à