Machen Sie aus einem Div einen Link

545

Ich habe einen <div>Block mit ausgefallenen visuellen Inhalten, die ich nicht ändern möchte. Ich möchte daraus einen anklickbaren Link machen.

Ich suche so etwas wie <a href="…"><div> … </div></a>, aber das ist gültiges XHTML 1.1.

EE.
quelle
79
Ein guter Grund wäre ein Hintergrundbild in der div
Simon_Weaver
1
Ich habe ein gutes Arbeitsbeispiel, das auf der am häufigsten gewählten Antwort basiert. Überprüfen Sie die Geige hier
Mike
7
In HTML5 ist es vollkommen gültig, ein divunter einem zu haben a.
Juan A. Navarro

Antworten:

739

Kam hierher in der Hoffnung, eine bessere Lösung als meine zu finden, aber ich mag keine der hier angebotenen. Ich denke, einige von Ihnen haben die Frage falsch verstanden. Das OP möchte, dass sich ein Div voller Inhalte wie ein Link verhält. Ein Beispiel hierfür wären Facebook-Anzeigen - wenn Sie schauen, sind sie tatsächlich das richtige Markup.

Für mich sind die No-Nos: Javascript (sollte nicht nur für einen Link benötigt werden und sehr schlechte SEO / Zugänglichkeit); ungültiges HTML.

Im Wesentlichen ist es das:

  • Erstellen Sie Ihr Panel mit normalen CSS-Techniken und gültigem HTML.
  • Irgendwo dort platzieren Sie einen Link, den Sie als Standardlink verwenden möchten, wenn der Benutzer auf das Bedienfeld klickt (Sie können auch andere Links haben).
  • Fügen Sie in diesen Link ein leeres Span-Tag ein ( <span></span>nicht <span />- danke @Campey)
  • Geben Sie die Panel-Position an: relativ
  • Wenden Sie das folgende CSS auf die leere Spanne an:

    { 
      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');
    }   

    Es wird nun das Bedienfeld abdecken und da es sich in einem <A>Tag befindet, ist es ein anklickbarer Link

  • Geben Sie alle anderen Links innerhalb der Bedienfeldposition an: relativ und einen geeigneten Z-Index (> 1), um sie vor den Standard-Span-Link zu bringen
thepeer
quelle
11
Danke funktioniert gut. Wenn die Dinge in IE8 fürchterlich kaputt gehen (wie bei mir), stellen Sie sicher, dass Sie anstelle einer leeren Spanne (<span ... />) ein Tag zum Öffnen und Schließen der Spanne (<span ...> </ span>) haben ).
Campey
1
Der Code funktioniert in IE7 / 8 nicht vollständig. Andere auswählbare Elemente haben Vorrang vor dem <a><span></span></a>Element. Das heißt, Bilder und Texte im Container werden nicht verknüpft, selbst wenn der Z-Index festgelegt ist.
Spoike
67
Eine Geige für Leute, die so dumm sind wie ich und etwas falsch verstanden haben, also ein bisschen damit herumspielen
mussten
7
Haben Sie dies in IE9 versucht? Ich mag diese Methode und verwende sie, aber ich habe sie gerade in IE9 getestet (einschließlich der Geige von @AlexMA), und ich sehe, dass Sie auf eine beliebige Stelle im div klicken können, AUSSER auf den Text. Wenn Sie mit der Maus über den Text fahren, ändert sich der Cursor in einen Standardtextcursor und es wird nichts unternommen, wenn Sie auf den Text klicken. Da Benutzer dazu neigen, auf Textelemente zu klicken (und wenn die Textelemente den größten Teil des Div ausfüllen), wird diese Lösung in IE9 unbrauchbar. Hat jemand dies erlebt oder eine Lösung gefunden?
Bigmac
2
Weiß jemand, wie man hat: Schwebe-CSS funktioniert mit dieser Lösung? Vielleicht auf die Antwort in der Geige verweisen?
Nktokyo
252

Sie können den diva-Link nicht selbst erstellen, aber Sie können festlegen, dass ein <a>Tag als blockdas gleiche Verhalten fungiert, das a <div>hat.

a {
    display: block;
}

