Forums d'assistance et de discussion sur les logiciels produits par Mozilla ou créés à partir des technologies Mozilla. Ce site ne dépend pas de la fondation Mozilla et est maintenu par un collectif de bénévoles.
HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
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)
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
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
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
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
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 :
