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
la communauté d'entraide francophone dédiée au PHP
Contenu d'un div influ sur le CSS
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
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
Bon sinon tu me fais un message privé et on se fait un TeamViewer
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.
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.
Hmmm....Bah je te dis
Le contenu du SPAN influe sur le nom de l'image en background
Automatiquement ...
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>
), 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>
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>
Bon sinon tu me fais un message privé et on se fait un TeamViewer
Avec cette technique tu pourrais faire quelque chose comme ça :Si tu es paresseux (comme moi
$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.
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
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.
« Un handicap est le résultat d'une rencontre entre une déficience ou différence et une incapacité de la société à répondre à celle-ci. »
Hoa : http://hoa-project.net (sur @hoaproject).
Hoa : http://hoa-project.net (sur @hoaproject).
Bah au final mon code donne ca :
http://betedebombe.free.fr/anti-cons/
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>Bon sinon tu me fais un message privé et on se fait un TeamViewer
C'est correct, mais tu peux enlever @border=0 pour le mettre dans ton CSS :
Code : Tout sélectionner
img { border: 0; }« Un handicap est le résultat d'une rencontre entre une déficience ou différence et une incapacité de la société à répondre à celle-ci. »
Hoa : http://hoa-project.net (sur @hoaproject).
Hoa : http://hoa-project.net (sur @hoaproject).
Oui mais j'aurais tendance à être plus précis en faisantC'est correct, mais tu peux enlever @border=0 pour le mettre dans ton CSS :Code : Tout sélectionner
img { border: 0; }
#menu img {border: 0;}
comme ça pas d'éventuels conflits avec d'autres images où tu voudrais des bords