18067 sujets

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

Comment redescendre la ligne sur i.e sans la modifier sur les autres

Bonjour,

Dans Firefox et Safari, le h1 est centré verticalement (ou en donne l'impression je n'ai pas mesuré au pixel près) dans le div; mais dans i.e le h1 est collé en haut du DIV: comment faire pour le redescendre dans i.e sans le déplacer dans Firefox ou Safari ?

J'ai un div conçu comme suit:

<div id="vertfiole">
<h1>Laur&eacute;at du concours de la foire de Bologne du livre pour enfants - 1997 -</h1>
</div>

Et la feuille de style associée est :

body {
	background-color: #F3F3F3;
	margin: 0;
	padding:0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #808080;
    }
#vertfiole {
	position:absolute;
	height:46px;
	width: 801px;
	margin-top:233px;
	margin-left:39px;
	background-color:#BADF15;
}

#vertfiole h1 {
	font-size:20px;
	font-weight:normal;
	color:#ffffff;
	text-align:center;
}

Merci d'avance, car je tourne en rond: ce que j'essaye (hauteur de ligne etc..) a une incidence dans les tous les navigateurs.

ST123
Modifié par st123 (13 Sep 2006 - 15:53)
Bonjour st123 et bienvenue parmi nous, Smiley smile

Merci de te conformer aux règles du forum en encadrant ton code à l'aide de ma balise appropriée. Il sera plus lisible. Smiley cligne
Modifié par Vero (13 Sep 2006 - 15:40)
Voilà Véro, c'est fait, désolé, je ne savais pas... Et si je peux me permettre une remarque: sur safari: ça devient quasiment illisble Smiley decu
Bonjour,

Le plus simple ce serait de définir les padding et margin à 0 et de recaler ton h1 pour les 2 navigateurs. Utiliser un hack du style html>body #vertfiole h1 {
margin-top: xxpx;} est un peu lourd !!
Merci Ghost, je n'ai pas compris ta réponse, mais en fait pour ne pas tout noyer, j'ai juste isolé ce qui ne fonctionnait pas dans la page.

La page contient beaucoup plus d'éléments et la feuille de style aussi, et je ne peux pas mettre les margin-top à zéro car je souhaite centrer l'élément verticalement et horizontalement (en fait tout le contenu de la page est centré en H et en V)....

L'intégralité de la pageest à http://chalvin.free.fr/test/references.html t de la feuille de style est a http://chalvin.free.fr/test/2bgal.css

Donc je ne suis pas beaucoup plus avancé.... Smiley decu
Merci Chmel, je crois que je vais utiliser les commentaires conditionnels, car de modifier le line-height, fait descendre la ligne, bien sûr sur i.e mais sur lesautres navgateurs.

Merci pour le lien, je vais faire des essais.

St
Bonjour,

Tu peux entre autres donner un margin-top en PX pour ce H1. La valeur par defaut qui est en EM pose problème. Mais le centrage ne sera pas parfait en agmentant la taille du texte.

D'ailleurs si j'essaie d'augmenter la taille du texte, une partie du contenu devient vite inaccessible : par exemple le texte sur fond violet.
Bonjour,

Désolé, j'ai été un peu trop synthétique

#vertfiole h1 {
	font-size:20px;
	margin:0;
        padding:0;
        margin-top: 10px;
	font-weight:normal;
	color:#ffffff;
	text-align:center;
}


donc dans un premier temps tu remets les margin et padding à 0 (pour IE et FF ) comme cela tu élimines les valeurs par défaut différentes puis tu donnes une valeur de margin-top pour centrer ton h1 (j'ai pris 10px au pif) et les 2 navigateurs auront le même comportement.
Merci alan, Merci Ghost, pour vos réponses et leur rapidité.

J'ai adopté ta solution Ghost, elle a fonctionné du premier coup et ton pif est fin car les 10px me semblent parfait [j'ai regardé avec 13px : (la hauteur du div - moins la hateur des caractères)/2 mais c'est moins beau]

Je vous remercie vraiment car je ne savais pas comment m'en sortir et trouvais vraiment trop bête d'avoir un "choix" à faire, alors que tout devrais être plus simple.

Savez vous où je peux trouver (en français ?) une liste des différences d'interprétation des navigateurs ?

Grâce à Alsacréation, les CSS c'est du gateau Smiley cligne

ST
Modifié par st123 (14 Sep 2006 - 14:41)
Sujet clos
Aller à