Sie können dann die Breite und Höhe darauf einstellen.

Soviut
quelle
11
Dies macht jedoch kein 'div' zu einem Link. Es macht eine Verknüpfung zu einem Blockelement. Es ist ein bisschen anders.
jjnguy
1
Dies ist die Lösung Ihres Problems. Da Sie div ändern können, können Sie wie auf einen Hyperlink klicken, aber Sie können den Cursor (= Hand) nicht für die Anzeige in allen Browsern setzen (nur der IE unterstützt ihn!).
Soul_Master
3
jjnguy: Wie? Ich mag es nicht, viele Inhalte in einem Link zu haben, aber dies könnte genauso gut Teil eines Navigationsmenüs oder so etwas sein. Ein Ankerelement (<a>) muss nicht unbedingt einfacher Text sein, oder? Inwiefern ist es falsch , daraus einen Block zu machen? Es ist semantisch korrekt und kann verwendet werden, um es anzuzeigen, wie Sie möchten.
Arve Systad
23
Dies ist eine absolut gültige Lösung für eine vage Frage. Sie KÖNNTEN tatsächlich einfach ein Ankerelement um ein Div wickeln, aber das wäre semantisch falsch. (Blockelement innerhalb des Inline-Elements).
Traingamer
3
jjnguy: Das ist ziemlich üblich. Ich sage nicht, Divs durch Links zu ersetzen, aber nach den Klängen der Frage wollte er nur einen Block, auf den er klicken konnte wie einen Knopf oder so.
Soviut
72

Dies ist eine alte Frage, aber ich dachte, ich würde sie beantworten, da jeder hier einige verrückte Lösungen hat. Es ist eigentlich sehr sehr einfach ...

Ein Ankertag funktioniert folgendermaßen:

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

Sooo...

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

Obwohl ich nicht sicher bin, ob dies gültig ist. Wenn das der Grund für gesprochene Lösungen ist, dann entschuldige ich mich ...

Zizo47
quelle
6
Es ist gültiges HTML, solange <div>es keinen interaktiven Inhalt enthält (andere <a>Elemente, <button>Elemente usw.).
50
Ihr Beispiel ist kein gültiges HTML-Blockelement, das in einem Inline-Element enthalten ist, es sei denn, Sie verwenden HTML5, das eine Ausnahme für Links gemacht hat.
Thepeer
1
Dies ist ein schlechtes Beispiel, da das aTag den gesamten Text in a aufnimmt divund unterstreicht ... dies kann durch das Stylen gemildert werden, aber die beste Antwort ist besser.
Dmitri Nesteruk
2
a #thediv{font-weight:normal;text-decoration:none;}ist alles, was Sie stilistisch brauchen.
Tyjkenn
1
Versuchte dies und es funktionierte, jedoch brach es die Positionierung des Elements. Ja, Doctype ist HTML5 in Chrome (einige 2014er Version).
BAR
60

Benötigt ein wenig Javascript. Aber Sie divwären anklickbar.

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
jjnguy
quelle
9
Dies führt jedoch zu einer schlechten Semantik auf der Seite, sodass ich diese vermeiden würde, obwohl dies technisch möglich ist.
Arve Systad
2
Ich habe über diese Lösung nachgedacht, aber sie ist irgendwie hässlich. Ich mag die Lösungen mit Anzeige: Block besser.
Allyourcode
9
Dies sieht aus wie ein Link, ist aber kein echter Link. Es hat schwerwiegende Probleme mit der Benutzerfreundlichkeit und der Zugänglichkeit und ist eine wirklich böse Lösung.
WhyNotHugo
2
Beste Lösung. Wir müssen nur das Skript ausführen und "dies" an es senden.
Arman Hayots
3
Wenn js nicht aktiviert ist, haben Sie die Funktionalität verloren. Sowie schlecht für SEO.
BAR
40

Diese Option erfordert kein empty.gif wie in der am besten bewerteten Antwort:

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 */
    }

Wie unter http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/ vorgeschlagen

