Geckozone

Bonjour à tous,

Je suis oqp à réaliser mon nouveau site (pour info en xhtml strict 1.0 + ccs2), mais la n'est pas le problème...

Je voudrais réaliser mon menu avec une list html + CSS pour obtenir ceci comme résultat :



Le problème, est que je n'arrive pas à l'afficher sur 1 ligne. vous me répondrez utilise la propriété css "display: inline;" sur les balises <li>. quand je réalise cette opération voici ce que j'obtiens :

sans le "display: inline;" : (c'est correcte, sauf qu'il n'est pas sur 1 ligne, mais sur 4 lignes)


avec le "display: inline;" : (très loing du résultat)


vous trouverez mon code sur cette page :
à cette adresse

J'espère que vous pourez m'aider, je n'ai pas envie d'utiliser une image pour mon menu.

Je vous remercie d'avance

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.12) Gecko/20050919 Firefox/1.0.7

C'est pas que j'ai le niveau pour régler ton problème mais ... le lien est incorrect

résolu (faute de frappe)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.12) Gecko/20050919 Firefox/1.0.7

C'est logique.

Le éléments de ta liste, lorsque tu mets display:inline, ne sont plus en display:list-item.
Donc forcément tu y perds les list-style-image, valable seulement pour les list-item

Solution : laisser les li en list-item et les faire flotter (float) ou bien inclure les décorations oranges comme des images de fond, mais tu auras de la peine pour cette deuxième option, car vu que les li sont des éléments en ligne, les margin, padding et autres sont plus difficilement applicables. Donc : float

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.5) Gecko/20060731 Firegecko/dapper-security Firefox/1.5.0.5

merci bien

je vais essaye en float

j'espere que cela va fonctionner

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.12) Gecko/20050919 Firefox/1.0.7

cela fonctionne relativement bien avec le float, mais je n'arrive pas a faire unn espace sans bordure entre mes differents menus (l'ensemble du texte est souligné)

cela ne serait pas plus facile de le realiser avec des div ? + une image pour la puce ? et mettre l'ensemble en float ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.12) Gecko/20050919 Firefox/1.0.7

GregK84 a écrit :cela fonctionne relativement bien avec le float, mais je n'arrive pas a faire unn espace sans bordure entre mes differents menus (l'ensemble du texte est souligné)

Mets un "margin" ?
Et surtout, mets à jour ta démo qu'on puisse comprendre ?

GregK84 a écrit :cela ne serait pas plus facile de le realiser avec des div ? + une image pour la puce ? et mettre l'ensemble en float ?

Un <li> ce n'est au fond qu'un <div> avec quelques informations de style et surtout un sens. Un menu étant une liste d'éléments (de navigation), il est normal d'utiliser des <li> plutôt que des <div> génériques et vides de sens.

Si vraiment tu le souhaites, applique plutôt un display:block sur tes li, ils se comporteront comme des div et tu pourra mettre un background-image plutôt qu'un list-style-image (plus facile à gérer mais avec le sens conservé).

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

merci je met a jour ma demo

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.12) Gecko/20050919 Firefox/1.0.7

Salut, j'ai toujours des problèmes ...

Le menu 1 a été réalisé avec un "float" et une "list-style-image" mais, même avec les margin, je n'arrive pas à créer des espaces entre les différents textes du menu.

Le menu 2 a été réalisé avec un "float", un "display block" et j'ai attribué la puce en background via une class appliquée sur la balise "<li>" mais, je n'ai plus de puce (d'image) et comme pour le menu 1, je n'arrive pas à créer des espaces entre les différents textes du menu.

Mon code et les exemples sont à cette adresse : ici

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.12) Gecko/20050919 Firefox/1.0.7

Bon, pour le menu 1, si je mets sur ça marche, j'ai bien un espacement.

Pour le menu 2… c'est vraiment très con
Vérifie l'extension de ton image

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.0.5) Gecko/20060731 Firelimace/dapper-security Firefox/1.5.0.5

salut,

pour le menu 1 j'avais essaye ... mais je n'avais pas eu de resultat ...

pour le menu 2, effectivement, si j'utilise la bonne extension ca marche mieux ^^

je me demande ce que j'ai pris durant la journée lol

je pense que le menu 2 ce rapproche plus de mon objectif que le menu 1 par contre, si je change le padding ou le margin pour faire dessendre l'image de la puce, soit tout mon texte monte, soit le border de mon texte dessend ...

merci pour votre aide

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.12) Gecko/20050919 Firefox/1.0.7

Salut,

GregK84 a écrit :je pense que le menu 2 ce rapproche plus de mon objectif que le menu 1 par contre, si je change le padding ou le margin pour faire dessendre l'image de la puce, soit tout mon texte monte, soit le border de mon texte dessend ...

Il faut que tu joues avec le background-position plutôt
Je ne sais jamais dans quel ordre c'est , essaye les deux : Tu peux aussi spécifier en pixels, en em ou en % à la place de left.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.6) Gecko/20060728 Firefox/1.5.0.6

salut,

je ne connaissais pas cette propriété, j'ai appris un nouveau truc

cela marche impec, et la bonne position est :

background-position: left 1em;

Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.12) Gecko/20050919 Firefox/1.0.7