Linkbereich von <a> vergrößern?

[Noel]

Hallo!

Ich habe eine Frage, wobei ich mir nicht hundertprozentig sicher bin ob die Lösung mit CSS realisierbar ist - ich hoffe es jedoch.

Bisheriger Weg:

  
<div class="menue">  
  <div><a href="example.com/#1">Link 1</a></div>  
  <div><a href="example.com/#2">Link 2</a></div>  
  <div><a href="example.com/#3">Link 3</a></div>  
  <div><a href="example.com/#4">Link 4</a></div>  
</div>  

Das ganze folgendermaßen über CSS formatiert:

  
a {  
  color:#000000;  
  padding:2px;  
  margin-top:5px;  
  margin-bottom:5px;  
  text-decoration:none;  
  width:50px;  
  height:100px;  
  }  
  
.menue {  
 background-image:url(menue_hintergrund.gif);  
 background-repeat:repeat;  
 padding:10px;  
 margin-top:40px;  
 max-width:97px;  
 width:97px;  
 height:480px;  
 }  

Was bewirkt dass die Links ordentlich links in einem grafischen Kästchen untereinander aufgereiht sind, und leicht grün hinterlegt werden wenn der User mit der Maus drüberfährt. Die Hintergrundgrafik "menue_hintergrund.gif" hat eine Breite von sagen wir 200px. Das Problem: Die grüne Fläche mit der der Text jedes Links hinterlegt wird soll die gesamte Breite der Hintergrundgrafik ausfüllen, also 200px. Da ich schwerlich a in der .css mit "width=..." formatieren kann, bin ich ein bisschen ratlos wie das zu realisieren ist. Vom Einsatz von JS und anderen Spielereien will ich eigentlich absehen.

Ich freue mich auf konstruktive Antworten.
Beste Grüße,
Noel

[RFZ]

[...] Da ich schwerlich a in der .css mit "width=..." formatieren kann, bin ich ein bisschen ratlos wie das zu realisieren ist. Vom Einsatz von JS und anderen Spielereien will ich eigentlich absehen.

Hi,
natürlich kannst du das, das ist nicht weiter schwer ;)
Definiere das a als Block-Element (display: block;) und schon kannst du wie bei jedem anderen Block-Element auch eine beliebige Größe angeben.

Gruß,
Andreas

[Noel]

Allen Antwortenden sei ein herzliches Dankeschön ausgesprochen, ich lerne bei diesem Projekt mit jedem Schritt was dazu. Das mit der Liste werde ich evtl. versuchen, display:block jedoch auf jeden Fall verwenden - vielen Dank!

Beste Grüße,
Noel

[Malcolm Beck´s]

hi,

Allen Antwortenden sei ein herzliches Dankeschön ausgesprochen, ich lerne bei diesem Projekt mit jedem Schritt was dazu.

Das ist doch schön, aber

Das mit der Liste werde ich evtl. versuchen

Das ist nicht schwer, einen Link hattest du ja schon vom steckl bekommen, ich verlinke mal auf das für dich Interessante:

Vertikale Formatierung
Horizontale Formatierung

Wenn du es lernen willst, dann doch lieber richtig, oder?

grüße

[steckl]

Hi,

Da ich schwerlich a in der .css mit "width=..." formatieren kann, bin ich ein bisschen ratlos wie das zu realisieren ist. Vom Einsatz von JS und anderen Spielereien will ich eigentlich absehen.

Du müsstest die Breite der Links ändern können, wenn du display auf block setzt: "display:block;"

Bei Selfhtml steht auch noch was zum Thema CSS-basierte Navigationsleisten.

mfG,
steckl

[Rosa]

Hallo Noel,

grundsätzlich würde ich mal von den vielen, vielen divs Abschied nehmen und das ganze in eine Liste (ul) packen.:)

Und dass die Links über die ganze breite erscheinen - versuche es mal mit display:block. Dazu brauchst du dann auch nicht jeden Link in ein <div> packen.

Aber wie gesagt, ganz sauber wäre es mit einer
<ul><li><a ....>...</a></li><li><a ...>usw.</a><li></ul> - ohne ein <div>.

Viel Erfolg
Rosa