MagTun
quelle
1
Vielen Dank! Die Lösung von Chris Jumonville funktioniert sowohl auf Andriod als auch auf dem iPhone hervorragend. Beispiel: gastateparks.org/specials
Loren
1
Sollte es nicht div.feature > anur für den Fall sein, dass der Teil "Alles andere" auch einen Link enthält, der tief im Inneren verborgen ist?
TWiStErRob
Dies sollte die gewählte Antwort sein, funktioniert auch mit Bootstrap
Anthony Kal
23

Dies ist eine "gültige" Lösung, um das zu erreichen, was Sie wollen.

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

Aber höchstwahrscheinlich wollen Sie wirklich eine haben <a> Tag als Element auf Blockebene angezeigt wird.

Ich würde nicht empfehlen, JavaScript zur Simulation eines Hyperlinks zu verwenden, da dies den Zweck der Markup-Validierung zunichte macht, die letztendlich die Zugänglichkeit fördert (das Veröffentlichen wohlgeformter Dokumente nach geeigneten semantischen Regeln minimiert die Möglichkeit, dass dasselbe Dokument von verschiedenen Browsern unterschiedlich interpretiert wird).

Es ist vorzuziehen, eine Webseite zu veröffentlichen, die nicht validiert wird, aber in allen Browsern , einschließlich solchen mit deaktiviertem JavaScript, ordnungsgemäß gerendert und funktioniert . Darüber hinaus onclickliefert die Verwendung nicht die semantischen Informationen für einen Bildschirmleser, um festzustellen, dass das div als Link fungiert.

Calvin
quelle
14

Am saubersten wäre es, jQuery mit den in HTML eingeführten Daten-Tags zu verwenden. Mit dieser Lösung können Sie einen Link für jedes gewünschte Tag erstellen. Definieren Sie zuerst das Tag (z. B. div) mit einem Datenverbindungs-Tag:

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

Jetzt können Sie das Div so gestalten, wie Sie möchten. Und Sie müssen auch den Stil für das "Link" -ähnliche Verhalten erstellen:

[data-link] {
  cursor: pointer;
}

Und zum Schluss diesen jQuery-Aufruf auf die Seite setzen:

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

Mit diesem Code wendet jQuery einen Klick-Listener auf jedes Tag auf der Seite an, das ein "Datenlink" -Attribut hat, und leitet zu der URL weiter, die sich im Datenlink-Attribut befindet.

Erhard Dinhobl
quelle
Informationen zu Datenattributen finden
Erhard Dinhobl
13

Ich bin mir nicht sicher, ob dies gültig ist, aber es hat bei mir funktioniert.

Der Code :

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

Tim
quelle
9

Damit die Antwort des Peers in IE 7 und höher funktioniert, sind einige Anpassungen erforderlich.

  1. Der IE berücksichtigt den Z-Index nicht, wenn das Element keine Hintergrundfarbe hat, sodass der Link keine Teile des enthaltenen Divs mit Inhalt überlappt, sondern nur die leeren Teile. Um dies zu beheben, wird ein Hintergrund mit der Deckkraft 0 hinzugefügt.

  2. Aus irgendeinem Grund schlagen IE7 und verschiedene Kompatibilitätsmodi vollständig fehl, wenn die Spanne in einem Link-Ansatz verwendet wird. Wenn der Link selbst jedoch den Stil erhält, funktioniert er einwandfrei.

.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>
Thomas Scheelhardt
quelle
8

Sie können auch versuchen, einen Anker zu umwickeln und dann seine Höhe und Breite so zu ändern, dass sie mit dem übergeordneten Anker identisch sind. Das funktioniert bei mir perfekt.

<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>
wdonayredroid
quelle
1
Möglicherweise möchten Sie auch sicherstellen, dass das übergeordnete div keine Auffüllung hat und dass das <a> -Tag keinen Rand hat.
Nilpo
4

warum nicht? use <a href="bla"> <div></div> </a>funktioniert gut in HTML5

