Réalisation d'une barre de menu horizontale en CSS me pose problème

Bonjour à tous,

C'est mon premier post sur le site, j'espère que je suis au bon endroit pour poster (il me semble...).

Je doit recoder entièrement un site web que j'ai réalisé il y a deux ans avec Dreamweaver : ce site est mal conçu (utilisation de tableaux pour la mise en page, pas de séparation XHTML / CSS --> d'où un mauvais positionnement dans les moteurs de recherche, entre autre...).

Ma question porte uniquement sur la réalisation du menu principal du site.
Le site est visible à cette adresse : http://www.iclppsy.fr
Ce menu est constitué d'onglets avec pour chaque clic sur une section, plusieurs choix possibles. Donc je me demandais si dans ce cas l'utilisation des liste (<ul>) pour réaliser le menu est envisageable ? Sinon, utiliser un tableau pour ces menus est-il conseillé ? (ce que je voudrais pour ma part éviter dans la mesure du possible... marre des tableaux !)

Merci si vous avez des pistes et indications à me soumettre.

Bonne journée à tous.

Salut,

Une liste <ul> est à l'heure actuelle toujours bien indiquée pour une navigation, sur ce point pas de problème. Quand à son utilisation dans ce cas précis, cela fonctionnera tout à fait, il te suffira d'attribuer une position flottante à gauche sur chacun des <li>, qui iront alors s'empiler pour faire un menu calé à gauche de son espace.

Le meilleur choix (et le plus simple) pour un menu est de le traiter comme une liste non ordonnée, donc d'utiliser l'élément ul.

De manière générale, n'utilise des tableaux que si tu as des données à afficher (et par données, j'entends celles qui se présentent naturellement sous forme de tableau, comme un tableau comparatif de logiciels selon plusieurs critères ou un calendrier utilisé à des fins d'agenda ou d'emploi du temps).

Mikachu a écrit :
Salut,

Une liste <ul> est à l'heure actuelle toujours bien indiquée pour une navigation, sur ce point pas de problème. Quand à son utilisation dans ce cas précis, cela fonctionnera tout à fait, il te suffira d'attribuer une position flottante à gauche sur chacun des <li>, qui iront alors s'empiler pour faire un menu calé à gauche de son espace.

Salut, merci pour la réponse !

Le problème, je ne sais pas si tu as vu sur le site donné en lien, c'est que mes menus sont "à onglets" et sur "2 étages", j'allais dire... Je me demande alors comment coder ça en prenant compte ces "2 étages" (sous-menus, pour être précis). Exemple quand tu cliques sur la rubrique activités par exemple, apparaissent en dessous les différents sous-menus en question (psychanalyse etc...).
Je code depuis quelques mois seulement et j avoue que la façon de parvenir à faire un tel menu en CSS ne m'apparait pas clairement pour l instant...

Sympa ton site.

++

Non cela ne pose absolument pas de pb.

Tu auras une liste principale pour tes onglet avec une propriété "float: left" pour les balises <li> comme l'a dit Mikachu.

Et dans chaque balise <li> tu aura une "sous-liste" qui sera afficher au survol ou au click.
et bien sûr chaque balise <li> des sous-listes auront une position flottante à gauche.

Bonjour ermu,

Attention a bien prendre en compte le fait que réaliser un tel menu, de façon robuste et accessible, demande de solides compétences en HTML, CSS et JavaScript.

En général, on recommande aux débutants de commencer par des menus plus simples, pour se familiariser avec HTML, puis CSS, puis JS.

Tu peux regarder ce tuto pour comprendre comment se construit un menu déroulant et l'adapter à ton besoin.
Modifié par Laurie-Anne (09 Oct 2009 - 08:49)