Link breiter als Text

[DK]

Hey,

ich habe eine Seite mit einem Navigationsmenü, bei dem sich die Hintergrundfarbe ändert wenn man darüber fährt.

  
<div class="menu">  
 <ul>  
   <li><a href="index.php"><div>Startseite</div></a></li>  
   <li><hr></li>  
   [...]  
 </ul>  
</div>  

Das Ganze hab ich als eine Liste definiert.
Die <li>-Elemente haben alle eine feste Größe.

Das Problem:

Ich hab hinter dem <a>-Element noch ein <div>-Element eingeschoben um den Link-Bereich auf die selbe Breite wie das <li>-Element zu bekommen.

Das ist allerdings nicht-valides HTML (,da ein block-Element sich im inline-Element befindet).

Wie könnte ich das umgehen und den Link trotzdem auf die richtige Breite und Höhe bekommen?

  
<div class="menu">  
 <ul>  
   <a href="index.php"><li>Startseite</li></a>  
   <li><hr></li>  
   [...]  
 </ul>  
</div>  

Würde ja auch nicht gehen da dann das <a>-Element in einem <ul>-Element stecken würde.

Schonmal danke für eure Hilfe.
Dennis

[ChrisB]

Hi,

<div class="menu">
<ul>

Welche Berechtigung hat dieses DIV-Element?

Wie könnte ich das umgehen und den Link trotzdem auf die richtige Breite und Höhe bekommen?

In dem du ihm mittels der display-Eigenschaft ausredest, sich inline darzustellen, in welchem Zustand er weder Breite noch Höhe annehmen darf.

MfG ChrisB

[Gunnar Bittersmann]

@@DK:

nuqneH

Das ist allerdings nicht-valides HTML (,da ein block-Element sich im inline-Element befindet).

So isses.

Wie könnte ich das umgehen und den Link trotzdem auf die richtige Breite und Höhe bekommen?

Indem du das 'a'-Element _in CSS_ zu einem Blockelement machst: .menu a { display: block }

<div class="menu">

Welchen Sinn hat dieses 'div', das nichts gruppiert, sondern als einziges Kindelement 'ul' enthält? Dann kannst du auch gleich 'ul' die Klasse "menu" geben und dies stylen.

Qapla'

[DK]

Indem du das 'a'-Element _in CSS_ zu einem Blockelement machst: .menu a { display: block }

Ja natürlich. Das ich daran nicht gedacht hab.
Vielen Dank ;)

Welchen Sinn hat dieses 'div', das nichts gruppiert, sondern als einziges Kindelement 'ul' enthält? Dann kannst du auch gleich 'ul' die Klasse "menu" geben und dies stylen.

Hmm ... stimmt eigentlich.