Vamsi Pavan Mahesh
quelle
Die HTML-Validierung wird nicht bestanden. Werbebuchung kann keine Blockpositionen speichern.
Krzysztof Trzos
Ich meine, das <div><span></span></div>ist gültig und <span><div></div></span>nicht. Sie sollten keine display: inline;Art von Elementen in display: block;Elemente einfügen. Das <a>Tag ist Inline-Box.
Krzysztof Trzos
Ja, es kann funktionieren, weil Sie es auf verschiedene Arten tun können (besser oder schlechter). Diese spezielle Lösung ist wegen der älteren HTML-Validierung nicht gut :).
Krzysztof Trzos
1
Ist es wichtig, dass "ältere HTML-Validierung" dies nicht besteht? Es ist jetzt erlaubt, html5 und aus einem Grund, warum also nicht verwenden? Ich denke, diese Lösung ist in Ordnung (es erfordert oft das Entfernen der Unterstreichung zum div-Inhalt, aber immer noch).
Todilo
@Todilo Weil while <a><div></div></a>gültig ist und funktioniert, <a><div><a></a></div></a>nicht gültig ist und nicht funktioniert.
Coredumperror
3

Dieser Beitrag ist alt, ich weiß, aber ich musste nur das gleiche Problem beheben, da das einfache Schreiben eines normalen Link-Tags mit blockierter Anzeige nicht das gesamte Div im IE anklickbar macht. Um dieses Problem zu beheben, ist es viel einfacher, als JQuery verwenden zu müssen.

Lassen Sie uns zunächst verstehen, warum dies passiert: Der IE macht ein leeres Div nicht anklickbar, sondern nur den Text / das Bild innerhalb dieses Div / eines Tags anklickbar.

Lösung: Füllen Sie das Div mit einem Backbild und verbergen Sie es vor dem Betrachter.

Wie? Sie stellen gute Fragen, jetzt hören Sie zu. Fügen Sie diesen Hintergrundstil dem a-Tag hinzu

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

Und da haben Sie es, das ganze Div ist jetzt anklickbar. Dies war der beste Weg für mich, weil ich es für meine Fotogalerie verwende, damit der Benutzer auf eine Bildhälfte klickt, um sich nach links / rechts zu bewegen und dann auch ein kleines Bild nur für visuelle Effekte zu platzieren. also habe ich für mich sowieso das linke und das rechte bild als hintergrundbild verwendet!

Erpel
quelle
Vielen Dank! Ich musste eine Imagemap mit leeren Ankern über einem Bild simulieren, und der IE ließ Sie nur klicken, wenn Inhalt vorhanden war. Dies hat es behoben.
MDCore
2

Haben Sie einfach den Link im Block und erweitern Sie ihn mit jquery. Es verschlechtert sich zu 100% für jeden ohne Javascript. Dies mit HTML zu tun ist imho nicht wirklich die beste Lösung. Zum Beispiel:

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

Verwenden Sie dann jquery, um den Block anklickbar zu machen (über die Webdesigner-Wand ):

$(document).ready(function(){

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

});

Dann müssen Sie nur noch Cursor-Stile zum div hinzufügen

    #div_link:hover {cursor: pointer;}

Für Bonuspunkte wenden Sie diese Stile nur an, wenn Javascript aktiviert ist, indem Sie dem div, dem body oder was auch immer eine 'js_enabled'-Klasse hinzufügen.

