Gesamtes div als Link aktivieren

[pepre]

Hallo,

nachdem ich mich durch vieles im Web durchgegraben habe (auch hier im Forum, und es gab die abenteuerlichsten Konstrukte), habe ich endlich eine einfache und funktionierende Lösung gefunden, um valide ein ganzes div als Link erscheinen zu lassen:

  
.blubb   { padding: 0px; }  
.blubb a { padding: 20px; display:block; }  

  
<div class="blubb">  
  <a href="blabla">Quack</a>  
</div>  

Das bläst das div um den Padding-Wert auf, und die gesamte Fläche wirkt als Link.

hth :-)

[Bobby]

Moin

.blubb   { padding: 0px; }
.blubb a { padding: 20px; display:block; }

>   
> ~~~html
  

> <div class="blubb">  
>   <a href="blabla">Quack</a>  
> </div>  
> 

Und was ist daran besonders? Das ist sogar schlecht. Wenn du einen Link auf die Selbe Größe wie einen umschließenden DIV vergrößern möchtest, kannst du den DIV drumherum auch gleich ganz weglassen. Ich sehe keinen Grund für den umschließenden DIV

  
 .blubb   { padding: 20px; display:block; }  

  
   <a href="blabla" class="blubb">Quack</a>  

Das würde völlig genügen.

Gruß Bobby

[pepre]

Und was ist daran besonders?

Dass ich es gefunden habe.

Das ist sogar schlecht.

Naja, der Rechner explodiert deswegen nicht. :-)

Ich sehe keinen Grund für den umschließenden DIV

In Menüs mit aktiven und inaktiven Links scheint es die Formatierung zu erleichtern. Aber da muss ich mich nochmal einfuchsen.

[Bobby]

Moin

Und was ist daran besonders?
Dass ich es gefunden habe.

Das brauchte man nicht zu finden. Das ist logisch, einfachstes CSS und nichts Weltbewegendes.

Das ist sogar schlecht.
Naja, der Rechner explodiert deswegen nicht. :-)

Nein, Aber bei komplexeren Seiten wird der Quellcode unnötig aufgebläht und es entstehen DIV-Suppen. Na da guten Appetit!

Ich sehe keinen Grund für den umschließenden DIV
In Menüs mit aktiven und inaktiven Links scheint es die Formatierung zu erleichtern. Aber da muss ich mich nochmal einfuchsen.

Das ist Quatsch. Nutze die Elemente sinnvoll und direkt ohne umschließende DIVS. Nenn mir einen Grund anhand eines Beispieles (du scheinst ja ein konkretes Projekt zu haben) wo der umschließende DIV notwendig ist.

Gruß Bobby

[pepre]

Lass mir halt die Freude, dass es endlich geht! :-)

Ohne DIVs sieht es so aus:

.clear1         { clear:left; font-size:1.5em; color:#000000; }  
.menu1a         { padding:18px; float:left; }  
.menu1          { padding:18px; float:left; display:block; color:#b0b0b0; text-decoration:none; }  
.menu1:hover    { background-color:#f2eac5; color:#606060; }

und zB

  <div class="clear1">  
    <a href="index.php?1" class="menu1">Topic 1</a>  
    <span class="menu1a">Topic 2</span>  
    <a href="index.php?3" class="menu1">Topic 3</a>  
    <a href="index.php?4" class="menu1">Topic 4</a>  
  </div>

Das ist jetzt nicht sehr viel einfacher als mit DIVs. Gehupft wie gesprungen würde ich sagen. Oder man kann noch weiter vereinfachen, und ich sehe es nicht...

[Bobby]

Moin

Das ist jetzt nicht sehr viel einfacher als mit DIVs. Gehupft wie gesprungen würde ich sagen. Oder man kann noch weiter vereinfachen, und ich sehe es nicht...

Doch. Ist besser. Aber z.B. kannst du die links in das dafür vorgesehene Element packen. Es heißt nicht umsonst Link-LISTE. Also pack alles in ne Liste. Aber ansonsten schon viel besser. Es geht doch. Respekt. Noch bisschen Übung und du kannst CSS effektiv mit den entsprechenden Elementen einsetzen. weniger ist manchmal mehr.

Gruß Bobby

[ChrisB]

Hi,

Ich sehe keinen Grund für den umschließenden DIV
In Menüs mit aktiven und inaktiven Links scheint es die Formatierung zu erleichtern.

"Inaktive" Links sollten schlicht und einfach keine Links *sein* - und schon ist deren gesonderte Formatierung ohne zusätzliche Elemente auch kein Problem mehr,

MfG ChrisB

[Gunnar Bittersmann]

@@pepre:

nuqneH

Und was ist daran besonders?
Dass ich es gefunden habe.

Warum? Ist deine Suchstrategie so schlecht, dass du gewöhnlich nichts findest?

Dennoch einen Punkt für dich: Es heutzutage schon was Besonderes, dass Leute überhaupt suchen.

Qapla'

[pepre]

Warum? Ist deine Suchstrategie so schlecht, dass du gewöhnlich nichts findest?

Es scheint, dass ich hier in ein traditionelles Fachforum geschlittert bin. Zuerst wird man zusammengefaltet...

Dennoch einen Punkt für dich: Es heutzutage schon was Besonderes, dass Leute überhaupt suchen.

... und dann wird man gönnerhaft behandelt.

Die Intention des Beitrags war, dass andere Leute, welche sowas suchen, schneller fündig werden, ohne erst den Umweg über die teils absurden Vorschläge wie "mit CSS geht das nicht, nimm JS", "das geht nur via Verweis-sensitive Grafik" und ähnlichen Schmarrn nehmen zu müssen. - Und ich war hocherfreut, als ich feststellte, dass man mit "padding" die Linkfläche vergrößern kann; das stand nämlich in den von Google gefundenen Beispielen nicht so explizit drinne.

Vllt sollte ich, wenn ich hier ein Thema aufmache, erst eine Diplomarbeit darüber schreiben, um nur ja niemanden auf die Füße zu treten. Obwohl ich auch dann wahrscheinlich erst mal zusammengefaltet werden würde. Es fehlte eigentlich nur noch das traditionelle "RTFM" und "Google ist dein Freund".

SCNR

[Der Martin]

Hallo,

Die Intention des Beitrags war, dass andere Leute, welche sowas suchen, schneller fündig werden, ohne erst den Umweg über die teils absurden Vorschläge wie "mit CSS geht das nicht, nimm JS", "das geht nur via Verweis-sensitive Grafik" und ähnlichen Schmarrn nehmen zu müssen.

der Gedanke ist gut.

Und ich war hocherfreut, als ich feststellte, dass man mit "padding" die Linkfläche vergrößern kann; das stand nämlich in den von Google gefundenen Beispielen nicht so explizit drinne.

Das steht vermutlich nicht drin, weil es icht stimmt. Der entscheidende Faktor für das "Vergrößern der Linkfläche" ist nicht das padding (das sorgt nur für etwas Innenabstand zum umgebenden Element), sondern das display:block, das dafür sorgt, dass der Link -wie jedes andere Blockelement auch- einen Block bildet, der die verfügbare Breite komplett ausfüllt, wenn man nicht explizit eine andere Breite vorgibt.

Vllt sollte ich, wenn ich hier ein Thema aufmache, erst eine Diplomarbeit darüber schreiben, um nur ja niemanden auf die Füße zu treten.

Es genügt vollkommen, wenn du Bereitschaft zur Eigeninitiative zeigst. Es ist keine Schande, etwas nicht zu wissen, nicht zu können oder nicht zu finden. Es ist nur dann eine Schande, wenn man andere merken lässt, dass man es nicht einmal versucht hat.

Obwohl ich auch dann wahrscheinlich erst mal zusammengefaltet werden würde. Es fehlte eigentlich nur noch das traditionelle "RTFM" und "Google ist dein Freund".

Das sowieso, aber das ist nicht unbedingt böse gemeint. Bedenke auch, dass hier über die Monate und Jahre immer wieder die gleichen oder sehr ähnliche Fragen von Laien auftauchen, die man mit einem Blick ins Handbuch oder einer Google-Anfrage in fünf Minuten selbst hätte beantworten können. Dass manche Stammgäste dann etwas gereizt reagieren, ist durchaus nachvollziehbar.

Schönes Wochenende,
 Martin