Page 1 sur 1
Mettre en forme un titre (H*) ?
Publié : 26 févr. 2004, 22:37
par Bibilefou
Bonsoir !
Comment feriez vous pour arriver à ça ?
En partant d'un simple H2.
Je vous donne le style utilisé :
Code : Tout sélectionner
.framefake h2{
position:relative;
width:100%;
height:20px;
top:0; left:0;
margin:0;
text-align:right;
padding-right:180px;
background:#eaeaea url(/images/table_top.gif) right bottom no-repeat;
z-index:2;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #494949;
letter-spacing: 2px;
}
Je trouve ce code un peu énorme pour ce qu'il fait ... Mais bon ...
Ce truc s'affiche nickel sous IE 6 (Win XP) mais sous Firefox, je n'ai pas l'image de l'arrière plan. Juste un bloc tout gris.
Elle est où l'erreur ?
Publié : 26 févr. 2004, 23:11
par SX1
Avec ces corrections cela s'affiche ok sous moz1.6, je n'ai pas firebidule :
Code : Tout sélectionner
h2 {
position: relative;
width: 100%;
height: 20px;
padding-top: 0;
padding-left: 0;
margin: 0;
text-align: right;
padding-right: 180px;
background-color: #eaeaea;
background-image: url(img/test.gif);
background-position: right;
background-repeat: no-repeat;
z-index: 2;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #494949;
letter-spacing: 2px;
}
Je me suis aperçu que moz support mal les déclarations css sans leur intiulé complet (écrire font-style, puis font-variant, puis font-familly avec retour à la ligne et ; en fin de chaque ligne. par ex.)
Ton code n'est pas lourd, et puis pense à ton code html, comme il est léger...
heu, "position" pour un élément h, c'est utile ?
Publié : 27 févr. 2004, 00:36
par Bibilefou
ça change rien ... :-/
je vois pas l'embrouille... ça commence ....
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6
Publié : 27 févr. 2004, 01:19
par Invité
Ton image est de la couleur du fond, non ?
En enlevant la couleur de fond (sans #eaeaea) cela donne quoi ?
Publié : 27 févr. 2004, 09:06
par Bibilefou
l'image fait 20px de haut et 170 de large.
C'est un gif avec un fond blanc ....
Donc là, clairement pas affichée ....
Publié : 27 févr. 2004, 09:24
par Bibilefou
Bon, problème réglé en utilisant un calque contenant le h2, juste pour l'arrière plan ... pffff.... Pas évident quand même les CSS....
Code : Tout sélectionner
.framefake h2 {
width: 65%;
padding-top: 3px;
padding-left: 0;
margin: 0;
text-align: right;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #000;
letter-spacing: 2px;
}
.framefake .head {
position:relative;
width: 100%;
height: 20px;
background-image: url(/images/table_top.gif);
background-color: #eaeaea;
background-position: right;
background-repeat: no-repeat;
z-index: 5;
}
PS: la position relative est importante car elle empêche le chevauchement de calque. Le z-index ne suffit pas.