Fai un div in un link

Ho un <div>blocco con alcuni contenuti visivi fantasiosi che non voglio cambiare. Voglio renderlo un link cliccabile.

Sto cercando qualcosa di simile <a href="…"><div> … </div></a>, ma che è XHTML 1.1 valido.

Sono venuto qui nella speranza di trovare una soluzione migliore della mia, ma non mi piacciono quelli offerti qui. Penso che alcuni di voi abbiano frainteso la domanda. L'OP vuole fare in modo che un div pieno di contenuti si comporti come un collegamento. Un esempio di questo potrebbe essere la pubblicità su Facebook: se guardi, in realtà sono un markup corretto.

Per me i no-no sono: javascript (non dovrebbe essere necessario solo per un collegamento e pessima SEO / accessibilità); HTML non valido.

In sostanza è questo:

• Costruisci il tuo pannello usando le normali tecniche CSS e HTML valido.
• Da qualche parte lì dentro metti un link che vuoi essere il link predefinito se l'utente fa clic sul pannello (puoi avere anche altri link).
• All'interno di quel link, inserisci un tag span vuoto ( <span></span>, non <span />- grazie @Campey)
• dare la posizione del pannello: relativa

• applica il seguente CSS all'intervallo vuoto:

  { 
    position:absolute; 
    width:100%;
    height:100%;
    top:0;
    left: 0;
  
    z-index: 1;
  
    /* fixes overlap error in IE7/8, 
       make sure you have an empty gif */
    background-image: url('empty.gif');
  }   

  Ora coprirà il pannello e, poiché si trova all'interno di un <A>tag, è un link cliccabile

• fornire qualsiasi altro collegamento all'interno della posizione del pannello: relativo e un indice z adatto (> 1) per portarli davanti al collegamento di span predefinito

Non puoi fare in modo che il divlink a stesso, ma puoi fare in modo che un <a>tag agisca come un block, lo stesso comportamento che <div>ha.

a {
    display: block;
}

È quindi possibile impostare la larghezza e l'altezza su di esso.

Questa è una domanda antica, ma ho pensato di rispondere poiché tutti qui hanno delle soluzioni pazze. In realtà è molto molto semplice ...

Un tag anchor funziona così:

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

Era talmente ...

<a href="whatever you want"> <div id="thediv" /> </a>

Anche se non sono sicuro che questo sia valido. Se questo è il ragionamento alla base delle soluzioni vocali, allora mi scuso ...

Richiede un po 'di javascript. Ma il tuo divsarebbe cliccabile.

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

Questa opzione non richiede un file empty.gif come nella risposta più votata:

HTML:

 <div class="feature">
       <a href="http://www.example.com"></a>
 </div>

CSS:

 div.feature {
        position: relative;
    }

    div.feature a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
    }

Come proposto su http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/

Questa è una soluzione "valida" per raggiungere ciò che desideri.

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

Ma molto probabilmente quello che vuoi davvero è avere un <a>tag visualizzato come elemento a livello di blocco.

Non consiglierei l'uso di JavaScript per simulare un collegamento ipertestuale in quanto vanifica lo scopo della convalida del markup, che in definitiva è quello di promuovere l'accessibilità (la pubblicazione di documenti ben formati seguendo le regole semantiche adeguate minimizza la possibilità che lo stesso documento venga interpretato in modo diverso da browser diversi).

Sarebbe preferibile pubblicare una pagina Web che non convalida, ma esegue il rendering e funziona correttamente su tutti i browser , inclusi quelli con JavaScript disabilitato. Inoltre, l'utilizzo onclicknon fornisce le informazioni semantiche per uno screen reader per determinare che il div funziona come un collegamento.

Il modo più pulito sarebbe utilizzare jQuery con i tag di dati introdotti in HTML. Con questa soluzione è possibile creare un collegamento su ogni tag desiderato. Per prima cosa definire il tag (ad es. Div) con un tag di collegamento dati:

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>

Ora puoi modellare il div come preferisci. E devi creare anche lo stile per il comportamento "link" -alike:

[data-link] {
  cursor: pointer;
}

E finalmente metti questa chiamata jQuery alla pagina:

$(document).ready(function() {
  $("[data-link]").click(function() {
    window.location.href = $(this).attr("data-link");
    return false;
  });
});

Con questo codice jQuery applica un listener di clic a ogni tag della pagina che ha un attributo "collegamento dati" e reindirizza all'URL che si trova nell'attributo collegamento dati.

Non sono sicuro se questo è valido ma ha funzionato per me.

Il codice :

<div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
  <p style='display:inline;color:#ffffff;float:left;'> Whatever </p>     
  <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
</div>

Per far funzionare la risposta di Thepeer in IE 7 e versioni successive, sono necessarie alcune modifiche.

1. IE non rispetterà l'indice z se l'elemento non ha un colore di sfondo, quindi il collegamento non si sovrapporrà alle parti del div contenitivo che ha contenuto, solo le parti vuote. Per risolvere questo, viene aggiunto uno sfondo con opacità 0.

2. Per qualche motivo IE7 e varie modalità di compatibilità falliscono completamente quando si utilizza lo span in un approccio di collegamento. Tuttavia, se al link stesso viene dato lo stile, funziona perfettamente.

.blockLink  
{  
    position:absolute;  
    top:0;  
    left: 0;  
    width:100%;  
    height:100%;  
    z-index: 1;  
    background-color:#ffffff;   
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter: alpha(opacity=0);  
    opacity:0;  
}

<div style="position:relative">  
    <some content>  
    <a href="somepage" class="blockLink" />  
<div>

potresti anche provare avvolgendo un'ancora, quindi ruotando l'altezza e la larghezza in modo che siano uguali a quelle del genitore. Questo funziona perfettamente per me.

<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>

perchè no? use <a href="bla"> <div></div> </a>funziona bene in HTML5

Questo post è vecchio, lo so, ma dovevo solo risolvere lo stesso problema perché semplicemente scrivere un normale tag di collegamento con il display impostato su blocco non rende l'intero div selezionabile in IE. quindi per risolvere questo problema molto più semplice che dover usare JQuery.

Innanzitutto, cerchiamo di capire perché ciò accada: IE non renderà selezionabile un div vuoto, ma solo il testo / l'immagine all'interno di quel div / tag selezionabile.

Soluzione: riempire il div con un'immagine bakground e nasconderlo allo spettatore.

Come? Fai buone domande, ora ascolta. aggiungi questo stile backround al tag a

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

E il gioco è fatto ora l'intero click è cliccabile. Questo è stato il modo migliore per me perché lo sto usando per la mia Galleria fotografica per consentire all'utente di fare clic su metà dell'immagine per spostarsi a sinistra / destra e quindi posizionare una piccola immagine anche solo per effetti visivi. quindi per me ho usato comunque le immagini sinistra e destra come immagini di sfondo!

Basta avere il collegamento nel blocco e migliorarlo con jquery. Si degrada con garbo al 100% per chiunque senza javascript. Fare questo con HTML non è davvero la migliore soluzione imho. Per esempio:

<div id="div_link">
<h2><a href="mylink.htm">The Link and Headline</a></h2>
<p>Some more stuff and maybe another <a href="mylink.htm">link</a>.</p>
</div>

Quindi utilizzare jquery per rendere selezionabile il blocco (tramite la parete del web designer ):

$(document).ready(function(){

    $("#div_link").click(function(){
      window.location=$(this).find("a").attr("href"); return false;
    });

});

Quindi tutto ciò che devi fare è aggiungere gli stili cursore al div

    #div_link:hover {cursor: pointer;}

Per i punti bonus applica questi stili solo se javascript è abilitato aggiungendo una classe 'js_enabled' al div, o al body, o altro.

Questo esempio ha funzionato per me:

<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>

Questo ha funzionato per me:

HTML:

<div>

  WHATEVER YOU WANT

  <a href="YOUR LINK HERE">
    <span class="span-link"></span>
  </a>

</div>

CSS:

.span-link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 9999;
}

