Bonjour,
D'abord un petit mot sur le contexte de mon probleme. Je cree des listes avec php en interrogeant une base MySql. Les differents termes d'une liste donnee appartiennent a plusieurs categories que je choisis d'identifier par un code couleur. Pour faire joli et grace au css chaque element de ma liste est par defaut ecrit en noir avec un fond de couleur et j'inverse lorsque la souris passe sur le lien (fond noir et texte en couleur). Pour faire encore plus joli je voudrais arrondir les angles (au sens propre) de chacun de mes liens. Je vais donc ajouter 4 images qui seront des "cache-coins" en gif utilisables quel que soit la couleur-code du lien.
Voici le code HTML (pour le test je fais abstraction de php/mysql)
... et le CSS (ici je considere 2 codes-couleur > color1 et color2)
Premierement je ne sais pas si c'est la meilleur methode mais elle fonctionne sous IE (ce qui m'interesse pour l'instant)
Le probleme est qu'avec ce code le lien n'est efficace que sur le texte.
Si je rajoute un width:100% dans la definition de mon "#zone01 a", j'ai le lien sur tout le bloc definit par les balises "li" mais je ne vois plus les 2 images que j'insere avec les classes corner1 et corner2.
j'ai essaye de jour sur les positions (relative, absolute) et les z-index mais en vain.
Pourriez-vous m'aider soit dans la definition du lien soit dans le positonnement des images soit... en me disant de tout refaire
...
Modifié le 19 Nov 2004 - 14:45
D'abord un petit mot sur le contexte de mon probleme. Je cree des listes avec php en interrogeant une base MySql. Les differents termes d'une liste donnee appartiennent a plusieurs categories que je choisis d'identifier par un code couleur. Pour faire joli et grace au css chaque element de ma liste est par defaut ecrit en noir avec un fond de couleur et j'inverse lorsque la souris passe sur le lien (fond noir et texte en couleur). Pour faire encore plus joli je voudrais arrondir les angles (au sens propre) de chacun de mes liens. Je vais donc ajouter 4 images qui seront des "cache-coins" en gif utilisables quel que soit la couleur-code du lien.
Voici le code HTML (pour le test je fais abstraction de php/mysql)
<div id="zone01">
<ul>
<li class="color1"><div class="corner1"></div><div class="corner2"></div><a href="#">LIEN 1_________________</a></li>
<li class="color1"><div class="corner1"></div><div class="corner2"></div><a href="#">LIEN 2_________________</a></li>
<li class="color2"><div class="corner1"></div><div class="corner2"></div><a href="#">LIEN 3_________________</a></li>
</ul>
</div>
... et le CSS (ici je considere 2 codes-couleur > color1 et color2)
<style type="text/css">
ul,li {list-style-type:none; margin:0; padding:0}
a { text-decoration: none;}
#zone01 {
position: absolute;
top: 50px;
left: 50px;
height:500px;
width:800px;
z-index:1;
background:#000000;
}
#zone01 a {
color:#000000; font:30px; padding:10px; display:block;
z-index:1;
background: url("imageLB.gif") no-repeat left bottom; }
#zone01 a.:hover {background: #000000; }
#zone01 li {
width:600px;
margin:5px;
}
#zone01 li.color1 {
background: #0000FF url("imageRB.gif") no-repeat right bottom;
}
#zone01 li.color1 a:hover{
color:#0000FF;
}
#zone01 li.color2 {
background: #FF0000 url("imageRB.gif") no-repeat right bottom;
}
#zone01 li.color2 a:hover{
color: #FF0000;
}
.corner1 {
position relative;
background: url("imageLT.gif") no-repeat left top;
z-index:100;
}
.corner2 {
position absolute;
background: url("imageRT.gif") no-repeat right top;
z-index:100;
}
</style>
Premierement je ne sais pas si c'est la meilleur methode mais elle fonctionne sous IE (ce qui m'interesse pour l'instant)
Le probleme est qu'avec ce code le lien n'est efficace que sur le texte.
Si je rajoute un width:100% dans la definition de mon "#zone01 a", j'ai le lien sur tout le bloc definit par les balises "li" mais je ne vois plus les 2 images que j'insere avec les classes corner1 et corner2.
j'ai essaye de jour sur les positions (relative, absolute) et les z-index mais en vain.
Pourriez-vous m'aider soit dans la definition du lien soit dans le positonnement des images soit... en me disant de tout refaire
... Modifié le 19 Nov 2004 - 14:45
