[Résolu] Problème de marge par défaut sur les titres

J'ai ce code, voir plus bas:

Internet Explorer positionne tous les titres correspondants correctement, et Firefox me baisse systématiquement le premier titre d'une quinzaine de pixels...ça m'ennuie, parce que je préfère Firefox ...comment faire pour que ce premier titre s'affiche correctement sous Firefox? Merci d'avance!

h2.titre1 { font-family :Verdana, Arial, Helvetica;
	font-size: 100%;
	color: #ffcc66;
	text-align: center;
	position: absolute;
	top: 50px;
	left: 35px;
	width: 180px;
	height: 35px}
	
	h2.titre2 { font-family :Verdana, Arial, Helvetica;
	font-size: 100%;
	color: #ffcc66;
	text-align: center;
	position: absolute;
	top: 50px;
	left: 320px;
	width: 180px;
	height: 35px}
	
	h2.titre3 { font-family :Verdana, Arial, Helvetica;
	font-size: 100%;
	color: #ffcc66;
	text-align: center;
	position: absolute;
	top: 50px;
	left: 600px;
	width: 180px;
	height: 35px}
	
	h2.titre4 { font-family :Verdana, Arial, Helvetica;
	font-size: 100%;
	color: #ffcc66;
	text-align: center;
	position: absolute;
	top:50px;
	left:880px;
	width: 180px;
	height: 35px}
	
	h2.titre5 { font-family :Verdana, Arial, Helvetica;
	font-size: 100%;
	color: #ffcc66;
	text-align: center;
	position: absolute;
	top:550px;
	left:50px;
	width: 180px;
	height: 25px}
	
	h2.titre6 { font-family :Verdana, Arial, Helvetica;
	font-size: 100%;
	color: #ffcc66;
	text-align: center;
	position: absolute;
	top:550px;
	left:320px;
	width: 180px;
	height: 25px}
	
	h2.titre7 { font-family :Verdana, Arial, Helvetica;
	font-size: 100%;
	color: #ffcc66;
	text-align: center;
	position: absolute;
	top:550px;
	left:600px;
	width: 180px;
	height: 25px}
	
	h2.titre8 { font-family :Verdana, Arial, Helvetica;
	font-size: 100%;
	color: #ffcc66;
	text-align: center;
	position: absolute;
	top:550px;
	left:880px;
	width: 180px;
	height: 25px}

Modifié par bouquins (13 Mar 2005 - 11:36)

Salut et bienvenue ici

Pour commencer, pourrais-tu baliser correctement tes exemples en utilisant les boutons [ CODE], comme te le suggèrent les Règles du forum (que tu as bien évidemment apprises par coeur ) ? Merci d'éditer ton post pour corriger cela

Ensuite, as-tu pensé à utiliser la Méthodologie qui se trouve en post-it du salon CSS ? En général, elle résoud la majorité des problèmes d'affichages
Modifié par Raphael (13 Mar 2005 - 10:38)

Cela vient de la marge par défaut d'un élément hn !
Il faut que tu rajoutes un margin-top:0; !

Par contre, tu pourrais largement optimiser ton code comme ceci :

h2.titre1, h2.titre2, h2.titre3, h2.titre4, h2.titre5, h2.titre6, h2.titre7, h2.titre8 { 
   font-family :Verdana, Arial, Helvetica;
   color:#FC6;
   text-align: center;
   position: absolute;
   width: 180px;
   height: 35px
   }


h2.titre1 {
  top: 50px;
  left: 35px;
  }

h2.titre2 { 
  top: 50px;
  left: 320px;
  }

h2.titre3 {
  top: 50px;
  left: 600px;
  }

h2.titre4 {
  top:50px;
  left:880px;
  }

h2.titre5 { 
  top:550px;
  left:50px;
  }

h2.titre6 { 
  top:550px;
  left:320px;
  }

h2.titre7 { 
  top:550px;
  left:600px;
  }

h2.titre8 { 
  top:550px;
  left:880px;
  }

Bonjour,

1. Corrige ton poste et met ton code dans des balises CODE.
2. Rajoute *{margin:0;padding:0;}

Bon dimanche

EDITE : Double grillage !!
Modifié par Julien L (13 Mar 2005 - 10:39)

Pardon pour ne pas avoir édité le code...

Pardon d'être lourd, mais "margin: top" se place où?
Et pareil pour

a écrit :
Rajoute *{margin:0;padding:0;}

, je le place où?
MP pour Julien L:

a écrit :
EDITE : Double grillage !!

Ca signifie un truc spécial??

Merci encore à tous!

Double grillage signifie que j'ai été doublement doublé par Raphale et Kevin pour répondre à ta question.

Cette déclaration se met en haut de ta feuille de style, avant toutes les autres déclarations.

Modifie le titre de ton sujet dans ton premier poste et met : "Problème de marge par défaut sur les titres"

Voili voilou

*{margin:0;padding:0;}
Julien, tu me dis que cette déclaration se met en haut, avant toutes les autres...certes, mais concrètement, elle fait partie de "body"? du style

body {background-color: black; background-image:url(image/jaseur.png);
background-repeat:no-repeat; background-position:450px 200px; background-attachment: fixed; margin:0; padding:0;} 

Encore désolé!

Oups, apparemment, j'ai pigé: j'ajoute cela au début, mais avec l'astérisque... C'est ce point que je n'avais pas saisi.

Tu me confirmes que j'ai bien compris??

Je confirme

Par contre, sans vouloir nullement te vexer, je pense que tu devrais profiter de ton week-end pour approfondir les bases des CSS qui semblent te faire défaut.

Profite des liens exposés dans la Méthodologie que je t'ai donnée, certains liens sont d'excellents cours pour débuter

Bonne chance et bonne continuation
Modifié par Raphael (13 Mar 2005 - 11:32)

Merci à tous!

Raphael, je ne suis pas du tout vexé; je ne demande qu'à apprendre!!!

En tout cas, les liens que tu proposes semblent précieux, je confirme que mon après-midi sera chargée!!

A plus!