Link als button

[Frank]

Ich bin schon eine lange Zeit am Grübeln, wie ich eine Navigation mit "buttons" hinbekomme.

Das heißt nicht, dass ich die Nacigation mit <input type="button"> oder <button> machen will, sondern dass der Link einfach nur breiter sein soll als die schrift, die der Link ist. Das heißt ein großes feld (z.b. div) in dem nur ein kleiner text steht, aber egal wo man in der div hinklickt ist es der Link sozusagen so:

---------------------------------------
|~~~~~ Home~~~~~~~~~~~ |
---------------------------------------

~=platzhalter, geht hier nicht anders ; inwirklichkeit leer aber trotzdem Link

Bis lang habe ich das so gelößt:

[url="http://www.google.de"]TEST[/url]

Dieser Link ist also genauso breit wie die <div> in der er sich befindet.
Hat aber den Nachteil, dass es nicht valide ist, und z.B. im Mozilla Firefox nicht korrekt angezeigt wird. (siehe hier mit MF und MSIE)

also kam mir diese idee:

<a href="...">
<div>
home
</div>
</a>

ein bisschen css herum und dass geht.
Nachteil: visited,active und hover geht nicht mehr.

Meine Frage:

Wie bekomme ich einen solchen Link hin, der z.B. 100% breit ist, valide und mit hover, ohne mit Bildern und js zu arbeiten?

 

[hobbyuser]

Hi Frank

ich löse sowas immer in dem ich dem A-Tag als Style "display:block" gebe. Nur für den IE muss du ein Hack einfügen und zwar (*html a { width:100%; }).
LINK: http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

Auf meiner Webseite kannst du das Ganze in Aktion sehen. ;)

Gruß
Hobbyuser

 

[Frank]

danke das ist schon fast was ich brauche, doch auch bei dir öffnet sich der link nur, wenn man auf die schrift klickt, er soll sich aber auch öffnen, wenn man auf das kästchen herum klickt sowie mit hover für das gesamte feld

 

[hobbyuser]

Welchen Browser und welches Betriebssystem nutzt du?

Kann ja sein das es ein Browser gibt der das nicht macht. Ich werde es dann später testen da ich gleich mal kurz weg muss.

 

[Frank]

ich benutze win xp home edition und MSIE/MF

Wenn ihr nicht genau wisst, was ich meine:

http://www.cmmaps.de.vu

da habe ich es bei der navi hinbekommen
geht aber nur bei MSIE
MF zerstört die gesamte Navigation

 

[hobbyuser]

Also Frank, dass es auf meiner Seite nicht mit dem IE klappt liegt daran das der Hack nicht eingebaut ist. :lol:
Leider lässt es sich auch nicht so ohne weiteres einbauen, das würde einen kompletten umbau des Menüs erfordern. Jedoch hatte ich den gerade mal zu Testzwecken eingebaut und dann klappt es auch mit dem IE.

Um das zu demonstrieren habe ich das mal auf einer Alternativ-Seite zu meiner persönlichen Hompage eingebaut. Allerdings muss ich dich vorwarnen auch dort müsste man das Menü anpassen. :roll:
LINK: ENTFERNT!

Wie gesagt man müsste das Menü umbauen, mit extra Divs jetzt ragt es in den Inhalt. Also erspart euch bitte Posts die diesen Fehler bemängeln. ;)

Übrigens Frank die Navi auf deiner Seite sieht im Safari sehr komisch aus.

 

[dementia]

Vorallem müsstest du noch display: block; reinschreiben ..
Ausserdem würd ich statt valign line-height nehmen

 

[Frank]

das sie auf meiner seite mit anderen browsern als msie komisch aussieht, weiß ich, deswegen hab ich ja hier nachgefragt wie es anders geht^^

Frage:

könnte mir jemand einen Beispielquelltext posten, mit z.B. einem Link?

 

[No0oB]

vielleicht sowas?
http://rageclan.org/duelcomp/