Mettre en forme un titre (H*) ?

[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 ?

[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 ?

[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

[Invité]

Ton image est de la couleur du fond, non ?
En enlevant la couleur de fond (sans #eaeaea) cela donne quoi ?

[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 ....

[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.