28172 sujets

CSS et mise en forme, CSS3

[résolu] Comment affecter une image directement à une balise ul?

Bonjour

Voici le code que j'utilise actuellement:

html:

<ul id="gallerie">


css:

ul#gallerie
{
	...

	...
	
	background: url(images/default.jpg) no-repeat top left;
}


Le problème est que les pages étant générées dynamiquement, l'image de fond default.jpg n'est plus unique mais différente en fonction de chaque page, default1, default2, default3 etc...
Elle ne peut donc pas restée dans la feuille de style.

Est-il possible de déporter cette partie de code directement dans la balise ul?

J'ai essayé quelque chose comme:

<ul id="gallerie" background-image="wp-content/themes/mon_theme/images/default.jpg">


mais ça ne fonctionne pas.

Pouvez-vous m'aider?

Merci Smiley smile
Modifié par StephaneLeChat (22 Jan 2010 - 18:57)
Bonjour,

Plutôt que de rajouter un style en ligne (qui sera une plaie à maintenir le jour où l'on voudra changer toutes les images de fond), pourquoi ne pas rajouter une simple class ?
Il ne restera plus qu'à modifier l'image de fond en fonction de la class. Smiley cligne

html:
<ul id="gallerie" class="theme1">


css:
#gallerie {
  ...
  ...
}

.theme1{ background: url(images/theme1.jpg) no-repeat top left; } 
.theme2{ background: url(images/theme2.jpg) no-repeat top left; }
Bonjour,

il est possible de renseigner directement les style au niveau des tag avec l'attribut style. La syntaxe est la même.

Perso, je ne fais jamais comme ça ; je fais varier une classe ou un id


<ul class="image1">, <ul class="image2">, <ul class="image3">.


et je renseigne les différents attributs dans la css


.image1 {

}

.image2 {

}

.image3 {

}


etc...

et galerie ne prend qu'un 'l' Smiley cligne

bref comme Corinne mais moi j'ai mis de jolies couleurs au code. Smiley langue
Bonjour et merci à tous les deux pour votre réponse très rapide.

Effectivement, votre proposition répond techniquement à mon problème.

Mais dans les faits, se pose un problème: il faudrait que le CSS soit modifié dynamiquement au fur et à mesure que de nouvelles pages seront crées.
Ou alors que je "provisionne" un certain nombre de classes pré-documentées. Ce qui n'est pas in-envisageable finalement.

Mais la solution la plus simple (même si pas la plus "propre", je le reconnais) serait quand même de documenter le style directement dans la balise.

J'ai essayé ça:

<ul id="galerie" style="background-image: url(wp-content/themes/mon_theme/images/default.jpg)">


mais ça ne fonctionne pas non plus. Je suppose que la syntaxe est mauvaise.

Sauriez-vous me corriger?

Merci Smiley smile

PS: et merci aussi pour la correction orthographique Smiley cligne 
<ul id="galerie" style="background-image: url(images/default.jpg)">
/* ___ au lieu de ___ */
<ul id="galerie" style="background-image: url(wp-content/themes/mon_theme/images/default.jpg)">

Si ta feuille de style se trouve dans le dossier directement parent à images (ici : "mon_theme"), si elle est dans un autre dossier (un dossier "styles" par exemple) situé dans le "mon_theme" :
<ul id="galerie" style="background-image: url(../images/default.jpg)">
. Le chemin vers l'image est toujours vu depuis le style ou la feuille de style.
Puisque tu es sur WordPress avec des styles en ligne, l'index.php se trouve dans le dossier "mon_theme". Le premier exemple devrait être le bon.
Modifié par Aureance (22 Jan 2010 - 14:19)
Sujet clos
Aller à