18041 sujets

Questions générales et questions de débutants

[RESOLU] Décallage liste à puces sous IE7 et FF2

Bonjour à tou(te)s,

Je suis nouveau sur le Forum d'Alsa, tant bien que mal je me met progressivement au CSS pour me débarasser de ces nombreux tableaux mais aussi pour me rapprocher un peu plus des standarts du web. Smiley cligne

Je suis en train de refaire le design de mon site et je rencontre un problème avec les listes à puces qui n'ont pas la même hauteur sous IE7 et FF2. Smiley confused

Voici la page Web et la CSS que j'ai uploadé :
test.html
test.css

http://geniebio.free.fr/forum/probleme_liste_a_puces.gif


Dans l'attente d'un coup de pouce ! Smiley smile
Modifié par erreur404 (03 Nov 2006 - 23:32)
Salut à toi et bienvenu...
En jetant rapidement un oeil à ta css, je vois plusieurs choses qui sont qu'à mon avis sources de problèmes : 
 #conteneur_3 {
	float: left;
	position: relative;
	top : 50px;
	margin: 0px auto;
}

Par exemple là, tu demandes à ce que ton conteneur soit place en float:left (donc à gauche de son conteneur parent), puis tu le positionnes en relative pour lui affecter un décalage de 50px vers le bas et enfin, tu lui dis de se centrer automatiquement grâce à tes marges (0 auto)
Tu comprendras qu'il soit un peut perdu au milieu de toutes ces instructions Smiley biggol 


 #conteneur_3 {
	background: ;
	width: ;
	height: ;
}

Pour ce qui est des instructions vides, je ne sais pas si cela modifie quelque chose, mais ... enlève-les si elles sont inutiles Smiley rolleyes

A la place, je te conseille vivement d'aller jeter un oeil sur la <EDIT>galerie</EDIT> de menus,
il y a un certain nombre de choses qui correspondent à ce que tu cherches et tout particulièrement le Menu 1.
Il te suffira tout simplement de modifier quelques propriétés pour avoir le rendu que tu souhaites.

Nota : merci au Grand Maître des kiwis pour son oeil de Lynx
Modifié par Cygnus (03 Nov 2006 - 19:18)
Bonjour erreur404 et bienvenue sur Alsacréations Smiley smile ,

Comme Cygnus je pense qu'il y a beaucoup de confusion dans ta compréhension de CSS Smiley cligne .

Il faudrait également faire un choix pour adopter une Déclaration de Type de Document (DTD) dont ta page html est dépourvue. Sans une DTD tu risques d'aller de surprises en surprises quant au rendu dans tel ou tel navigateur.

A lire: Les DTD HTML4.01 et XHTML1.0 : comment choisir ?
Merci pour ta célérité ! Smiley langue

Effectivement, je suis débutant en CSS2, et je travaille par dicotomie et essais/erreurs. J'ai lu certains des articles ainsi qu'une partie de la FAQ v3 d'Alsa, ôh combien enrichissant et instructifs ! Smiley cligne

J'ai testé le menu horizontal n°1 que tu me recommande : j'ai donc copier-coller exactement le code mais ca n'empêche pas que j'ai le même problème ! J'ai l'impression que le décallage vient du "margin" du "body". Smiley bawling

Lorsque margin = 0 le problème de décallage vertical apparaît sous FF2, tandis que lorsque margin = 10 l'apparence est la même sous IE7 et FF2. Smiley eek

http://geniebio.free.fr/forum/probleme_liste_a_puces_2.gif

Pour la DTD je me suis mis en XHTML1.0 transitional pour l'instant, ce qui me laisse une certaine marge de manoeuvre. Quand je l'aurais validé je m'esseyerai au Strict. Smiley cligne

EDIT :
Je ne vois qu'une solution, utiliser la technique de Gou-blog, à savoir :
* {
margin: 0;
padding: 0;
border: 0;
font-family: sans-serif;
font-size: 1em;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

Avec ça, ça marche. Smiley rolleyes
Modifié par erreur404 (03 Nov 2006 - 18:45)
Igor a écrit :
Il faudrait également faire un choix pour adopter une Déclaration de Type de Document (DTD) dont ta page html est dépourvue. Sans une DTD tu risques d'aller de surprises en surprises quant au rendu dans tel ou tel navigateur.

A lire: Les DTD HTML4.01 et XHTML1.0 : comment choisir ?

Je te conseille déjà de commencer par aller jeter un oeil sur le lien donné par Igor. Smiley murf

La méthode que tu mets en place sert simplement à supprimer toutes les marges internes et externes des différentes éléments. Il s'agit-là d'une méthode un peu "bourrin" (pardonne-moi l'expression )et je sais qu'un post avait été initialisé à ce sujet mais ... plus moyen de mettre la main dessus Smiley confused

Ce que je te conseille, c'est tout simplement de trouver la marge qui t'embête en donnant des fond colorés à chaque élément. Tu repèreras bien vite celui qui te pose problème... Smiley cligne
(merci la FAQ )
Modifié par Cygnus (03 Nov 2006 - 19:14)
J'ai suivi ton conseil, le problème venait de margin et padding dans ul.

ul
{
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	width: 100%; /* précision pour Opera */
}


J'ai enlevé la méthode bourrin comme tu dis, mais n'est-ce pas plus propre d'initialiser tous les padding et margin à zéro ? J'ai lu que ca permettait de résoudre les problèmes de margin et padding par défaut de certains naviguateurs ? Smiley confus
Modifié par erreur404 (03 Nov 2006 - 19:29)
Justement ...
Le post posant la question (tu sais, celui sur lequelle je n'arrive plus à mettre la main)
donnait lieu à une très bonne analyse. Smiley lol
Si quelqu'un pouvait mettre la main dessus, ce serait cool ... Smiley langue

- Il y a d'un côté les adeptes du "pour" qui font valoir l'avantage de supprimer tous les problèmes de margin et de padding d'un seul coup
- Mais d'un autre côté, était avancé l'argument de ne pas figer inutilement la page : l'interprétation que fait chaque navigateur des padding et des margins diffère effectivement (plus ou moins légèrement). Cependant, il était posé la question (si mes souvenirs sont exacts) de savoir si cette méthode n'allait pas à l'encontre même de la philosophie de créer une page qui soit lue de manière quasi uniforme. Ne vaut-il mieux pas corriger au coup par coup plutôt que tout raser pour reconstruire ? Smiley murf

Enfin, voilà...
Je ne sais pas si c'est mieux ou moins bien, et je ne crois pas forcément être en mesure de te conseiller sur ce point-là.
Je pense que c'est à toi de voir la méthode quetu préfères et celle qui te convient le mieux Smiley cligne
Modifié par Cygnus (03 Nov 2006 - 20:22)
erreur404 a écrit :
J'ai suivi ton conseil, le problème venait de margin et padding dans ul.

Il ne manque donc plus qu'un petit [Résolu] dans l'intitulé de ton sujet alors Smiley lol
Modifié par Cygnus (03 Nov 2006 - 20:24)
Le post est doérnavant résolu grace à vos diverses interventions. Il ne me reste plus qu'à vous remercier chaleureusement ! Smiley ravi
Modifié par erreur404 (03 Nov 2006 - 23:42)
Sujet clos
Aller à