Gesamtes Div-Element als Link trotz Padding

[paul91]

Hallo zusammen,
ich bin gerade dabei meine eigene Website zu erstellen. Bisher hat das mit CSS usw. auch sehr gut geklappt. Jetzt will ich meine Navigation erstellen. Und zwar soll das gesamte Div-Element ein Link sein, wie es eigentlich immer ist. Ich habe schon gelesen, dass man mit

  
   a {  
   display: block;  
   height: 100%;  
   width: 100%;  
   } 

ein Div ganz einfach verlinken kann. Ich habe für mein Div-Element keine width und height angegeben, da die Menütexte verschieden lang sind und ich nicht für jeden Menüpunkt eine eigene CSS-Class machen wollte. Daher habe ich mit dem Befehl padding die Abstände zum Rand eingestellt, damit ich eben kein width und height Befehl brauche.
Doch wenn ich nun einen Link erstelle weitet sich der Link nicht über den ganzen Div aus, sondern bleibt nur über den Text. Ich habe mir schon gedacht, dass das Padding damit etwas zu tun hat und habe es bei meinem nächsten Versuch einfach entfernt. Es klappte und der gesamte Div war ein Link, jedoch war dann die größe des Menülinks völlig falsch.
Also, ist es möglich ein gesamtes Div-Element mit Padding und ohne width und height angaben zu verlinken?

Gruß
Peter

P.S.: Vielleicht habe ich auch einfach nur einen Denkfehler. Deswegen hier mein CSS und meine html Datei:

Die Divs von der Navigation:

  
   <div id="nav">  
     <div class="button">  
       <a href="index.html">Home</a>  
     </div>  
   </div>

Und die dazugehörigen CSS Einträge:

  
    #nav {  
    width: 975px;  
    height: 26px;  
    margin: 0px;  
    padding: 0px;  
    background-image: url(images/nav.png);  
    }

  
    .button {  
    display: block;  
    float: left;  
    font-family: Verdana;  
    font-size: 12px;  
    padding-top: 6px;  
    padding-bottom: 6px;  
    padding-left: 17px;  
    padding-right: 17px;  
    background-image: url(images/nav.png);  
    text-decoration: none;  
    }

[Steel]

Moin!

Lass das Div um den Link weg und formatiere diesen.

[paul91]

Moin!

Lass das Div um den Link weg und formatiere diesen.

Hallo,
erstmal danke für deine Antwort.
Könntest du das ein wenig weiter ausführen?
Also wie ich den Link formatieren soll, weiß ich. Einfach style="".
Aber warum soll ich den Div wegnehmen?

[Ole]

Hi

Aber warum soll ich den Div wegnehmen?

weil es überflüssig ist.

Gruß
Ole

[paul91]

Hi

Aber warum soll ich den Div wegnehmen?

weil es überflüssig ist.

Gruß
Ole

Welches Div meint ihr jetzt?
Das mit id="nav" oder das mit class="button"

id="nav" brauche ich um den Hintergrund der gesamten Zeile mit der Grafik zu füllen.
class="button" brauche ich doch um den Hover-Effekt zu haben.

Sch**** ich habe vergessen, den CSS-Code vom Hover-Effekt zu schreiben.

  
  .button:hover {  
   display: block;  
   float: left;  
   font-family: Verdana;  
   font-size: 12px;  
   padding-top: 6px;  
   padding-bottom: 6px;  
   padding-left: 17px;  
   padding-right: 17px;  
   background-image: url(images/nav_hover.png);  
   text-decoration: none;  
   }

Gruß
Paul

[paul91]

So. Ich habe es jetzt endlich geschafft:)
Vielen Dank für eure Hilfe!
Ich habe width einfach auf auto gesetzt. Dann klappt das einwandfrei.

Aber nochwas:
Ich würde gerne Untermenüs, also das man, wenn man den Menüpunkt hovert unterhalb ein neues menü auftaucht. Ist das auch mit CSS machbar? Wenn ja, wie?

Gruß

[ChrisB]

Hi,

Ich würde gerne Untermenüs,

Hausfrauentreff hier? "Wer würde gern noch ein Stück Kuchen?"

also das man, wenn man den Menüpunkt hovert unterhalb ein neues menü auftaucht. Ist das auch mit CSS machbar? Wenn ja, wie?

So: http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern
Und da siehst du auch gleich, wie man ein Menü *vernünftig* auszeichnet - als Liste.

MfG ChrisB

[Ole]

Hi

Das mit id="nav" oder das mit class="button"

Das Letztere

class="button" brauche ich doch um den Hover-Effekt zu haben.

Das kannst du auch mit dem a machen. Das umgebene Div ist hier überflüssig.

Gruß
Ole

[gast42]

Also wie ich den Link formatieren soll, weiß ich. Einfach style="".

noch einfacher im Stylesheet

Aber warum soll ich den Div wegnehmen?

weil

<div id="nav">  
 <a class="button" href="index.html">Home</a>  
</div>

reicht: Du erhältst einen Block in der benötigten Größe, der überall volle Linkfunktionalität hat.

[paul91]

Alles klar. Habe verstanden, warum der div-tag wegkann.
Jetzt habe ich den gesamten div-tag verlinkt. Nur gibt es jetzt wieder das Problem mit width und height.

[suit]

Jetzt habe ich den gesamten div-tag verlinkt. Nur gibt es jetzt wieder das Problem mit width und height.

Ein div-Element darf nicht innerhalb eines a-Elements stehen (div = block, a = inline).

[Der Martin]

Hallo,

Lass das Div um den Link weg und formatiere diesen.
Also wie ich den Link formatieren soll, weiß ich. Einfach style="".

nein, besser nicht. In deinem ersten Posting wusstest du noch, wie man's richtig macht.

Aber warum soll ich den Div wegnehmen?

Wozu hast du es überhaupt eingebaut? Ein div-Element ist dazu da, andere Elemente zu gruppieren, so dass sie eine zusammenhängende Einheit bilden. Ein div, das nur ein Kindelement enthält, ist eigentlich sinnlos.
Wenn du aber den Link selbst schon zum Blockelement gemacht hast, hat er, was das Layout angeht, ja schon die Eigenschaften eines div.

Ich verstehe auch nicht, warum du keine feste, einheitliche Breite für die Links in deiner Navigation angeben willst. Nebenbei: Die Navigation einer Site ist formal betrachtet nichts weiter als eine Liste von Links. Also lass sie doch eine Liste sein. Damit hast du auch automatisch genügend Blockelemente, die du nach Belieben formatieren kannst.

Ciao,
 Martin

[Gunnar Bittersmann]

@@paul91:

nuqneH

ein Div ganz einfach verlinken kann.

Nein, der Link ist und bleibt das 'a'-Element, kein 'div'.

Daher habe ich mit dem Befehl padding die Abstände zum Rand eingestellt

Mit der Eigenschaft. In CSS gibt es keine Befehle.

Doch wenn ich nun einen Link erstelle weitet sich der Link nicht über den ganzen Div aus, sondern bleibt nur über den Text.

Du möchtest 'padding' für das 'a'-Element angeben.

Und vermutlich besteht deine Navigation aus mehreren Menüpunkten, ist also eine Auf_list_ung von solchen. Das sollte sich im Markup widerspiegeln:

<ul id="nav">  
  <li><a href="index.html">Home</a></li>  
  <li>Lorem ipsum</li>  
  <li><a href="kontakt.html">Kontakt</a></li>  
</ul>

Dabei bedenken, die aktuelle Seite im Menü nicht zu verlinken (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen])

Qapla'