Lien sur un bloc complet

Salut à tous,

J'ai besoin de vos lumières pour une manip un peu tordue.

J'ai un bloc on ne peut plus classique avec, à l'intérieur, un lien sur une image. Je voudrai faire en sorte que le lien s'applique sur l'ensemble du bloc (<div class="albums">) et pas uniquement sur l'image.

Voilà le code html :

<div class="albums">
	<a href="photos.php?album=norvege">
		<img src="http://lh4.ggpht.com/norvege.jpg" width="160" height="160" alt="norvege" />
	</a>
	<h2>Norvège</h2>
	<p class="datealbums">04/10/2009</p>
	<p class="nbphotos">94 photos</p>
</div>

Et le CSS :

.albums {
	display: inline-block;
	width: 160px;	/*Largeur de la photo + bordure*/
	height: 240px;
	overflow: hidden;
	margin: 0 2em 2em 0;
	padding: .8em;
	vertical-align: top;
	word-wrap: break-word;
	text-align: left;
	background: #333;
}

* html .albums {
	display:inline;	/* for IE 6 */
}
* + html .albums {
	display:inline;	/* for IE 7 */
}

Seule obligation pour le css, utiliser "display:inline-block".

Si ce n'est pas possible en html "propre", peut-être que cela peut se faire avec Jquery ?

Merci d'avance pour votre aide.

a+
Modifié par Gooze (03 Aug 2010 - 09:42)

Bonjour


jette un coup d'oeil ici ou ici

En résumé, un lien a est un élément inline, tu ne peux y mettre que des éléments inline. Si tu veux faire un lien sur tout un bloc, il faut remettre le même lien a sur chaque élément du bloc, ce qui est lourd, mais bon.

merci pour ta réponse.

Je me rend compte que ce n'est pas la bonne approche.

Ce que je voudrais c'est qu'en passant la souris sur n'importe quelle partie du bloc gris le lien soit actif.
La pour le moment le lien n'est que sur l'image.



Est-ce qu'il y a une solution pour faire ca "proprement" ?

Merci
a+

Humm j'aurais tendance à dire impossible en html/css avec juste un lien. Effectivement, même si tu mets des liens sur tous les éléments ton fond gris ne sera pas clicable.

Par contre tu peux utiliser du jquery, l'exemple 6 ici te donnera le code. Il doit exister d'autres trucs en javascript tout simple, mais je laisserai les spécialistes répondre sur ce sujet ^^

Génial, ca marche.

Merci bien !!!

a+

Salut,

Une autre approche p-ê plus verbeuse mais qui peut avoir son intérêt ici : http://js4design.com/etendre-la-zone-cliquable-des-liens-aux-elements-parents-avec-jquery-864

Salut,

Ou alors, on peut aussi passer au HTML5 puisque dans cette version du HTML, les liens sont de catégorie "Flow content" et peuvent donc contenir des paragraphes et autres titres.

Bonjour,
la solution sans JS consiste à étendre la zone cliquable du lien (avec marges négative + padding), pas si compliqué que ça.

Hello,

Agylus a écrit :
Ou alors, on peut aussi passer au HTML5 puisque dans cette version du HTML, les liens sont de catégorie "Flow content" et peuvent donc contenir des paragraphes et autres titres.

La catégorie d'un élément ("flow content") ne décrit pas son type de contenu. Celui-ci est décrit de la façon suivante pour les liens : transparent, sans descendants interactifs. En gros, ils peuvent contenir la même chose que l'élément parent, sauf d'autres liens, boutons, ...

Pour répondre à la question initiale : pour ma part, j'éviterais les bidouilles CSS. Je choisirais la solution "lien simple" + JS pour étendre la zone de clic si nécessaire, ou le lien sur le bloc, à condition que les problèmes d'interopérabilité soient limités.

<edit>Ou alors, la solution simple proposée dans un autre sujet pointé par saiko_sama :
Une balise <p> dans une balise <a> =erreur, comment y reme
Modifié par Julien Royer (04 Aug 2010 - 11:13)

Hermann a écrit :
la solution sans JS consiste à étendre la zone cliquable du lien (avec marges négative + padding), pas si compliqué que ça.

Ou à faire un code HTML simple, du genre:

<a href="..." class="album">
  <img alt="" src="...">
  <strong>Nom de l'album</strong>
  <span class="date">DD/MM/YYYY</span>
  <span class="count">XXX photos</span>
</a>

Vu le peu de contenu après le nom de l'album, utiliser un titre HN ne me semble pas indispensable.
Modifié par Florent V. (04 Aug 2010 - 11:58)

Florent V. a écrit :

Ou à faire un code HTML simple, du genre:

<a href="..." class="album">
  <img alt="" src="...">
  <strong>Nom de l'album</strong>
  <span class="date">DD/MM/YYYY</span>
  <span class="count">XXX photos</span>
</a>

Vu le peu de contenu après le nom de l'album, utiliser un titre HN ne me semble pas indispensable.

Oui effectivement c'est la solution la plus adaptée (avec les liens compris dans des LI dans le cas dune galerie d'images)