[résolu] Liste puce graphique

Bonsoir

Premier post, je me lance dans le bain (css), c'est passionnant
J'essaie d'installer une liste de puce graphique pour un menu, tout fonctionne sur "firefox", mais sur "explorer" les puces ne s'affichent pas, j'ai parcouru pas mal de livres sur le sujet et naviguer sur le net à la recherche d' infos Nada ...! Je plante.

J'ai mis la page en ligne à cette adresse :
http://www.cambo-les-bains.net/css/essai.htm

Si vous avez une piste, des conseils ?

Bonne soirée
Merci
Modifié par africa (14 Sep 2006 - 22:07)

Bonjour africa et bienvenue sur le forum,

Pour ton premier bain, tu n'as pas de chance, car je pense que tu es tombé sur le fameux bug du haslayout sur les listes

Je sais (mais il ne faut pas le répéter, c'est entre nous) qu'un effort de pédagogie est en route sur ces histoires de haslayout, et je les attends avec impatience...

En attendant, ce petit up attirera certainement quelqu'un qui a une solution.

Coucou, les spécialistes du haslayout, où êtes vous ?

Question toute bête :

Pourquoi n'utilises-tu pas la déclaration CSS bien nommée
list-style-image: url("your_img.gif") ???

Dans ce cas-là, il te faut enlever tes autres déclarations !

Vero a écrit :
Coucou, les spécialistes du haslayout, où êtes vous ?

Hello.

Alors je ne suis pas assez spécialiste, car je ne sais pas au juste s'il y a un problème de HasLayout dans cette histoire.

Par contre, je suppute un problème dans la gestion des flottants et des positions relatives.
Plutôt que de se demander comment on va faire cohabiter flottants et positions relatives, on va déjà se demander si on a besoin des uns et des autres :
- les flottants : on a besoin d'au moins un flottant pour avoir une mise en page sur deux colonnes ;
- le positionnement relatif : non seulement je ne sais pas trop à quoi il sert ici, mais si on le supprime partout (tous les blocs principaux sont déclarés comme positionnés en relatif !), rien ne bouge. Hm... pas sûr que c'était nécessaire.

Pour rappel, le positionnement relatif n'est pas le positionnement « standard » (c'est position: static la valeur par défaut, pour la petite histoire, et en général on n'a pas besoin de l'indiquer) :
http://openweb.eu.org/articles/initiation_flux/

Et tant qu'à faire :
http://openweb.eu.org/articles/initiation_float/
http://openweb.eu.org/articles/initiation_absolue/
(Histoire de faire des heures supplémentaires ).


La beauté de la chose, c'est que non seulement le positionnement relatif n'a pas l'air ici d'être utile, mais en plus il déclenche le bug (ou participe à déclencher le bug !).
Supprimer le position: relative; de la div #droite règle le problème. On peut, dans la foulée, supprimer celui des autres blocs inutilement positionnés, d'ailleurs.


À noter que si on devait garder le positionnement relatif du conteneur (div #droite), on pourrait corriger le bug d'affichage :
- soit en conférant le layout à la liste ul (avec un width: 100% par exemple) ;
- soit en positionnant la liste ul en relatif également.


Au final, je ne sais pas s'il s'agit à la base d'un bug de HasLayout (le positionnement flottant confère le layout, donc il y a peut-être un lien), mais le meilleur moyen pour le résoudre me semble être de ne pas abuser sur le positionnement relatif.
Modifié par mpop (13 Sep 2006 - 22:42)

Et bien voilà !

Je le bookmarque celui-là, tiens !

Et tu dis que tu n'es pas pédagogue ...

Modifié par Vero (13 Sep 2006 - 22:11)

Bonsoir

Merci mpop,
j'ai supprimé tous les positionnements relatifs selon tes excellents conseils, tout fonctionne sur ie et firefox.
Ton post est super.