Ein href-Link für das gesamte Div in HTML / CSS

Folgendes versuche ich in HTML / CSS zu erreichen:

Ich habe Bilder in verschiedenen Höhen und Breiten, aber sie sind alle unter 180x235. Also, was ich tun möchte, ist ein divmit borderund vertical-align: middlesie alle zu erstellen . Ich habe das erfolgreich gemacht, aber jetzt bin ich festgefahren, wie man einen gesamten href-Link richtig macht div.

Hier ist mein Code:

<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>

Bitte beachten Sie, dass der Stilcode zum einfachen Einfügen von Kopien hier inline ist.

Ich habe irgendwo gelesen, dass ich einfach ein weiteres übergeordnetes Div über den Code hinzufügen und dann einen href darin machen kann. Aufgrund einiger Untersuchungen wird es jedoch kein gültiger Code sein.

Um es noch einmal zusammenzufassen, ich brauche das gesamte div ( #parentdivimage), um ein href-Link zu sein.

UPDATE 06/10/2014: Die Verwendung von divs in a's ist in HTML5 semantisch korrekt.

Sie müssen zwischen den folgenden Szenarien wählen:

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

Das ist semantisch falsch, aber es wird funktionieren.

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

Das ist semantisch korrekt, beinhaltet aber die Verwendung von JS.

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

Das ist semantisch korrekt und funktioniert wie erwartet, ist aber kein Div mehr.

Warum entfernen Sie das <div>Element nicht und ersetzen es <a>stattdessen durch ein? Nur weil der Anker - Tag kein div bedeutet nicht ist , können Sie nicht Stil mit display:block, eine Höhe, Breite, Hintergrund, Rahmen, etc. Sie können es machen aussehen wie ein div , aber immer noch handeln wie ein Link. Dann verlassen Sie sich nicht auf ungültigen Code oder JavaScript, der für einige Benutzer möglicherweise nicht aktiviert ist.

Mach es so:

Parentdivimage sollte eine bestimmte Breite und Höhe haben und seine Position sollte sein:

position: relative;

Direkt innerhalb des übergeordneten Abschnitts sollten Sie neben anderen Divs, die das übergeordnete Element enthält, Folgendes einfügen:

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

Dann in CSS-Datei:

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

Das span-Tag füllt seinen übergeordneten Block aus, der parentdiv ist, da Höhe und Breite auf 100% festgelegt sind. Die Spanne wird über allen umgebenden Elementen angezeigt, da der Z-Index höher als bei anderen Elementen eingestellt ist. Schließlich kann span angeklickt werden, da es sich innerhalb eines 'a'-Tags befindet.

Zwei Dinge, die Sie tun können:

1. Wechseln Sie #childdivimagezu einem spanElement und #parentdivimagezu einem Ankertag. Möglicherweise müssen Sie mehr Styling hinzufügen, damit die Dinge perfekt aussehen. Dies wird bevorzugt, da es semantisches Markup verwendet und nicht auf Javascript basiert.

2. Verwenden Sie Javascript, um ein Klickereignis an zu binden #parentdivimage. Sie müssen das Browserfenster umleiten, indem Sie window.locationinnerhalb dieses Ereignisses Änderungen vornehmen. Dies ist TheEasyWay ^TM , wird sich jedoch nicht ordnungsgemäß verschlechtern.

Nach dem, was Surreal Dreams gesagt hat, ist es meiner Erfahrung nach wahrscheinlich am besten, das Ankertag zu stylen, aber es hängt wirklich davon ab, was Sie tun. Hier ist ein Beispiel:

Html:

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

Dann das 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

Machen Sie das divaus id="childdivimag"einem spanund wickeln Sie das in ein aElement. Da die spanund img-Inline-Elemente standardmäßig sind, bleibt dies gültig, während a divein Element auf Blockebene ist und daher ein ungültiges Markup enthält, wenn es in einem enthalten ist a.

Setzen Sie display:blockdas Ankerelement auf. und / oder zoom:1;

aber du solltest das einfach wirklich tun.

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>

Ich würde eine Spanne in das <a>Tag einfügen, die Spanne auf Block setzen und der Spanne eine Größe hinzufügen oder einfach das Styling auf das <a>Tag anwenden . Behandeln Sie die Positionierung auf jeden Fall im <a>Tag-Stil. Wenn Sie onclick eventdem a whereJavaScript ein hinzufügen, wird das Ereignis abgefangen und am Ende des JavaScript-Ereignisses false zurückgegeben, um die Standardaktion des hrefund das Sprudeln des Klicks zu verhindern. Dies funktioniert in Fällen mit oder ohne aktiviertem JavaScript, und jeder AJAX kann im Javascript-Listener verarbeitet werden.

Wenn Sie jQuery verwenden, können Sie dies als Listener verwenden und das onclickim aTag weglassen .

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

Auf diese Weise können Sie Listener nach Bedarf an geänderte Elemente anhängen.

Ein Link mit <div>Tags:

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

Ein Link mit <a>Tags:

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

Dies kann auf viele Arten erfolgen. ein. Verwendung in einem Tag verschachtelt.

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

b. Verwenden der Inline-JavaScript-Methode

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

c. Verwenden von jQuery im Tag

HTML:

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

jQuery:

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