zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden gesamtes DIV klickbar machen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.05.2012, 08:04
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2012
Beiträge: 64
Silber befindet sich auf einem aufstrebenden Ast
Standard gesamtes DIV klickbar machen

Hi Forum,

habe hier ein DIV mit einem Link drinnen:

HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
h1 {
  border: 1px solid #cc6d2e;
  padding: 10px 20px;
  background: transparent url(img/h1bg2.png) 0 -5px no-repeat;
  text-align: center;
  color: #e9e9e8;
  font-size: 12pt;
  box-shadow: 0 0 8px #D2C6BF;
}

#content h1 a { /*Linkgestaltung*/
color: #e9e9e8;
text-decoration: none;
}

#content h1 a:hover {
color: #EBDAAF;
text-decoration: none;
}

.h1-bgr {
  background: #cc7d2f url(img/h1bg1.png) 0 -5px repeat-x ;
  clear: both;
}
</style>
</head>
<body>
<div class="h1-bgr">
<h1><a href="#Zielanker">Linktext</a></h1>
</div>
</body>
</html>
Wie mache ich es, dass das DIV in seiner gesamten Breite und Höhe klickbar wird (mit der Adresse des enthaltenen Links)?

Hab es schonmal so probiert:
Javascript – Make Div Into A Clickable Link

...geht auch, aber dann wird der Mauszeiger nicht mehr zur Hand beim Link-Hover?

Vielen Dank schonmal,
Grüße Silber

Geändert von Silber (08.05.2012 um 08:09 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.05.2012, 08:22
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2012
Beiträge: 64
Silber befindet sich auf einem aufstrebenden Ast
Standard

Ahh, könnte das die optimale Lösung sein?

ganzes Div klickbar machen

[edith]:
Klappt!
HTML-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<style type="text/css">
h1 {
  border: 1px solid #cc6d2e;
  background: transparent url(img/h1bg2.png) 0 -5px no-repeat;
  text-align: center;
  color: #e9e9e8;
  font-size: 12pt;
  box-shadow: 0 0 8px #D2C6BF;
}

h1:hover {
  box-shadow: 0 0 8px brown;
}

#klicker {
display: block;
padding: 20px 20px;
}

h1 a { /*Linkgestaltung*/
color: #e9e9e8;
text-decoration: none;
}

h1 a:hover {
color: #EBDAAF;
text-decoration: none;
}

.h1-bgr {
  background: #cc7d2f url(img/h1bg1.png) 0 -5px repeat-x ;
  clear: both;
}

</style>
</head>
<body>
<div class="h1-bgr">
<h1><a id="klicker" href="#Zielanker">Linktext</a></h1>
</div>
</body>
</html>
Der Style des Link mit der ID "Klicker" bestimmt die Größe des DIV, dann ist auch wirklich der gesamte DIV klickbar.

Geändert von Silber (08.05.2012 um 09:02 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.05.2012, 09:53
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Hallo,

prinzipiell funktioniert das so, dass du innerhalb deines div-Elements ein a-Element platzierst und dieses mit der Eigenschaft display:block in ein Block-Element umwandelst - somit nimmt das a-Element die gesamte, zur Verfügung stehende Breite ein. Um zu gewährleisten, dass das a-Element auch die gesamte Höhe nutzt, kannst du diesem zusätzlich eine Höhe von 100% zuweisen - dies ist allerdings nur nötig, wenn du die Höhe des umschließenden div-Elements manuell veränderst (bspw. durch die Angabe der height-Eigenschaft).
Hier noch ein kleines Beispiel zur Demonstration:

- div-Element anklickbar, a-Element nutzt gesamte Fläche

Gruß, lotti.
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint

Geändert von lottikarotti (08.05.2012 um 09:56 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 08.05.2012, 10:12
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 04.05.2012
Beiträge: 64
Silber befindet sich auf einem aufstrebenden Ast
Standard

Jau danke Lotti für das schöne Beispiel

"display:block" hatte ich ja schon entdeckt. Bezüglich der Höhe hab ich es so gemacht, dass sich das DIV nach der Höhe des Links (incl. dessen padding) richtet. So klappt es bei mir auch mit Zeilenumbruch bzw. bei mehrzeiligen Linktexten.

Grüße Silber
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 19:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 16:53
Header entfernen tripple CSS 17 15.06.2010 15:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 10:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 19:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:41 Uhr.