28220 sujets

CSS et mise en forme, CSS3

Fond de couleur + lien + image

salut tout le monde Smiley smile

voila j'ai un petit probleme.
j'ai un menu dynamique en php sous forme de liste. J'utilise une ptite "astuce" pour faire des fonds de couleurs et les liens d'une autre. Le truc c'est que la je suis en train de faire l'administration du menu et j'ai juste voulu ajouter une image dans la liste et la mon texte est plus coloré...

ca se présente sous cette forme :
<li> 
<span class="green"><!--couleur de fond rouge par exemple-->
<span class="white"><!--couleur de texte blanche-->
<a href="index.php?p=_sub_menu_admin"><img src="files/add.jpg" width="15" height="15" alt="Add submenu"></a>
<a href="index.php?p=_sub_menu&s='.$menu['id'].'">'.displayFromDb ($menu['name']).'</span></span></a>
</li>



///////////////style.css////////////////////
.red {
color: red;
background-color: red;
width 99%;
}

.white {
color: FFFFFF;
}
etc....

Je pourrais mettre les images en dehors des balises span mais le probleme c'est que ces images ne sont affichés que pr les administrateurs du site. Et donc vu que je met width 99%; elles sont affichés sur une autre ligne... Pas trop intuitif le truc...

qq1 a une ptite idée de comment faire ?
merci d'avance Smiley smile
c'est pas très astucieux tout ça...
passe par la condition IF en PHP pour les conditions d'affichages...

et l'imbrication
<span><span>...<a></span></span></a>

est très mauvaise....

pour la couleur de fond, il aurait mieux fait de le mettre sur
<li class="fond1">...</li>
oui oui je passe par des IF pour l'affichage du boutton Smiley smile
c'etait juste pr simplifier le code ds le forum et rester sur le probleme principale de l'imbrication foireuse Smiley ohwell

Les couleurs sont appelés aussi dynamiquement depuis la base de données. Comment je peux faire pour gérer dynamiquement avec des div ma couleur de fond et la couleur de mon texte ?
merci d'avance
<li style="background: #codecouleur">...</li>

pour un truc en couleur affectés dynamiquement via une base de données, y'a pas 100000 solutions.
L'erreur souligné par Anthony :


<span><span><a href=""></a><a href=""></span></span></a>


En clair :

Tu doit fermer tes balises ouvertes AVANT d'en ouvrir de nouvelles.
Ce qui donne une fois corrigé :


<span><span><a href=""></a><a href=""></a></span></span>



Pour la couleur générer depuis la bdd tu peux au choix :



<div style="background: <?php echo $couleur; ?>"></div>


Ou renommer ta feuille de style avec l'extension .php et la générer dynamiquement. Ou enfin configurer ton serveur pour gérer les fichiers avec l'extension .css comme du php et là encore générer tes couleurs de fonds depuis la bdd directement dans ta css.

EDIT: 2 slow Smiley langue
Modifié par jb_gfx (04 Apr 2005 - 11:49)
jb_gfx a écrit :

<div style="background: <?php echo $couleur; ?>"></div>

en plus court et plus rapide niveau temps d'affichage :
<li style="background: #<?= $couleur ?>">...</li>
merci les gars Smiley smile

J'ai corrigé mes erreurs et voila un exemple de ligne générée :
<li>
<div style="background: green; color: white;">
<a href="index.php?p=_sub_menu_admin&act=add">
<img src="files/add.jpg" width="15" height="15" alt="Add submenu">
</a>
<a href="index.php?p=_sub_menu&s=3">Admin</a>
</div>
</li>

mais voila ca m'affiche toujours le texte avec la couleur par defaut de mes liens Smiley ohwell
Vianney a écrit :
merci les gars Smiley smile

J'ai corrigé mes erreurs et voila un exemple de ligne générée :
<li>
<div style="background: green; color: white;">
<a href="index.php?p=_sub_menu_admin&act=add">
<img src="files/add.jpg" width="15" height="15" alt="Add submenu">
</a>
<a href="index.php?p=_sub_menu&s=3">Admin</a>
</div>
</li>


mais voila ca m'affiche toujours le texte avec la couleur par defaut de mes liens Smiley ohwell

heu.... pourquoi le style tu ne le met pas directement sur le <LI> ?
et pense à définir <a href="..." style="color: #<?= $coultexte ?>">...</a>
roh le bouleto que je suis...
Je débute en css et voila je m'emmele les pattes...
Ca marche impec.

Par contre ca va impliquer quoi comme différence de mettre le <div> ds le <li> ou l'inverse ?
Bonjour Vianney Smiley smile

Pense à placer tes lignes de code dans la balise "code", c'est plus facile à lire pour tous Smiley cligne merci d'avance !!
Vianney a écrit :
roh le bouleto que je suis...
Je débute en css et voila je m'emmele les pattes...
Ca marche impec.

Par contre ca va impliquer quoi comme différence de mettre le <div> ds le <li> ou l'inverse ?

ça implique une balise en plus pour rien Smiley lol
Sujet clos
Aller à