28220 sujets

CSS et mise en forme, CSS3

Différence d'alignement vertical entre IE et FF

Bonjour à tous,

Je recode actuellement tout mon site en XHTML 1.0 Strict.

Dans la partie supérieure de ma page web, j'ai mis le nom de mon site et j'ai utilisé des balises "h1 et "h2", pour une question de lisibilité pour les moteurs de recherche ("dogues allemands" étant des mots clés importants pour moi) et de sémantique.

Mais j'ai un gros problème : ces 2 lignes de titre ne sont pas centrées dans le bloc prévu pour ça. Et pire encore, j'observe de grosses différences d'affichage entre IE, Firefox et même Opera Smiley decu

Vous pouvez voir ça ici : page web en ligne

Ma question est simple : je voudrais savoir comment centrer ces 2 lignes verticalement dans le cadre.

Note : la taille de la police est volontairement abaissée car par un pur hazard, Firefox "semblait" centrait correctement, ce qui n'est évidemment pas le cas Smiley cligne

Merci d'avance Smiley biggrin
Pour éviter toute déconvenue sur le centrage en hauteur précise les margin et padding des h1 et h2, car si tu les laisse non renseigné chacun y fait ce qu'il veut...
Si tu veux actuellement j'arrive au résultat que je veux mais la manière ne me plaît pas. Car la seule solution que j'ai trouvé c'est de créer un nouveau bloc "div" en y mettant ces 2 balises dedans et appliquer un margin-top à ce "div". Ce qui donne : 
<div id="header">
  <div class="logo"></div>
  <div class="presentation">
	<div class="magouille">
       <h2>Elevage de la Boite de Pandore</h2>

       <h1>Dogues Allemands Fauves et Bringés uniquement</h1>
	</div>
  </div>
</div>
et pour le CSS : 
.magouille
{margin-top:55px;}

#header .presentation h2
{font-size:37px;font-family:"Old English Text MT", Verdana, serif;}

#header .presentation h1
{font-size:40px;font-family:"Palace Script MT", Verdana, serif;}

Le problème c'est que ça imbrique 3 "div". Pour faire ça autant resté en tableaux lol. Cette solution ne me convient donc pas.

Pour en revenir ta solution, tu me proposes quoi concretement ??? Je code comment ??? Merci de ta réponse Smiley smile
Modifié par Pandore (07 Oct 2005 - 10:36)
Je suis arrivé à faire à peu près ce que je voulais Smiley lol : un simple margin-top directement sur la balise marche (pourtant il me semble avoir bien tenter cette solution là auparavant ... J'avais certainement oublier quelquechose)

Il y a encore un léger décalage à l'affichage entre IE et Firefox : pas sur la première ligne mais l'espace entre la 1ère ligne et la deuxième est différent, bien que la valeur spécifiée soit fixe ! Smiley ohwell (c'est-à-dire en px). Mais bon, c'est satisfaisant

@+
Sujet clos
Aller à