tomtomtom: Klickbaren Bereich eines Links nach rechts und links erweitern

Guten Tag zusammen!

Ich möchte in einem horizontalen Menü nicht nur auf die Ankertexte klicken können, sondern auch auf den Platz dazwischen. Von diesem Platz dazwischen gibt es manchmal reichlich, da das Menü immer die volle Breite aufspannt, egal wieviele Menüpunkte es hat und wie breit die Ankertexte sind. Ein Beispiel, wie's aussehen könnte:

!    Banane    !    C    !    D    !    Erdbeertorte    !

Hier sind also vier Menüpunkte, und wenn ich auf Banane oder C klicke, so folgt der Browser brav dem Link. Wenn ich aber knapp neben das C klicke, so passiert nix :(

Die Frage lautet: wie kann ich die weiße Fläche rund um das C genauso klickbar machen?
Einfach mittels Padding breiter machen funktioniert zwar sehr schön, aber dies Möglichkeit passt hier leider überhaupt nicht, denn ich weiß nicht im Voraus, wieviel Platz zur Verfügung steht. Die Anzahl der Menüpunkte und ihre Ankertextlänge kann sich jederzeit ändern.

Wer sehen möchte, wie meine Versuche bis jetzt aussehen, findet sie unter

http://tom.mak4u.de/menu-test.htm

Ich hab's mit Tabellen bzw. Tabellen-gestylten Listen versucht, Tipps gefunden, Blocksatz zu verwenden, um die Menüpunkte gleichmäßig zu verteilen und SPANs in die A-Tags eingefügt. Bis jetzt konnte ich nicht erreichen, dass die variable breiten "Freiflächen" genauso klickbar sind wie der eigentliche Ankertext.

Für jede Hilfe dankbar!

Tom

  1. @@tomtomtom:

    nuqneH

    Die Frage lautet: wie kann ich die weiße Fläche rund um das C genauso klickbar machen?

    nav a { display: block }  
    
    

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    1. @@tomtomtom:

      nuqneH

      Die Frage lautet: wie kann ich die weiße Fläche rund um das C genauso klickbar machen?

      nav a { display: block }

      
      >   
      > Qapla'  
        
      Yupp, das funktioniert und ergibt genau das, was ich erreichen wollte. Besten Dank!  
      Da bleibt mir noch viel zu lernen ...  
        
        
      Mein Test-Menü sieht jetzt also so aus:  
        
      

      <nav class="TEST">
        <ul>
          <li><a href="B">Banane</a></li>
          <li><a href="C">C</a></li>
          <li><a href="D">D</a></li>
          <li><a href="E">Erdbeertorte mit Schlagsahne</a></li>
        </ul>
      </nav>

      <style>
      ul  { display:flex;  justify-content:space-between;  }
      li  { flex-grow:1;  text-align:center; }
      nav a  { display:block; }
      </style>

        
      Jetzt bleibt noch ein Punkt übrig, der nichts mit der Original-Frage zu tun hat: Wie mache ich das auch für Browser funktionsfähig, die von flex nichts verstehen? Ich habe versucht, das flex-Layout mit dem Table-Layout zu kombinieren, aber das hat nicht geklappt:  
        
      

      nav  { display:table;  width:100%; }
      ul  { display:table-row;  display:flex;  justify-content:space-between; }
      li  { display:table-cell;  text-align:center;  flex-grow:1; }
      nav a  { display:block; }

        
      Bei einem alten Firefox-20 funktioniert das schön, der ignoriert einfach die ihm unbekannten flex-Einstellungen. Aber die neueren (habe Firefox-33 und Chrome-38 probiert) stören sich verständlicherweise an display:table-cell. Das zerbröselt mir das flex-Layout. Das Table-Layout wiederum kommt nicht ohne seine Tabellen-Zellen aus.  
        
      Hier also eine neue Frage (Sollte ich dafür eigentlich einen neuen Beitrag anfangen?): Hat jemand eine Idee, wie ich für neuere Browser Flex-Layout verwenden kann, für ältere Browser aber Tabellen-Layout (oder auch etwas anderes, vielleicht geeigneteres)?  
        
      Danke für jeden Tipp!  
        
      Tom
      
      1. Om nah hoo pez nyeetz, tomtomtom!

        nav  { display:table;  width:100%; }

        ul  { display:table-row;  display:flex;  justify-content:space-between; }
        li  { display:table-cell;  text-align:center;  flex-grow:1; }
        nav a  { display:block; }

        
        >   
        > Bei einem alten Firefox-20 funktioniert das schön, der ignoriert einfach die ihm unbekannten flex-Einstellungen. Aber die neueren (habe Firefox-33 und Chrome-38 probiert) stören sich verständlicherweise an display:table-cell. Das zerbröselt mir das flex-Layout. Das Table-Layout wiederum kommt nicht ohne seine Tabellen-Zellen aus.  
          
        So, wie du die displa-Eigenschaft für ul überschreibst, kannst du das auch für nav und li tun.  
          
        Matthias
        
        -- 
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen [Bucht und Buchtitel](http://selfhtml.apsel-mv.de/java-javascript/index.php?buchstabe=B#bucht).  
        ![](http://www.billiger-im-urlaub.de/kreis_sw.gif)  
        
        
        1. So, wie du die display-Eigenschaft für ul überschreibst, kannst du das auch für nav und li tun.

          Matthias

          Das hatte ich zunächst nicht für nötig gehalten (aufgrund meines hervorragenden 0,1% Know-how ;-) Aber ja doch, es hilft. Mein - anscheinend erfolgreicher - Versuch sieht jetzt so aus:

          <style>  
          nav  { display:table;  width:100%;  display:flex;  flex:1 0 auto; }  
          ul  { display:table-row;  display:flex;  justify-content:space-between;  flex:1 0 auto; }  
          li  { display:table-cell;  text-align:center;  display:flex;  flex:1 0 auto; }  
          nav a  { display:block;  flex:1 0 auto; }  
          </style>  
            
          <nav>  
            <ul>  
              <li><a href="B">Banane</a></li>  
              <li><a href="C">C</a></li>  
              <li><a href="D">D</a></li>  
              <li><a href="E">Erdbeertorte mit Schlagsahne</a></li>  
            </ul>  
          </nav>  
          
          

          Mit dem Thema Flexbox werde ich mich wohl noch eine Weile beschäftigen müssen, bevor ich damit auch nur halbwegs gezielt und sicher umgehen kann. Die Beschreibung meiner bisherigen Versuche auf http://tom.mak4u.de/menu-test.htm habe ich entsprechend erweitert.

          Danke für die freundliche Hilfe!