un collegamento href per l'intero div in HTML / CSS

Ecco cosa sto cercando di ottenere in HTML / CSS:

Ho immagini di diverse altezze e larghezze, ma sono tutte inferiori a 180x235. Quindi quello che voglio fare è creare un divcon bordere vertical-align: middletutti loro. L'ho fatto con successo, ma ora sono bloccato su come collegare correttamente un href all'intero div.

Ecco il mio codice:

<div id="parentdivimage" style="position:relative;width:184px;height:235px;border-width:2px;border-color:black;border-style:solid;text-align:center;">
    <div id="childdivimage" style="position:absolute;top:50%;height:62px;margin-top:-31px;">
        <img src="myimage.jpg" height="62" width="180">
    </div>
</div>

Si noti che per copiare e incollare facilmente qui, il codice di stile è inline.

Ho letto da qualche parte che posso semplicemente aggiungere un altro div genitore sopra il codice e quindi fare un href all'interno. Tuttavia, sulla base di alcune ricerche, non sarà un codice valido.

Quindi, per riassumere di nuovo, ho bisogno che l'intero div ( #parentdivimage) sia un collegamento href.

AGGIORNAMENTO 06/10/2014: l' utilizzo di div all'interno di a è semanticamente corretto in HTML5.

Dovrai scegliere tra i seguenti scenari:

<a href="http://google.com">
    <div>
        Hello world
    </div>
</a>

che è semanticamente errato, ma funzionerà.

<div style="cursor: pointer;" onclick="window.location='http://google.com';">
    Hello world
</div>

che è semanticamente corretto ma implica l'uso di JS.

<a href="http://google.com">
    <span style="display: block;">
        Hello world
    </span>
</a>

che è semanticamente corretto e funziona come previsto ma non è più un div.

Perché non rimuovi l' <div>elemento e lo sostituisci con uno <a>? Solo perché il tag di ancoraggio non è un div non significa che non puoi modellarlo con display:blockaltezza, larghezza, sfondo, bordo, ecc. Puoi farlo sembrare un div ma agire comunque come un collegamento. Quindi non ti affidi a codice non valido o JavaScript che potrebbe non essere abilitato per alcuni utenti.

Fai cosi:

Parentdivimage dovrebbe avere larghezza e altezza specificate e la sua posizione dovrebbe essere:

position: relative;

Appena dentro la parentdivimage, accanto ad altri div che contiene il genitore dovresti mettere:

<a href="linkt.to.smthn.com"><span class="clickable"></span></a>

Quindi nel file css:

.clickable {
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  position: absolute;     
  z-index: 1;
}

Il tag span riempirà il blocco genitore che è parentdiv, a causa dell'altezza e della larghezza impostate al 100%. Lo span sarà in cima a tutti gli elementi circostanti a causa dell'impostazione dello z-index più alto rispetto ad altri elementi. Infine lo span sarà cliccabile, perché si trova all'interno di un tag "a".

Due cose che puoi fare:

1. Passa #childdivimagea un spanelemento e #parentdivimagepassa a un tag di ancoraggio. Ciò potrebbe richiedere di aggiungere un po 'più di stile per far sembrare le cose perfette. Questo è preferibile, poiché utilizza il markup semantico e non si basa su javascript.

2. Utilizza Javascript per associare un evento clic a #parentdivimage. È necessario reindirizzare la finestra del browser modificando window.locationall'interno di questo evento. Questo è TheEasyWay ^TM , ma non si degraderà con grazia.

Partendo da ciò che ha detto Surreal Dreams, è probabilmente meglio modellare l'anchor tag nella mia esperienza, ma dipende davvero da quello che stai facendo. Ecco un esempio:

HTML:

<div class="parent-div">
  <a href="#">Test</a>
  <a href="#">Test</a>
  <a href="#">Test</a>
</div>

Quindi il CSS:

.parent-div {
  width: 200px;
}
a {
  display:block;
  background-color: #ccc;
  color: #000;
  text-decoration:none;
  padding:10px;
  margin-bottom:1px;
}
a:hover {
  background-color: #ddd;
}

http://jsbin.com/zijijuduqo/1/edit?html,css,output

Crea il divdi id="childdivimag"un spaninvece e avvolgilo in un aelemento. Poiché spane imgsono elementi in linea per impostazione predefinita, questo rimane valido, mentre a divè un elemento a livello di blocco, e quindi mark-up non valido quando contenuto all'interno di un file a.

mettere display:blockl'elemento di ancoraggio. e / o zoom:1;

ma dovresti farlo davvero.

a#parentdivimage{position:relative; width:184px; height:235px; 
                 border:2px solid #000; text-align:center; 
                 background-image:url("myimage.jpg"); 
                 background-position: 50% 50%; 
                 background-repeat:no-repeat; display:block; 
                 text-indent:-9999px}

<a id="parentdivimage">whatever your alt attribute was</a>

Quello che farei è inserire uno span all'interno del <a>tag, impostare lo span su block e aggiungere dimensioni allo span, o semplicemente applicare lo stile al <a>tag. Gestisci sicuramente il posizionamento nello <a>stile del tag. Aggiungere un onclick eventa a whereJavaScript catturerà l'evento, quindi restituirà false alla fine dell'evento JavaScript per impedire l'azione predefinita del hrefe il bubbling del clic. Funziona nei casi con o senza JavaScript abilitato e qualsiasi AJAX può essere gestito nel listener Javascript.

Se stai usando jQuery, puoi usarlo come listener e omettere onclickil atag nel tag.

$('#idofdiv').live("click", function(e) {
    //add stuff here
    e.preventDefault; //or use return false
}); 

ciò consente di collegare ascoltatori a qualsiasi elemento modificato, se necessario.

Questo può essere fatto in molti modi. un. Utilizzo annidato all'interno di un tag.

<a href="link1.html">
   <div> Something in the div </div>
 </a>

b. Utilizzo del metodo JavaScript in linea

<div onclick="javascript:window.location.href='link1.html' "> 
  Some Text 
</div>

c. Utilizzando jQuery all'interno del tag

HTML:

<div class="demo" > Some text here </div>

jQuery:

$(".demo").click( function() {
  window.location.href="link1.html";
 });

Un collegamento con i <div>tag:

<div style="cursor: pointer;" onclick="window.location='http://www.google.com';">
     Something in the div 
</div>

Un collegamento con i <a>tag:

<a href="http://www.google.com">
    <div>
        Something in the div 
    </div>
</a>