Discussion :

[Titum]

Bonjour à tous,
je commence à utiliser avec bonheur le CSS3 et la possibilité d'utiliser plusieurs images en fond.

Par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

background: url('../../images/contenuh3degrad.png') repeat-x left top, url('../../images/contenuh3g.png') no-repeat left top, url('../../images/contenuh3d.png') no-repeat right top;

Mais peut-on appliquer des images en les déclarant à des endroits différents ?

Par exemple j'aimerai appliquer un style à tous mes h4 dans ma section outils dans une feuille de style:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#outils h4{
	padding:10px 6px 4px 6px;
	margin:0px 0px 3px 0px;
	background: url('../../images/contenuh3degrad.png') repeat-x left bottom;
}

puis appliquer une deuxième image spécifique à chaque h4:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<h4 style="background:url('../../images/outils-sommaire.png') no-repeat right top;">Mon Titre</h4>

mais là le style intraligne remplace la déclaration de la feuille de style (ce qui est normal) et donc la seule image qui s'affiche est outils-sommaire.png.

Si je dois faire une classe par type de h4 pour y incorporer les 2 images à la fois ça va être lourd (plein de classes) et encore pire pour de futures évolution si je déclare les styles en intraligne !

Auriez-vous une solution ?
Merci

et question annexe : existe-t-il un moyen de spécifier une "base href" comme en html dans une feuille de style ?
Genre comme on déclare le charset de la feuille de style, on pourrait mettre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

base-href=http://site.com

.
Ce serait pour faciliter le transfert local/serveur en gardant des URL d'images non relatives

[Arekk]

Pour ton problème de CSS3 multi-background, une seule solution me vient à l'esprit :

Tu englobe chaque H4 dans une classe différente (classe, et nons pas id, histoire que ce soit réutilisable) sur laquelle tu attribue en premier le background générique puis celui spécifique.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
#div .class1 h4{background:url('IMAGEGENERIQUE') no-repeat 0 0, background:url('IMAGESPECIFIQUE1') no-repeat 0 0;}
 
#div .class2 h4{background:url('IMAGEGENERIQUE') no-repeat 0 0, background:url('IMAGESPECIFIQUE2') no-repeat 0 0;}
 
Etc.

Concernant le base href, je pense qu'en CSS, tu sera condamné à utiliser au mieux le ../../adresseressource.
Mais c'est une idée à creuser... pour ma part, je ne vois pas comment faire autrement.

[Titum]

c'est bien ce que je disais : en intraligne pour chacun ou avec autant de classes que de h4 différents...
Boring comme on dit