[résolu] Comment créer un lien qui couvre tout un <div> ?

Bonsoir,

J'ai une image dans le "header" de mon site, contenue dans un div, comme-ceci :

<div id="top">&nbsp;</div>

Puis dans le style.css comme ceci :

/* Header
-------------------------------------------------------- */
#top {
	/*width: 800px;*/
	width: 732px;
	background: transparent url(img/top.jpg) no-repeat left bottom;
	padding: 66px 34px 46px 34px;
	margin: 0 auto;
}

J'ai essayé de mettre un lien qui "encapsule" la zone du "div" mais ça bug.

J'ai aussi essayé de faire comme ça mais ça ne me fait qu'un seule ligne cliquable au lieu que tout le div soit cliqualbe...

<div id="top"><a href="http://www.yazerty.net/" style="margin: auto; display: block;">&nbsp;</a></div>

Je n'arrive pas à trouver l'astuce sur le net . Comment faire svp ?
Modifié par Yazerty (29 Dec 2006 - 00:03)

Salut.

J'arrive à faire ce que tu cherches en créant en utilisant height: 100%; et un contexte de formatage :

code html

<div id="header">
   <a href="#" title="lien sur toute la surface du header">Lien</a>
</div>

code CSS

#header {
   overflow: auto ; /* Création du nouveau contexte de formatage */
   }
#header a {
   display: block ;
   height: 100% ;
}

A priori, ça ne devrait pas fonctionner tel quel pour IE 6. Il faut adapter en dotant #header de layout :

#header {
   overflow: visible ;
   height: 1px;
}

par exemple. A appliquer via les commentaires conditionnels.

Bonjour,

Une image lien est une image fonctionnelle qui doit être accessible en toute occasion, notamment CSS désactivé, sur les navigateurs textes, au travers des fonctionnalités des aides techniques.

Ce n'est pas une image de décoration, elle doit donc être implémentée dans le code lui-même et surtout pas en propriété de fond d'élément.

Accessoirement ça règle ton problème de lien...

Jean-pierre

Note en passant : pourquoi se limiter à un contenu de 800px de large ? Vu que les utilisateurs ayant un écran en 800x600 ne pourront pas voir toute la largeur du site d'un coup, autant se lacher et monter jusqu'à 900 ou 950 pixels, non ?

Pour rappel, pour du 800x600 on a une largeur utilisable de 770-750px, suivant la taille des bordures de la fenêtre du navigateur, la largeur de la barre de défilement vertical, le fait que la fenêtre du navigateur prenne tout l'écran ou pas tout à fait, etc.

Edit : et la solution de jpv me semble effectivement la plus efficace.
Modifié par mpop (28 Dec 2006 - 23:52)

Merci pour vos réponses et conseils .

J'ai opté pour la solution de jpv, qui m'a paru être la plus simple et fonctionnelle dans mon cas.

Concernant la largeur, il s'agit des dimensions du thème par défaut de DotClear 2. Je pense qu'elles ont été choisies car elles permettent de voir tout le contenu du blog en 800*600, même si on ne voit pas les marges (et quelques pixels rognés sur le "blanc" aussi, mais très peu chez moi), et d'avoir une présentation avec des marges grises bien proportionnées (pas trop petites) en 1024. C'est l'explication que je m'en fait, mais peut-être y en a-t-il une autre...
C'est en tout cas une remarque pertinente effectivement.