Un lien autour d'un div... ???

Bonjour à tous,


Je souhaite créer n div correspondant à n rubriques dans mon menu, puisque div permet de considérer toute la longueur de la division (au contraire de span). Jusque là tout va bien.

Je souhaite créer des liens dans ces div.

Si je fais

<div>
  <a href="monlien.php">Le Lien</a>
</div>

à ce moment là le lien ne concerne que le texte.

Mais si je fais

<a href="monlien.php">
  <div>Le Lien</div>
</a>

à ce moment là, le lien concerne en effet toute la division et non pas uniquement le texte.

C'est ce que je souhaite faire. Je souhaite mettre des div, et les entourer de liens.

Mais...

La validation XHTML 1.0 strict m'indique que ce n'est pas valide...


Comment procéder, sachant que je ne souhaite pas utiliser span ??

Je vous remercie par avance pour votre aide.

ben tu pourrai peut etre mettre tout ce que tu as (en css) dans ta div par exemple #lien dans une class --> .lien

a ce moment la, tu pourrais avoir

<div id="quelconque"<a class="lien" href="mon lien">mon lien</a></div>

le tout inserer dans une balise Div quelconque

Effectivement, mais en faisant comme ça, le lien ne portera que sur le texte et non sur la div

il y a quoi dans ta div exactement ? enterme de css ?
Modifié par Philippe (11 Feb 2006 - 00:01)

div.rubrique {
	color: #ffffff;
	font-size: 18px;
	font-style: italic;
	position: relative;
	width: 128px;
	padding-left: 16px;
}

div.rubrique:hover {
	background-color: #888888;
}

y a un truc qui va pas deja, le hover n'est applicable que à "a" sur IE

ensuite, si tu met ça,

div.rubrique a{

	color: #ffffff;

	font-size: 18px;

	font-style: italic;

	position: relative;

	width: 128px;

	padding-left: 16px;

}



div.rubrique a:hover {

	background-color: #888888;

}

ça donne quoi?

Ca marche, mais à moitié

En effet, ça fait bien ce que je souhaite, mais ça ne va pas au bout de la div (qui fait 128px) ; ça donne la même chose qu'avec un span.

Peut-être qu'un lien pourra vous aider :

http://www.us-pouyastrucaise.com/test/

J'ai testé ça, et ça marche tranquillement :

http://web.covertprestige.info/test/01-zone-cliquable-graphique-et-accessible.html
Lien sur une zone (div), valide XHTML 1.0 Strict

Sinon, tu peux aussi te contenter de mettre des liens (balise a, de type en ligne), sans utiliser de div, et ensuite de transformer tes liens en blocs.

a {display: block;}

Impeccable, c'est ça que je cherchais en fait :

a {display: block;}

Merci beaucoup mpop !!!

Par contre, là j'ai un truc hallucinant :

http://www.us-pouyastrucaise.com/test/index2.php

Sur Internet Explorer, tout fonctionne normalement.

Sur Firefox, j'ai un gros carré noir sur la quasi totalité de la page, et là, j'arrive vraiment pas à comprendre.

Une indication, cette erreur est survenue lorsque j'ai mis trois div côte à côte (grâce à float: left;) dans un même conteneur div.


Si quelqu'un peut m'aider, là ça sera extra.

Bonjour,

Pour que l'arrière-plan blanc joue son rôle, il faut que la boîte de l'élément conteneur des flottants s'étende sur toute la hauteur de ceux-ci.

Avec ta CSS actuelle, cela ne peut se produire que dans IE 5.x-6.0 windows, car tu fais jouer (sans le savoir) un bug de celui-ci qui provoque ce comportement.

Pour obtenir le résultat attendu dans les navigateurs conformes, il faut préciser que ce conteneur doit s'étendre en hauteur en tenant compte des 3 flottants. Pour cela, ajouter la propriété overflow:auto à #page.

Et please, supprimer toutes les positions relatives inutiles (sauf celle de body utile pour le centrage, mais voir ci-dessous).
(toujours cette même interrogation de ma part: mais d'où vient cette manie de tout positionner quand on se met à CSS ? Sans doute est-ce comme apprendre à nager: il faut parvenir à se laisser aller dans le flux et renoncer à cette idée issue des tableau selon laquelle la page Web serait une grille où tout se positionne) ...

Par ailleurs, autant corriger également :
- le titrage: titre h1, titres sur les rubriques, etc.
- la structure des deux listes (rubriques et villages) : ce sont des listes, alors... utiliser des listes ul
- la méthode de centrage (marges négatives) : la page est rognée dès que la fenêtre d'affichage n'est pas assez large. Ne pas centrer par les marges négatives. Utiliser les marges "auto".
Modifié par Laurent Denis (11 Feb 2006 - 07:04)