simulation de boutons en CSS

Bonjour à tous,

Je débute en programmation et depuis hier je suis face à un problème insoluble.

Je tente de simuler des boutons. C'est à dire que j'ai créé dans Photoshop, trois états de boutons pour chacun de mes liens de menu. Jusque là rien de compliqué.

Ensuite, comme je veux les aligner horizontalement sur deux lignes (trois icones par ligne), j'ai créé un tableau, pour que cela soit plus simple et tienne en place, seulement, comme je voulais décaler les deux lignes j'ai créé un <table id= "ligne1" ></table> et un <table id= "ligne2" ></table>.

J'ai ensuite créé trois cases par ligne avec les dimensions souhaitées et inséré mes liens vers les autres pages. Jusque là rien de compliqué.

Là où ça se complique c'est quand j'insère mes images en CSS, j'en ai mis une à l'état a, une à l'état hover et une à l'état focus et tout ce qui apparait c'est l'image à l'état hover et sans aucun lien possible.

De plus, j'ai découvert que ces images avaient infesté tous mes liens alors qu'apparemment j'ai bien défini LE lien en question et non pas TOUS les liens.


Code HTML :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<!-- menu --> <table id= "ligne1" > <tr> <td class= "acceuil"><a href= "index_new.php"></a></td> <td class= "formation"><a href= "./pages/formation.php"></a></td> <td class= "experience"><a href= "./pages/experience.php"></a></td> </tr> </table>   <table id= "ligne2" > <tr> <td id= "informatique"><a href= "./pages/informatique.php"></a></td> <td id= "langues"><a href= "./pages/langues.php"></a></td> <td id= "divers"><a href= "./pages/divers.php"></a></td> </tr> </table>

---

Code CSS :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

td, .acceuil, a { background: url("../boutons/btacceuilnul.png") no-repeat ; }   td, .acceuil, a :hover { background: url("../boutons/btacceuilhover.png") no-repeat ; }   td, .acceuil, a :focus { background: url("../boutons/btacceuilclic.png") no-repeat ; }

---

... le code est ensuite le même pour chaque onglet de mon menu.

Aidez moi s'il vous plait, je craque :evilred: !!!!

Merci d'avance

Attends avant de jeter ton ordi par la fenetre. Je pense que ton problème n'est pas insoluble.

Tout d'abord la syntaxe de ton css n'est pas bonne. c'est normal que le style s'applique à tous les liens.

Code:

---

1 2	td, .acceuil, a { }

---

les class ou élément séparé par des virgules prennent individuellement le style. Dans ton cas, tu appliques le style à tous les td, tous les .acceuil, tous les a.

Si tu veux préciser un chemin sépare jsute par des espaces

Code:

---

1 2	td .acceuil a { }

---

Ici, le style ne s'applique qu'au <a> qui sont dans un élément .acceuil qui se trouve dans un td.

Citation:

---

tout ce qui apparait c'est l'image à l'état hover et sans aucun lien possible.

---

La aussi c'est normal. il ne faut pas d'espace entre a et :hover.

Enfin,

le :focus ne fonctionne pas sous IE. Utilise plutot le :active.

D'ailleurs je vois pas trop la différence entre ses deux pseudo classes

Merci beaucoup Damouille pour cette réponse supra rapide,

Effectivement les images n'apparaissent plus sur tous mes liens, remarque je suppose que c'est normal puisqu'ils n'apparaissent plus du tout !!!!! Même dans mes cases ! :roll:

Je vais donc poursuivre mes investigations et y passer une nuit supplémentaire !

D'ailleurs en parlant d'hover, j'ai mis également une photo toute simple que je veux faire changer par simple passage de la souris :

Code:

---

<div class= "identite"></div>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

.identite { z-index: 10 ; background: url("../images/identitestyle.png") no-repeat ; display: block ; width: 184px ; height: 184px ; margin-left: -80px ; margin-top: -10px ; float: left ; }   .identite:hover   { z-index: 10 ; background: url("../images/identite.png") no-repeat ; width: 184px ; height: 184px ; margin-left: -80px ; margin-top: -10px ; float: left ; }

---

Mais c'est toujours pareil, que ce soit Mozilla ou IE, rien ne fonctionne comme je veux, ceci dit, je n'ai jamais réussi à faire fonctionner cette fonction hover, pourtant elle m'intéresse énormément, la seule fois où j'ai réussi à obtenir un résultat, il ne fonctionnait que sous IE et pas Mozilla.

J'ai déjà vu dans un forum, qu'il fallait utiliser la fonction CSS "display: block" mais je ne sais aps quelle utilité elle a...

Merci encore et avis à tous, jusque là tout fonctionnait plutôt bien mais là j'y passe mes nuits et rien ne fonctionne, c'est un peu vexant !!!!

Bonjour Audrey,

Pour le dernier cas que tu exposes, il y a 2 ou 3 petits détails qui ne sont pas graves mais autant prendre de bonnes habitudes.

L'espace entre class= et "identite" n'a pas lieu d'être.

<div class= "identite"></div> ---> <div class="identite"></div>

D'une manière générale, pas besoin de mettre d'espace après le signe =


Dans ton CSS, les guillemets ne sont pas utiles pour l'URL de l'image.

background: url("../images/identitestyle.png") no-repeat ; ---> background: url(../images/identitestyle.png) no-repeat;


Ensuite, il faut savoir que la propriété :hover ne fonctionne que sur un lien avec IE6.
Là, comme tu utilises le :hover sur un div, ça ne fonctionnera pas avec IE6.


Lorsque tu mets une images de fond sur un lien (a), il faut penser à définir le lien comme un élément de type block (display:block) en précisant une largeur et une hauteur, sinon tu risques de ne pas voir l'image de fond dans sa totalité.


As-tu une page en ligne pour tenter de trouver pourquoi tes images ne s'affichent pas ?
Tu as vérifié les URL, les noms de dossiers, les noms d'images, les extensions ?

Bien que cela soit plus propre via des div, solution qui fonctionne avec des table :

Code:

---

1 2 3 4 5 6 7 8 9

<!-- Menu --> <table id="ligne1"> <tr> <td><a class="btnAccueil" href="index_new.php" title="ton_title"></a></td> <td><a class="btnFormation" href="./pages/formation.php" title="ton_title"></a></td> <td><a class="btnExperience" href="./pages/experience.php" title="ton_title"></a></td> </tr> </table>

---

Code:

---

1 2 3 4 5 6 7 8 9

.btnAccueil { display:block; width:16px; height:16px; background:url(img/imgAccueilA.png); background-repeat:no-repeat; } .btnAccueil:hover { background:url(img/imgAccueilHover.png); background-repeat:no-repeat; }   .btnFormation { display:block; width:16px; height:16px; background:url(img/imgFormationA.png); background-repeat:no-repeat; } .btnFormation:hover { background:url(img/imgFormationHover.png); background-repeat:no-repeat; }   .btnExperience { display:block; width:16px; height:16px; background:url(img/imgExperienceA.png); background-repeat:no-repeat; } .btnExperience:hover { background:url(img/imgExperienceHover.png); background-repeat:no-repeat; }

---

Le code CSS pourrait être plus court...

Effectivement, il y avait pas mal de petits défauts et je me rends compte que plus j'en apprends, plus je veux en ajouter et plus ça bogue !!!

Merci beaucoup de votre aide ...