[Résolu] Lien, dans un lien.

Bonjour à tous,

Tout d'abord, désolé, je ne savais pas si je devais placé ce thread dans la rubrique CSS ou HTML.

Alors voilà le problème:

J'ai une div, qui englobe du texte et une image. J'ai englobé cette div d'un lien (<a>), qui fait que quand je clique sur la div (donc même le background de la div), cela m'emmène sur une page. Et ça marche très bien.

Mais maintenant, j'aimerai que lorsqu'on clique sur l'image (qui est une miniature), ça ouvre en popup l'image (donc le lien directe de l'image), ce qui fait que je dois encore faire un lien qui englobe l'image (<a><img/></a>).
Mais ça pose problème, car lorsque je fais ça, mon premier lien qui englobe la div n'est plus actif!

Comment résoudre le problème?

Merci d'avance.
Modifié par Syntaxlb (21 Oct 2010 - 21:46)

Salut,

Syntaxlb a écrit :
J'ai englobé cette div d'un lien

Fail ! Il n'est pas correct d'encapsuler un élément de rendu "bloc" dans un élément "en-ligne" (Structure HTML et rendu CSS des balises : bloc et en-ligne).

Une ébauche de solution adaptée qui permet en plus de résoudre ton problème de popup (sémantiquement optimisable si tu fournis un croquis ou un exemple de ce que tu souhaites obtenir) :

<div id="conteneur">
	<p>Texte</p>
	<p class="img"><a href="#"><img src="img.jpg" alt=""/></a></p>
	<p class="lien"><a href="#">Voir la page</a></p>
</div>

div#conteneur { position:relative; }
div#conteneur p.lien a { z-index:1; display:block; width:100%; height:100%; text-indent:-9999px; position:absolute; top:0; left:0; }
div#conteneur p.img { z-index:2; position:relative; }  

Modifié par BeliG (21 Oct 2010 - 13:48)

Alors là, énorme merci !

C'est exactement ce que je voulais.

Encore merci, j'ai appris 2 choses :

- Qu'il n'est pas correcte d'encapsuler un "élément" bloc dans un élément "ligne"
- L'astuce concernant le lien qui prend sur toute la div. (D'ailleurs c'est une astuce connue ? Où tu la sors directement de tes connaissances en html/css ?)
Modifié par Syntaxlb (21 Oct 2010 - 18:13)

- Qu'il n'est pas correcte d'encapsuler un "élément" bloc dans un élément "ligne"

Précision: Ce n'est pas correct en XHTML.

En HTML5 il est possible de faire ceci

<a href="index.html">
   <h2>Mon titre</h2>
   <p>Vous aimeriez tout savoir sur bla bla bla.. ? </p>
</a>

Il n'est cependant pas possible d'imbriqué des <a> ensemble, c'est contre-nature en fait et la méthode de BeliG est une façon de faire.

Sorano a écrit :
En HTML5 il est possible de faire ceci

Utiliser HTML 5 aujourd'hui, c'est de la frime.

Dredÿ FTW ! \o/

Non, utiliser HTML5 aujourd'hui c'est anticiper

@RACBasket : ah-ah.

@Sorano :

Sorano a écrit :
Qu'il n'est pas correcte d'encapsuler un "élément" bloc dans un élément "ligne"
Précision: Ce n'est pas correct en XHTML.
En HTML5 il est possible de faire ceci

Je me trompe peut-être, mais l'élément <a> semble être une exception (voir même l'exception ?). Les écritures suivantes :

<span><div></div></span>
<em><p></p></em>

Ne sont pas plus valides en HTML5 qu'en HTML4.
Modifié par BeliG (22 Oct 2010 - 11:38)

BeliG a écrit :

Je me trompe peut-être, mais l'élément <a> semble être une exception

Je crois aussi

Patidou a écrit :
Je crois aussi

Et ? C'est tout ?

EDIT : Euuh, tu crois que je me trompe ou que le lien est une exception ?
Modifié par BeliG (22 Oct 2010 - 10:41)

http://dev.w3.org/html5/spec/Overview.html#the-a-element

http://html5doctor.com/block-level-links-in-html-5/

Je sais pas pour vous mais j'ai des documents qui appui mes propos, dont le document du W3C.

BeliG a écrit :
Et ? C'est tout ?

EDIT : Euuh, tu crois que je me trompe ou que le lien est une exception ?

Que c'est une exception, c'est vrai que j'ai été un peu court là.

Sorano a écrit :
Je sais pas pour vous mais j'ai des documents qui appui mes propos, dont le document du W3C.

Ces deux documents ne concernent que la balise <a>, et ne généralisent en rien sur toutes les balises de rendu "en-ligne" d'HTML4.

Structure HTML et rendu CSS des balises : bloc et en-ligne
HTML5 se dévoile

D'après ce que j'en ai compris, il n'y a plus de type %block et %inline dans HTML5. Chaque élément appartient à une nouvelle catégorie, qui n'a pas forcément de rapport avec son rendu CSS.

Comparons <a> avec <em>. Les deux appartiennent à la catégorie "Flow content" (conteneur d'au moins un élément "texte"), sauf que <em> fait en plus parti de la catégorie "Phrasing content" (élément "texte"). L'élément <a> peut lui aussi hériter de cette catégorie, mais à condition qu'il ne contienne uniquement que du contenu "Phrasing" ("When the element only contains phrasing content: phrasing content.").

Un élément de type "Flow content" peut contenir des éléments de n'importe quelle autre catégorie (Phrasing, Heading, etc.), à la différence d'un élément "Phrasing content" qui ne peut contenir que du "Embedded content" (voir schéma).

L'élément <a> se différencie donc structurellement de <em> (et au passage de tous les autres éléments %inline d'HTML4) car il n'appartient pas obligatoirement à la catégorie "Phrasing content".
Modifié par BeliG (22 Oct 2010 - 16:04)