Listes à puces css
sam
-
SchSoftware Messages postés 46 Date d'inscription Statut Membre Dernière intervention -
SchSoftware Messages postés 46 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Voila je reviens vous voir parce que j'ai un problème assez conséquent, mon ébauche de site est valide xhtml/css et s'affiche parfaitement sous firefox, sauf que sous ie, chrome, opera et safari c'est la catastrophe au niveau du menu horizontal.
J'ai fais ce dernier avec une liste à puce orientée horizontalement. Cette dernière sous les naviguateurs cités plus haut superpose les différents mots qui compose mais <li>
Pour illustrer, sous firefox:
lien1 lien2 lien3
Sous les autres naviguateurs:
lien lien lien
1 2 3
J'aimerais comprendre pourquoi et résoudre ce soucis (meme sil faut passer par deux feuilles de style ;)
Voila je reviens vous voir parce que j'ai un problème assez conséquent, mon ébauche de site est valide xhtml/css et s'affiche parfaitement sous firefox, sauf que sous ie, chrome, opera et safari c'est la catastrophe au niveau du menu horizontal.
J'ai fais ce dernier avec une liste à puce orientée horizontalement. Cette dernière sous les naviguateurs cités plus haut superpose les différents mots qui compose mais <li>
Pour illustrer, sous firefox:
lien1 lien2 lien3
Sous les autres naviguateurs:
lien lien lien
1 2 3
J'aimerais comprendre pourquoi et résoudre ce soucis (meme sil faut passer par deux feuilles de style ;)
A voir également:
- Listes à puces css
- Listes déroulantes excel - Guide
- Listes déroulantes en cascade excel - Guide
- Gertrude a préparé la liste des affaires à prendre pour l'excursion. juliette a modifié cette liste en utilisant le mode suivi des modifications proposé par le traitement de texte. - Guide
- Css exposant ✓ - Forum CSS
- Freebox impossible de récupérer la liste des mises à jour - Forum Freebox
3 réponses
Bonsoir
Donc, j'ai bien constater le problème sous FF et pas IE
Je ne suis pas spécialiste de la manière dont ils interprètent le CSS mais je pense que votre soucis vient du "padding" des "a_menu", trop grand... (25% pour left et right)
En effet, si je ne dit pas de bêtise (à vérifier) vous lui demandez une marge de 25% de la largeur de votre fenêtre (et non pas de l'élément qui les contient, les quelques manipulations que j'ai effectuer sur ton CSS semble le confirmer...)
Pour vous faire une idée, rajoutez dans votre CSS pour ".ul_menu .li_menu .a_menu" et ".li_menu:hover .a_menu:hover" la ligne suivante (qui permet de définir un comportement de retour à la ligne pour les texte contenants un espace!)
Vous pourrez constater sous IE qu'il n'y a plus de retour à la ligne mais, que la fin de texte est masquer par la cellule suivante...
Je dirais que la différence vient du fait que FF arrive à détecter cette trop grand marge et la corrige comme un chef...
Mais un stricte respect de la norme CSS devrais lui faire prendre le même comportement que FF et consort...
Les puristes crieront "bouuuuuu" et les autres "bravo FF"
Après test, je dirais qu'un "padding" de 10 pixel
Donne de bon résultat visuel... (mais bon, à vous de voir...)
Bien à vous
Donc, j'ai bien constater le problème sous FF et pas IE
Je ne suis pas spécialiste de la manière dont ils interprètent le CSS mais je pense que votre soucis vient du "padding" des "a_menu", trop grand... (25% pour left et right)
En effet, si je ne dit pas de bêtise (à vérifier) vous lui demandez une marge de 25% de la largeur de votre fenêtre (et non pas de l'élément qui les contient, les quelques manipulations que j'ai effectuer sur ton CSS semble le confirmer...)
Pour vous faire une idée, rajoutez dans votre CSS pour ".ul_menu .li_menu .a_menu" et ".li_menu:hover .a_menu:hover" la ligne suivante (qui permet de définir un comportement de retour à la ligne pour les texte contenants un espace!)
white-space: nowrap;
Vous pourrez constater sous IE qu'il n'y a plus de retour à la ligne mais, que la fin de texte est masquer par la cellule suivante...
Je dirais que la différence vient du fait que FF arrive à détecter cette trop grand marge et la corrige comme un chef...
Mais un stricte respect de la norme CSS devrais lui faire prendre le même comportement que FF et consort...
Les puristes crieront "bouuuuuu" et les autres "bravo FF"
Après test, je dirais qu'un "padding" de 10 pixel
padding:0 10px 0 10px;
Donne de bon résultat visuel... (mais bon, à vous de voir...)
Bien à vous