Questo aggiunge un elemento invisibile (l'intervallo), che copre l'intero div, ed è al di sopra dell'intero div sull'indice z, quindi quando qualcuno fa clic su quel div, il clic viene essenzialmente intercettato dal livello invisibile "intervallo", che è collegato.

Nota: se stai già utilizzando gli z-index per altri elementi, assicurati solo che il valore di questo z-index sia superiore a qualsiasi cosa tu voglia che sia "in cima".

In realtà è necessario includere il codice JavaScript al momento, controllare questo tutorial per farlo.

ma esiste un modo complicato per raggiungere questo obiettivo utilizzando un codice CSS, è necessario nidificare un tag di ancoraggio all'interno del tag div e applicare questa proprietà ad esso,

display:block;

quando lo hai fatto, renderà cliccabile l'intera area della larghezza (ma entro l'altezza del tag di ancoraggio), se vuoi coprire l'intera area div devi impostare l'altezza del tag di ancoraggio esattamente all'altezza del tag div, ad esempio:

height:60px;

questo renderà cliccabile l'intera area, quindi puoi applicare il text-indent:-9999pxtag di ancoraggio per raggiungere l'obiettivo.

questo è davvero complicato e semplice ed è stato appena creato utilizzando il codice CSS.

ecco un esempio : http://jsfiddle.net/hbirjand/RG8wW/

Questo è il modo migliore per farlo come usato sul sito web della BBC e sul Guardian:

Ho trovato la tecnica qui: http://codepen.io/IschaGast/pen/Qjxpxo

ecco l'html

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

ecco il CSS

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

.block-link a {
  position: relative;
  z-index: 1;
}

.block-link .block-link__overlay-link {
    position: static;
    &:before {
      bottom: 0;
      content: "";
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
    &:hover,
    &:focus {
      &:before {
        background: rgba(255,255,0, .2);
      }
    }
}

<a href="…" style="cursor: pointer;"><div> … </div></a>

Questo lavoro per me:

<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

Puoi dare un link al tuo div con il seguente metodo:

<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
    cursor:pointer;
    width:200px;
    height:200px;
    background-color:#FF0000;
    color:#fff;
    text-align:center;
    font:13px/17px Arial, Helvetica, sans-serif;
    }
</style>

Puoi circondare l'elemento con un tag href oppure puoi usare jquery e usare

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});

Questo è il modo più semplice.

Supponiamo che questo sia il divblocco che voglio rendere selezionabile:

<div class="inner_headL"></div>

Quindi metti un hrefcome segue:

<a href="#">
 <div class="inner_headL"></div>
</a>

Basta considerare il divblocco come un normale elemento html e abilitare il solito hreftag.
Funziona almeno su FF.

Anche se non consiglio di farlo in nessuna circostanza, ecco del codice che trasforma un DIV in un collegamento (nota: questo esempio usa jQuery e alcuni markup vengono rimossi per semplicità):

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("div[href]").click(function () {
        window.location = $(this).attr("href");
    });
});

</script>
<div href="http://www.google.com">
     My Div Link
</div>

Un'opzione che non è stata menzionata è l'utilizzo di flex. Applicando flex: 1al atag, si espande per adattarsi al contenitore.

div {
  height: 100px;
  width: 100px;
  display: flex;
  border: 1px solid;
}

a {
  flex: 1;
}

<div>
  <a href="http://google.co.uk">Link</a>
</div>

Ho inserito una variabile perché alcuni valori nel mio link cambieranno a seconda del record da cui proviene l'utente. Questo ha funzionato per i test:

   <div onclick="location.href='page.html';"  style="cursor:pointer;">...</div> 

e funziona anche questo:

   <div onclick="location.href='<%=Webpage%>';"  style="cursor:pointer;">...</div> 

I miei pantaloni intelligenti rispondono:

"Risposta evasiva a:" Come rendere l'elemento a livello di blocco un collegamento ipertestuale e convalidare in XHTML 1.1 "

Basta usare HTML5 DOCTYPE DTD. "

In realtà non è vero per ie7

onclick="location.href='page.html';"

Funziona IE7-9, Chrome, Safari, Firefox,

se proprio tutto potesse essere così semplice ...

#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}

#logo a {padding-top:48px; display:block;}



<div id="logo"><a href="../../index.html"></a></div>

pensa solo un po 'fuori dagli schemi ;-)