[Résolu] Div cliquable sur background

Bonjour à tous,

Je dois créer un espace cliquable sur un arrière plan dans mon site. C'est une copie d'écran d'un logiciel dont je dois revoir certaines parties, mais la copie d'écran présente les éléments que je souhaite conserver. Je veux donc rendre un bouton cliquable. J'ai pour cela créé une div de taille adaptée et positionnée en absolu, transparente et vide de texte.
Problème : elle n'apparait en zone cliquable que lorsqu'elle contient du texte, seule la zone de texte est cliquable (plus petite que la div dans son ensemble).

Mon html :

<div id="accueil"><a href="index.html"></a></div>

Mon CSS :

#accueil {position:absolute;
width:150px;
height:40px;
margin-left:750px;
margin-top:145px;
background-color: transparent;
}

#accueil a{text-decoration:none;
display:block;}

Auriez vous une idée ? Dois-je mapper mon arrière plan plutôt ?

Par avance, merci.

Bonjour,
De manière sale :

<a href="index.html"><div id="accueil"></div></a>

Sinon à gérer avec Javascript =/

Ah, suis-je bête...

Sinon, tu style l'élément a dans le css avec un display : block; et les dimensions de ta div.
Modifié par Gothor (09 May 2012 - 11:42)

C'est pas propre mais ça marche
(C'est pour une maquette, donc si ça passe pas au validateur du W3C c'est pas scandaleux).
Et surtout ça m'évite de faire du JS (beuuuurk) ...

Merci beaucoup !

DansTesReves a écrit :
(C'est pour une maquette, donc si ça passe pas au validateur du W3C c'est pas scandaleux).

Euh... Si, le validateur n'est qu'un outils, il vérifie la syntaxe du code, mais pas qu'il est bien utilisé.

DansTesReves a écrit :
(Et surtout ça m'évite de faire du JS (beuuuurk) ...

Bah en fait, le truc "beuuuurk", c'est lui le truc propre et qui permettrait de rendre ta pub accessible.

Oui je sais bien mais la je suis un peu prise par le temps, et je maîtrise vraiment pas le JavaScript donc pour l'instant la solution "pas propre" suffira très bien
Quand j'aurai plus de temps pour fignoler les choses je reprendrais ça.

Merci bien

Sinon, en css, de manière propre (enfin propre... qui suis-je pour juger ce qui est propre ou pas...) c'est faisable...

<div><a href="http://www.google.fr"></a></div>

div {
    position:absolute;
    margin-left:750px;
    margin-top:145px;
    background-color: transparent;
}
a {
    display : block;
    width : 150px;
    height : 40px;
    text-decoration : none;
}

Modifié par Gothor (09 May 2012 - 11:53)

Ah voilà, je pensais qu'il n'était pas nécessaire de préciser la taille du a vu qu'il était dans la div (à laquelle j'avais attribué une taille). Je comprends mieux mon erreur avec du recul.
Merci beaucoup !

Gothor, ce n'est pas vraiment propre puisque ton lien n'a pas d'intitulé.

En fait, il est aussi possible de tout simplement placer le contenu cliquable (généralement des images) dans le code HTML.

Mui j'y ai pensé...
Est-ce que mettre un texte dedans qu'on cacherait en CSS serait mieux ?

Oui mais j'ai pas de contenu cliquable, je veux donner l'illusion qu'on clique sur un lien alors que c'est juste une zone transparente au dessus d'un arrière plan ...

Et je ne sais pas mettre du texte en transparence