Forum d'entraide PHPFrance

Salut,

Je voulais savoir si en ecrivant :

<div id="menu>
<span>Accueil</span>
<span>Groupes</span>
</div>

Dans mon CSS pouvait faire un truc du genre

#menu span {
background-image:url(contenu_du_span.gif);
}

Simple question

Oui tu peux.

- D'abord, essaye. (Rassure-toi, tu ne vas rien casser !)

- Ensuite, reviens nous poser la vraie question

Est-ce que tu peux me mettre sur la voie ?

En JavaScript c'est pas un soucis mais directement en CSS ?

Merci, Elie

Il n'y a pas de problème en soi dans le code que tu présentes, c'est pourquoi je t'invite à l'essayer et à en critiquer le résultat.

Je peux te mettre sur la voie si tu expliques clairement ce que tu souhaites obtenir, et en quoi ce code ne te donne pas le résultat que tu attends.

Bah je te dis

Le contenu du SPAN influe sur le nom de l'image en background

Automatiquement ...

Bah je te dis

Le contenu du SPAN influe sur le nom de l'image en background

Automatiquement ...

Hmmm....

Nb: Il a fallu que je me gratte longuement la tête pour comprendre.

Non, à priori on ne peut pas transmettre de cette façon le contenu textuel de la balise à CSS. Autrement dit CSS ne "sait" pas que ta balise <span> contient le texte "Accueil".

On peut par contre reproduire ce type de fonctionnement en javascript, ce que tu sais déjà.

Une autre solution, que j'emploie pour ce type de besoin, est de donner un id (ça marche aussi bien avec une classe) à chaque span dont le contenu doit être remplacé, ce qui permet de l'identifier aisément via CSS :

Code : Tout sélectionner

#menu_accueil{background-image:url(image_accueil.png);}

Code : Tout sélectionner

<div id="menu">
<span id="menu_accueil">Accueil</span>
</div>

Si tu es paresseux (comme moi

), laisse php générer à ta place les identifiants de chaque élément à partir du nom. Tu peux aussi laisser php générer les classes CSS correspondantes si elles sont toutes construites sur le même modèle.

Ah tu vois

Par exemple ce script :

Le JavaScript prend la valeur contenu dans le SPAN pour calculer le pourcentage a effectuer :

http://www.bram.us/demo/projects/jsprogressbarhandler/

<span class="progressBar" id="element1">15%</span>

Si tu es paresseux (comme moi ), laisse php générer à ta place les identifiants de chaque élément à partir du nom. Tu peux aussi laisser php générer les classes CSS correspondantes si elles sont toutes construites sur le même modèle.

Avec cette technique tu pourrais faire quelque chose comme ça :

$menu = array('0 => Accueil', '1 => Groupes', etc.);

Et puis tu listes ton tableau pour créer le menu ainsi que les id correspondant dans les span. Tu listes également le même tableau pour créer automatiquement tes css.

Ainsi une fois cette technique mise en place il te suffit de compléter le tableau pour ajouter des éléments au menu et générer automatiquement le style correspondant.

Oauis mais ca, ca va en PHP

La je voulais savoir si CSS etait intelligent !

Comme le html, le css qui lui est destiné est un langage de description et non de programmation.

Et pour rendre css "intelligent" on fait comme pour rendre html "intelligent" on utilise php qui a été conçu pour ça

Juste une petite note, si au final tu vas mettre des liens à la place de tout ton bazar, je te conseille de styliser tes liens plutôt que des spans. Et une dernière chose, les liens sont toujours séparés par une séquence de caractères autre que blanc. Si tu ne veux pas faire de liens, ça ne te concerne pas, sinon, si tu n'as pas compris, demandes en moi plus.

Bah au final mon code donne ca :

Code : Tout sélectionner

/* MENU */

#menu {
	background:url(img/background_menu_noir.gif);
	height: 27px;
	width: 100px;
	}
	
	
#menu ul {
	height: 27px;
	margin-left: 84px;
	list-style:none;
	background:url(img/background_menu_jaune.gif) repeat-x;
	width: 916px;
	}
	
#menu ul li {
	margin: 0px;
	padding: 0px;
	float: left;
	background:url(img/background_menu_jaune.gif) repeat-x;
	}

    <div id="menu">
     <ul>
      <li><a href="accueil.html"><img src="img/menu/accueil.gif" alt="Accueil" width="149" height="27" border="0" /></a></li>
      <li><a href="boutique.html"><img src="img/menu/boutique.gif" alt="La Boutique" width="133" height="27" border="0" /></a></li>
      <li><a href="labo.html"><img src="img/menu/labo.gif" alt="Le Labo" width="133" height="27" border="0" /></a></li>
      <li><a href="videos.html"><img src="img/menu/videos.gif" alt="Les Vidéos" width="135" height="27" border="0" /></a></li>
      <li><a href="images.html"><img src="img/menu/images.gif" alt="Les Images" width="136" height="27" border="0" /></a></li>
      <li><a href="forum.html"><img src="img/menu/forum.gif" alt="Le Forum" width="147" height="27" border="0" /></a></li>
     </ul>
    </div>

http://betedebombe.free.fr/anti-cons/

C'est correct, mais tu peux enlever @border=0 pour le mettre dans ton CSS :

Code : Tout sélectionner

img { border: 0; }

C'est correct, mais tu peux enlever @border=0 pour le mettre dans ton CSS :
Code : Tout sélectionner
img { border: 0; }

Oui mais j'aurais tendance à être plus précis en faisant

#menu img {border: 0;}

comme ça pas d'éventuels conflits avec d'autres images où tu voudrais des bords

Qui veut encore des bords sur des images

Forum d'entraide PHPFrance

Contenu d'un div influ sur le CSS

Contenu d'un div influ sur le CSS