[Résolu] Ombrage de texte et centrage

1 Mar 2007 à 16:52

J'essais de centrer un texte avec une ombre portée dans un div, sans succès.
j'ai réussis sous IE (très bizarre) mais pas sous firefox.

Un apercu : http://www.yourgaminglive.com/test (problème sous FireFox)
Voici mon petit morceau de code :


<style type="text/css">

body {
background-color:#D3D1BE;
}

/* ombrage sur texte */

h1, span {
font-size:10px;
font-family:Geneva, Arial, Helvetica, sans-serif;

height:28px;

}
h1 {
position: relative; /* on positionne le conteneur H1 pour placer ensuite le SPAN */
background-image:url(fond.gif);
color: #4F0000;
float:left;
line-height:26px;
height:28px;

}
h1 span {
height:28px;
position: absolute; /* on superpose le SPAN sur le titre */
top: -1px; /* on décale le SPAN */
left: -1px;
color: white;
float:left;

}

/* Coins */

#cl {
float:left;
width:10px;
height:28px;
background-image:url(cornerleft.gif);
}

#cr {
float:left;
width:10px;
height:28px;
background-image:url(corneright.gif);
}

</style>
</head>

<body>
<div id="cl"></div>
<h1>Mon Blablablabla<span> Mon Blablablabla</span></h1>
<div id="cr"></div>
</body>

En vous remerciant (^-^)
Modifié par MasterPingouin (01 Mar 2007 - 21:27)

MasterPingouin

1 Mar 2007 à 21:27

Hop! Je m'aide tout seul, j'ai trouvé la solution :


h1, span {
font-size:10px;
font-family:Geneva, Arial, Helvetica, sans-serif;


}
h1 {
position: relative; /* on positionne le conteneur H1 pour placer ensuite le SPAN */
background-image:url(fond.gif);
color: #4F0000;
float:left;
margin:auto;
height:28px;
line-height:26px;

}
h1 span {
height:28px;
position: absolute; /* on superpose le SPAN sur le titre */
top: -1px; /* on décale le SPAN */
left: -1px;
color: white;


}

Heureux de pouvoir m'aider Smiley cligne

CSS et mise en forme, CSS3

[Résolu] Ombrage de texte et centrage