[Résolu]CSS couplé avec du PHP

Bonjour,

après avoir parcouru pas mal de forum sur ce sujet, je bloque, alors si qqn a une idée...

Je m'explique: j'utilise la propriété "background" dans ma css, qui appelle une image et j'aimerais simplement mettre une variable php à la place, car l'image doit changer aléatoirement.

Voici le code:

#panel a:hover {
   background: transparent url(./image/photo1.jpg);

et j'aimerai mettre qql chose comme çà:

#panel a:hover {
   background: transparent url(<? echo "$photo";" ?>);

ou à la rigueur url(./photo.php), avec photo.php qui affiche $photo

Voilà, j'espère que j'ai été clair, et je vous remercie d'avance,

bye
Modifié par rooland (16 Jun 2006 - 17:25)

Et ?
Où est le problème ?
Utilise la fonction Rand : http://php.net/rand
Il n'y a rien de bien sorcier, après...

Si je ne sais pas si je suis sur la bonne voie, mais ton code possède une erreur de syntaxe (Le guillement après le point-virgule).

Au lieu de:

<? echo "$photo";" ?>

Essaye:

<?php echo "$photo"; ?>

Ou plus simplement :

#panel a:hover {
background: transparent url(./<?=$photo?>);

Modifié par Ent De Kryte (15 Jun 2006 - 17:50)

oui en effet, g fait une faute de frappe, pas de point virgule, et le pb c pas la fonction rand(), qui marche très bien d'ailleurs.

Non mon problème c'est de mettre du php dans une feuille de style. J'ai bien créé une css dynamique (style.php avec l'entete correct), qui est bien appelé dans ma page (index.php ici) mais il se passe rien.

En même temps c'est la première fois que j'essaie, donc s'il est possible de coupler css et php, j'ai surement fait une connerie qql part.

Bonjour et bienvenue rooland,

merci d'éditer ton 1er post pour placer ton code dans des balises [ code] ... [ /code] (sans les espaces) ce qui le rendra plus lisible pour tout le monde, comme indiqué dans l'Aide de ce Forum

Felipe

Justement, dans tes entêtes, tu spécifies ça non pas comme une page PHP, mais comme une page CSS.
Après, tu teste ton code sans PHP et avec, et tu regardes ce qu'il ne vait pas...

dsl felipe, comme çà prenait 2 lignes, jme suis dit pas utile .

J'ai bien essayé ta syntaxe, Ent De Kryte, mais rien ne se passe, la page doit ignorer cette 2e feuilles de style en php.

Voila ma feuille de style:

<?php header("Content-type: text/css"); ?>

#panel a:hover {
   background: transparent url(<? =$photo ?>)
               0px -38px no-repeat;
}

où $photo = ./image/photo1.jpg jusqu'à ./image/photo9.jpg dans ma bdd.

Et çà vient pas du code php car la même variable est reconnue qd je la met directement dans la page index.php dont voici le code:

<td background="<? echo "$photo" ?>">
	<ul id="photo">
		<li id="panel"><a href="./photo.php" title="galerie de photo"></a></li>
	</ul>
</td>

merci de vos réponse dans tous les cas

Bonjour Sigmao,

Il faut indiquer le type mime du document généré par PHP ; il faut donc ajouter ceci en premiere ligne de ton fichier css (extension .php et non plus css) :

<?php header("Content-type: text/css"); ?>

Edit : ok, le problème est ailleurs ...
Comment appelles-tu ton fichier css (j'entends chemin absolu/relatif) : monfichier.php?photo=... ?

Bonne journée. Romain
Modifié par yodaswii (15 Jun 2006 - 18:22)

slt yodaswii online ,

j'appelle en fait 2 feuilles de style, et je les appelle comme çà dans index.php:

<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="style2.php">

et ce qui marche pas du coup, c le hover, bien sur, j'ai bien la photo en background mais pas le hover (alors que çà marche très bien qd j'utilise pas le php)

je crois que je suis pas couché...

Sujet déjà abordé plusieurs fois sur ce forum, ici et là.

Espérant que tu y trouves réponse satisfaisante

oui j'avais vu ces posts, et malheureusement j'ai l'impression qu'on est obligé de contourner le pb.

J'avais déjà séparé le background de la classe, en le mettant directement dans la page (ce qui permet de mettre une variable php) mais il me reste le background du hover, tu penses que je peux le mettre directement dans la balise <a> ?

Je sais pas si c'est très propre, enfin je continue dessus et si je trouve, je vous le ferais savoir

bonne journée

Tu peux aussi faire autrement :
- Tu génères dans ta feuille CSS, plusieurs styles différents :

#panel a:hover {
background: transparent url(img1);

#panel2 a:hover {
background: transparent url(img2);

#panel3 a:hover {
background: transparent url(img3);

...

- Ensuite, dans ton code PHP, ta variable ne sert plus à déterminer aléatoirement quelle image choisir, mais quelle class appliqué !

[...] id="panel'.$i.'" [...]

Plus simple à mettre en place, même si plus lourd du côté CSS, cela te permet en définitive de toujours pouvoir modifier l'apparence de ton site uniquement via la feuille de style
Modifié par Jedi (16 Jun 2006 - 12:19)

hélas... c'est bien le fond du pb! J'avais commencé comme çà et tant que je n'ai qu'une dizaine de photo, tout va bien, mais le jour où j'en ai 200, ou si je veux en rajouter au fur et à mesure, alors il faudra que je remplisse ET la bdd ET la css.

C'est surement ce que je ferai si pas de solution mais php est bien pratique dans ce genre de cas.

En résumé, soit j'arrive à méler css et php, soit à tricher et mettre le style du hover dans la page, dans la balise <a>, ce que je crois pas être possible.

Merci en tout cas jedi de t'être pencher sur ce pb!

Victoire! en revoyant et cleanant mes fichiers, je m'aperçois que çà fonctionne très bien avec 1 css dynamique. Je crée mon script php pr les images aléatoires puis je l'inclus dans la css dynamique (style.php) et je mets les variables dans chaque classe.

Donc dans mon cas, j'ai 4 <td> cote à cote, qui m'affiche aléatoirement 4 photos (donc 4 classes) parmi autant de photos que ma dbb peut en contenir, wicked!

Voici mon fichier style.php (je montre que la 1ere classe mais c pareil pour les 3 suivantes):

<?php header("Content-type: text/css"); ?>
<? include ("./random.php"); ?>
#ul01 {
	width: 40px;
	height: 38px;
   	background: url(<? echo "$photo[$nb1]"; ?>);
	margin: 0;
	padding: 0;
	position: relative;
}
#ul01 li {
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	top: 0; 
}
#ul01 li, #ul01 a {
	height: 38px;
	display: block;
	left: 0px;
	width: 40px;
}
#panel01 a:hover {
   background: transparent url(<? echo "$photo[$nb1]"; ?>)
               0px -38px no-repeat;
}

#ul02 {
...

merci encore, bye