Affichage d'un lien dans une zone hyperliée

J'ai rencontré un problème intéressant et je suis perplexe. Fondamentalement sur l'une de nos pages, nous avons quelques zones hyperliées. Ces zones sont non seulement cliquables là où elles ont du texte mais dans tout l'arrière-plan en définissant le lien avec display:block. Vous pouvez voir un exemple simple d'une telle zone cliquable here.Affichage d'un lien dans une zone hyperliée

Alors récemment, les pouvoirs m'ont demandé d'ajouter un autre lien dans cette zone. Le lien interne aura une cible différente de la zone cliquable et ne sera cliquable que pour son texte immédiat et le reste de la zone cliquable l'entourera. Vous pouvez voir comment cela s'emboîte dans ce demo (le bit jaune représente la partie cliquable du lien interne et le rouge représente le lien externe). NOTE: Je me rends compte que cela semble une mise en œuvre très désordonnée, mais j'ai peur que ce soit hors de mes mains.

De par sa conception (et pour cause) Je ne peux pas simplement nid mes <a> balises comme ceci:

<a href="#" class="clickable_area"> 
    <span>RED Background and clickable</span><br/> 
    <span>RED Background and clickable</span><br/> 
    <span>RED Background and clickable</span><br/> 
    <a class="inner_link" href="#">Yellow background and it's own link</a><br/> 
</a>

Essayer de imbriquer les balises comme celui-ci fait le lien externe à fermer prématurément par la première instance de </a> comme vu here. Une solution peut être de faire du lien interne un élément span, puis d'utiliser les événements onclick pour effectuer le lien hypertexte via JavaScript, mais je ne trouve pas cette approche et je préfère vraiment éviter les solutions de contournement JavaScript.

J'ai essayé quelques solutions de contournement avec CSS, etc., mais jusqu'à présent, je suis au sec. J'ai le sentiment que le positionnement absolu ou la marge négative pourrait être la clé, mais je n'ai jamais été bon non plus.

Si quelqu'un pouvait offrir des suggestions, je serais très reconnaissant.

Source

2010-11-24 irishbuzz

ce ne sera pas aider, mais les ancres de nidification comme ce serait le balisage invalide et pourrait causer des problèmes plus bas de la ligne. Je doute que cela puisse être fait avec des moyens * conventionnels *, mais alors SO abrite des dieux parmi les hommes. Je suggère également de retravailler l'implémentation si possible (c'est-à-dire en utilisant un div divisible qui pourrait facilement supporter plusieurs liens de cette façon) (mais aussi d'apprécier l'entêtement des "pouvoirs") – Ross

Vous ne pouvez pas imbriquer des liens. Ma suggestion est de positionner absolument le lien intérieur au-dessus de la zone extérieure, un peu comme ceci:

<div class="container" style="position:relative"> 
<a href="..."> 
<span>RED Background and clickable</span><br/> 
<span>RED Background and clickable</span><br/> 
<span>RED Background and clickable</span><br/> 
</a> 
<a href="..." style="position:absolute;top:...px;left:...px">link 2</a> 
</div>

Source

2010-11-24 22:06:18

Merci Diodeus.C'est certainement une solution possible d'accord [voir ici] (http://jsfiddle.net/JLpsG/). Je vais laisser la question ouverte encore une fois pour voir si quelqu'un peut trouver une meilleure réponse, mais j'accepterai sinon. – irishbuzz

Ok, cela ressemble certainement à la meilleure réponse. La démo dans mon dernier commentaire utilise 'padding-bottom' sur l'élément de zone rouge cliquable afin d'étirer la zone suffisamment pour que le lien interne puisse être déplacé. Il est en fait plus facile d'ajouter un «
» supplémentaire dans la zone cliquable, car cela permet également d'obtenir l'espace parfait. Merci encore Diodeus – irishbuzz

j'utiliser un div pour envelopper vos liens. Est-ce ce que vous allez faire? http://jsfiddle.net/wcCMC/3/

Source

2010-11-24 22:12:22 stevelove

Ce serait une situation normale, mais irishbuzz sed la suivante NOTE: Je me rends compte que cela semble une mise en œuvre très désordonné, mais je crains que c'est hors de mes mains. Par conception (et pour une bonne raison) je ne peux pas simplement imbriquer mes étiquettes – Michael

merci d'avoir pris le temps de répondre. J'ai ajouté à ce que Michael commente - la zone cliquable jaune ne peut couvrir que le texte du 2ème lien alors que le fond rouge doit remplir la pièce restante vers la droite. – irishbuzz

Vous ne pouvez pas imbriquer des liens, mais utiliser un positionnement absolu.

<div id="wrapper"> 
    <a id="bigred" href="...">Big clickable area</a> 
    <a id="yellow" href="...">Yellow background link</a> 
</div>

CSS

#wrapper { 
    position: relative; 
    height: 300px; 
    width: 500px; 
} 

#bigred { 
    background: #ff0000; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 300px; 
    width: 500px; 
} 

#yellow { 
    background: #ffff00 
    position: absolute; 
    top: 30px; 
    left: 30px; 
}

Les deux liens seront cliquables. Le jaune est dessiné sur le rouge en raison de l'ordre de la source. Si vous modifiez la commande, vous devrez utiliser z-index pour contrôler quels écrans sont affichés.

Source

2010-11-24 22:15:06

+1 pour solution de travail. Merci Martin. Je pense que les solutions de Diodeus et Michael sont peut-être un peu meilleures car elles n'ont pas besoin du lien 'bigred' pour utiliser la position absolue ou pour définir la largeur/hauteur. – irishbuzz

Ici, vous allez un exemple de travail:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<body> 
<style> 
a {text-decoration:none; background-color:red} 
.clickable_area{display:block;color:#000; padding-bottom: 20px;} 
.container{position: relative;} 
.inner_link{position:absolute; bottom: 0px; background-color:yellow} 
</style> 

    <div class="container"> 
     <a href="#" class="clickable_area"> 
      <span>RED Background and clickable</span><br/> 
      <span>RED Background and clickable</span><br/> 
      <span>RED Background and clickable</span><br/> 
     </a> 
     <a class="inner_link" href="#">Yellow background and it's own link</a> 
    </div> 

</body> 
</html>

Source

2010-11-24 22:17:56 Michael

+1 pour solution de travail. Merci Michael. – irishbuzz

Votre bienvenue :) – Michael

Affichage d'un lien dans une zone hyperliée

Répondre

Questions connexes