momo: Menü Horizontal gleichmässig vertielen, auch Abstand

Also ich versuche mein Menü gleichmässig über die Seite zu verteilen.
Es klappt einigermassen, doch ich will um jeden LINK einen Rahmen (border haben, der aber das ganze Feld ausfüllt, so das keinerlei Leerauhm zwischen den einzelnen Links, Borde rmehr ist:

Jett ist es so:
!link!!link!!link!!link!!link!

es sollte aber etwa sso sein...

!    link    !!    link    !!    link    !!    link    !!    link    !

<div id="content" >  
<ul>  
<li><a href="#">Menüpunkt</a></li>  
<li><a href="#">Menüpunkt</a></li>  
<li><a href="#">Menüpunkt</a></li>  
<li><a href="#">Menüpunkt</a></li>  
<li><a href="#">Menüpunkt</a></li>  
<li id="line">&nbsp;</li>  
</ul>  
</div>
#content {background:#ff0000;margin:0 auto;max-width:1200px; min-width:600px;width:90%;}  
ul{padding:0;text-align:justify;}  
li{display:inline-block;list-style:none;}  
#line{padding-left:100%;height:0;}  
a{color:#000; display:block;border:1px solid #aaa;}

http://www.cssdesk.com/NAnw2

  1. Also ich versuche mein Menü gleichmässig über die Seite zu verteilen.
    Es klappt einigermassen, doch ich will um jeden LINK einen Rahmen (border haben, der aber das ganze Feld ausfüllt, so das keinerlei Leerauhm zwischen den einzelnen Links, Borde rmehr ist:
    Jett ist es so:
    !link!!link!!link!!link!!link!

    es sollte aber etwa sso sein...

    !    link    !!    link    !!    link    !!    link    !!    link    !

    #content {background:#ff0000;margin:0 auto;max-width:1200px; min-width:600px;width:90%;}

    ul{padding:0;text-align:justify;}
    li{display:inline-block;list-style:none;}

      
    Prinzipiell kannst du mit `text-align:justify;`{:.language-css} eine saubere Zentrierung erreichen. Dabei bleiben die Links allerdings inline-Elemnte und der Zwischenraum ist quasi ein großes Leerzeichen, genauso wie man es von Blocksatz gewohnt ist. Das "Leerzeichen" zwischen den li-Elementen lässt sich aber nicht (man möge mich korrigieren) ansprechen oder wie gewünscht stylen.  
    Wenn du die Anzahl der Listenpunkte kennst (= das CMS die Anzahl weiß = sich die Anzahl nur selten ändert), kannst du auf andere Methoden zur Zentrierung zurückgreifen. [Beispiel](http://jsfiddle.net/timshutes/eCPSh/416/) mit `display: table-cell`{:.language-css}. Ob das optisch deinen Anforderungen entspricht, musst du entscheiden.  
      
    Grüße, der lichtheini  
      
    Passende Diskussion StackOverflow: [Link1](http://stackoverflow.com/questions/5060923/how-to-stretch-html-css-horizontal-navigation-items-evenly-and-fully-across-a), [Link2](http://stackoverflow.com/questions/49536/how-do-i-really-justify-a-horizontal-menu-in-htmlcss)
    
  2. Hallo,

    dein Problem wird heutzutage (HTML5 / CSS3) mit dem Flexbox-Modell gelöst:

    http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_07_16_momo_01_navi_volle_breite.html

    Um die Anzahl der Einträge muss man sich dann gar nicht mehr kümmern, das regelt der Browser. Die drei Beispiele benutzen alle dasselbe CSS.

    Gruss

    MrMurphy

    1. Hallo MrMurphy,

      dein Problem wird heutzutage (HTML5 / CSS3) mit dem Flexbox-Modell gelöst:

      http://foreninfo.bplaced.net/seiten_fremdprobleme/2014_07_16_momo_01_navi_volle_breite.html

      Um die Anzahl der Einträge muss man sich dann gar nicht mehr kümmern, das regelt der Browser. Die drei Beispiele benutzen alle dasselbe CSS.

      deine Umsetzung gefällt mir sehr gut. Darf ich mal fragen wie es hier mit älteren Browsern aussieht vor allem der IE8 spielt bei mir leider noch eine sehr große Rolle.

      1. Hallo MrMurphy,

        sorry ich war zu schnell mit meinem abschicken. Sehe gerade dass die Navigation nicht automatisch umbricht, wenn man den Browser schmaler schiebt. Lässt sich aber bestimmt über Media Queries lösen?

        1. Hallo,

          Sehe gerade dass die Navigation nicht automatisch umbricht, wenn man den Browser schmaler schiebt. Lässt sich aber bestimmt über Media Queries lösen?

          Ja, dafür sind die schließlich erfunden worden. Darum ging es in der Frage des TE aber nicht.

          Darf ich mal fragen wie es hier mit älteren Browsern aussieht vor allem der IE8 spielt bei mir leider noch eine sehr große Rolle.

          Wieso spielt der ausgerechnet bei dir noch eine "sehr große" Rolle?

          Außerdem ist dein Arbeits- und Zeitaufwand viel größer, wenn du auf die Möglichkeiten von HTML5 und CSS3 verzichtest.

          Gruss

          MrMurphy

          1. Hallo,

            Wieso spielt der ausgerechnet bei dir noch eine "sehr große" Rolle?

            Laut Google-Analytics haben 32% meiner Besucher einen IE8. Daher ist er für mich noch sehr wichtig.

            1. Hallo

              Laut Google-Analytics haben 32% meiner Besucher einen IE8.

              Der IE8 hat noch einen Marktanteil von ca. 3%. Das 32% deiner Besucher weder ein Smartphone noch ein Tablet noch Windows Vista noch Windows 7 noch Windows 8 noch einen Apple benutzen ist schlicht nicht nachvollziehbar.

              Eine Analyse mit so einem Ergebnis kannst du in die Tonne treten. Das ist schlicht fernab jeglicher Realität.

              Gruss

              MrMurphy

              1. Hallo,

                Eine Analyse mit so einem Ergebnis kannst du in die Tonne treten. Das ist schlicht fernab jeglicher Realität.

                Da ich eher mit Senioren zu tun habe kann das hinkommen. Von Windows ME bis hin zu Windows 7 ist alles dabei. Handy und Tablet interessiert mich nicht.