2 font-size dans h1 [résolu]

Bonjour !

Je cale sur un truc tout bête, je veux ajouter quelques mots-clés dans mon titre h1 dans une taille de caractère plus petite, je mets donc mon texte dans une balise span qui a pour style un font-size plus petit. Mon problème, c'est l'interligne (surtout sous firefox), je voudrais que ce texte soit quasiment collé en-dessous du texte plus gros. J'ai essayé de bricoler en mettant mon span en position relative et un margin-top négatif mais du coup, je n'ai pas le même résultat sous les différents navigateurs.

mon code :

<div id="entete">
<h1 style=" font-family: 'AndyMTRegular',Andy,Chiller,Mistral,Haettenschweiler,Juice ITC,Abadi MT Condensed Extra Bold,Arial Narrow,Arial;font-size:4em;	color: #8B3402;text-shadow:2px 2px 2px #DC8D23, -1px -1px 1px rgba(254,227,1,0.8)">Chambres d'Hôtes JOLIVET <span style="margin:0; padding:0; font-size:0.3em"></br>Bourgogne _ Saône-et-Loire (71) _ Charolais brionnais</span></h1>
</div>	

Je placerai bien sur tout ça dans ma feuille de style après essais !

Merci d'avance (et encore une fois...) pour votre aide si précieuse.
Modifié par jojoledemago (29 Sep 2011 - 20:02)

Hello.

Tente ça:

<h1>Bla <span>encore du bla</span></h1>

h1 {
	font-size: XXem;
	line-height: XXem; //Même valeur que font-size;

	//Le reste de ta typo
}

h1 span {
	display: block;

	font-size: YYem;
	line-height: YYem; //Même valeur que font-size;

	//Le reste de ta typo
}

en utilisant les raccourcis pour font.

MERCI beaucoup !!!

Avec un line-height de 1em pour les 2, ça fonctionne parfaitement ! J'en déduis qu'un élément en ligne prend la hauteur de son élément parent.

Résultat fini sur mon site accessible dans ma "signature" juste en-dessous dans 5 minutes.

Petite question supplémentaire pendant qu'on y est !

J'ai une de mes pages où le titre (en fait l'espace vide en-dessous du texte h1) passe par-dessus une image "cliquable" qui ne l'est plus du coup dans certaines résolutions. Comment puis-je faire pour réduire l'emprise en hauteur de mon titre h1 ? Je le mets en block et je définie une hauteur ?

jojoledemago a écrit :
J'en déduis qu'un élément en ligne prend la hauteur de son élément parent

En fait non. De tête cela dépend de son line-height, font-size et d'un éventuel padding. Mais comme je n'arrive plus à mettre la main sur cette partie de la spec, j'ai un léger doute.

Pour ton autre souci, tu as un exemple? J'avoue ne pas avoir compris le problème.

EDIT: Et en effet je m'étais planté dans mon premier post. C'était bien 1em et non pas la même valeur en em que la font-size de l’élément.
Modifié par Florian_R (30 Sep 2011 - 11:47)

J'avais un padding de 0 pour l'élément parent, peut-être un indice...

Pour mon autre problème, je l'ai résolu autrement, il n'y a plus de problème !...

Merci encore pour ton aide, les bienfaits de ces changements pour mon référencement commencent à se faire sentir !...

A+