Justin
quelle
Ich möchte dies verwenden, aber ich habe 2 Links in der Div ... Wie kann ich es ändern, um auf beide Links klicken zu können? (Es führt mich derzeit zu "mylink.html", wenn ich auch auf den zweiten Link
klicke
2

Dieses Beispiel hat bei mir funktioniert:

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

Das hat bei mir funktioniert:

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

Dies fügt ein unsichtbares Element (die Spanne) hinzu, das Ihr gesamtes Div abdeckt und sich im Z-Index über Ihrem gesamten Div befindet. Wenn also jemand auf dieses Div klickt, wird der Klick im Wesentlichen von Ihrer unsichtbaren "Span" -Ebene abgefangen ist verbunden.

Hinweis: Wenn Sie bereits Z-Indizes für andere Elemente verwenden, stellen Sie einfach sicher, dass der Wert dieses Z-Index höher ist als alles, worauf er "über" stehen soll.

Jeff Schwarting
quelle
Hat für mich gearbeitet. Vergessen Sie nur nicht, das übergeordnete Element relativ zu positionieren.
Saif Al Falah
1

Eigentlich müssen Sie im Moment den JavaScript-Code einfügen. Überprüfen Sie dazu dieses Tutorial .

Es gibt jedoch eine schwierige Möglichkeit, dies mithilfe eines CSS-Codes zu erreichen. Sie müssen ein Ankertag in Ihrem div-Tag verschachteln und diese Eigenschaft darauf anwenden.

display:block;

Wenn Sie dies getan haben, wird der gesamte Breitenbereich anklickbar (jedoch innerhalb der Höhe des Ankertags). Wenn Sie den gesamten Div-Bereich abdecken möchten, müssen Sie die Höhe des Ankertags genau auf die Höhe des einstellen div tag, zum Beispiel:

height:60px;

Dadurch wird der gesamte Bereich anklickbar. Anschließend können Sie das Ankertag anwenden text-indent:-9999px, um das Ziel zu erreichen.

Das ist wirklich knifflig und einfach und wird nur mit CSS-Code erstellt.

Hier ist ein Beispiel : http://jsfiddle.net/hbirjand/RG8wW/

Hbirjand
quelle
1

Dies ist der beste Weg, wie auf der BBC-Website und im Guardian verwendet:

Ich habe die Technik hier gefunden: http://codepen.io/IschaGast/pen/Qjxpxo

Hier ist das 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>

Hier ist das 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);
      }
    }
}
Jojojohn
quelle
1
<a href="…" style="cursor: pointer;"><div></div></a>
Phillip Chaffee
quelle
0

Diese Arbeit für mich:

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

Sie können Ihrem div einen Link geben, indem Sie folgende Methode anwenden:

<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>
Swarnamayee Mallia
quelle
0

Sie können das Element mit einem href-Tag umgeben oder jquery und use verwenden

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});
DIE ERSTAUNLICHE
quelle
0

Dies ist der einfachste Weg.

Angenommen, dies ist der divBlock, den ich anklickbar machen möchte:

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

Geben Sie also hrefFolgendes ein:

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

Betrachten Sie den divBlock einfach als normales HTML-Element und aktivieren Sie das übliche hrefTag.
Es funktioniert zumindest auf FF.

Jeevanismus
quelle
0

Obwohl ich dies unter keinen Umständen empfehle, ist hier ein Code, der einen DIV zu einem Link macht (Hinweis: In diesem Beispiel wird jQuery verwendet und bestimmte Markups werden der Einfachheit halber entfernt):

<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>
Brian David Berman
quelle
3
Auch dies ist eine funktionale Lösung, aber nicht wirklich im Sinne der ursprünglichen Frage, die für eine XHTML-Lösung war. Während keine große Sache, Ihre Antwort nicht startet Lärm auf die Frage hinzuzufügen.
Soviut
0

Eine Option, die nicht erwähnt wurde, ist die Verwendung von Flex. Durch Anwenden flex: 1auf das aTag wird es erweitert, um in den Container zu passen.

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

a {
  flex: 1;
}
<div>
  <a href="http://google.co.uk">Link</a>
</div>

Der Codesee
quelle
-1

Ich habe eine Variable eingezogen, da sich einige Werte in meinem Link ändern, je nachdem, aus welchem ​​Datensatz der Benutzer stammt. Dies funktionierte zum Testen:

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

und das funktioniert auch:

   <div onclick="location.href='<%=Webpage%>';"  style="cursor:pointer;">...</div> 
becky
quelle
1
Code wird aus irgendeinem Grund nicht angezeigt. Ich habe den Onclick mit einer JSP-Variablen verwendet, um einen dynamischen Link zu erstellen
Becky
-3

Meine schicke Hose antwortet:

"Ausweichende Antwort auf:" Wie man ein Element auf Blockebene zu einem Hyperlink macht und in XHTML 1.1 validiert "

Verwenden Sie einfach HTML5 DOCTYPE DTD. "

Galt eigentlich nicht für ie7

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

Funktioniert mit IE7-9, Chrome, Safari, Firefox,

Karl Kelman
quelle
er suchte nach "Ich suche nach einem gültigen XHTML 1.1-Weg"
Mark
-4

wenn einfach alles so einfach sein könnte ...

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

denke nur ein wenig über den Tellerrand hinaus ;-)

philipp
quelle