Menü horizontal ausrichten

[heinetz]

Hallo Forum,

ich möchte eine unsortierte Liste horizontal so ausrichten, dass sie sich über die gesamte Breite des Viewports erstreckt. Der Abstand der Listenpunkte zwischeneinander soll dabei gleich sein. Mein erster Ansatz sah im Prinzip so aus:

http://jsfiddle.net/2kRJv/

• die ul wird mit text-align: justify; versehen
• dazu muss die mit Hilfe eines unsichtbaren Listenelements auf zwei Zeilen ausgedehnt werden

Diese reine CSS-Lösung funktioniert schon sehr gut, hat nur einen Haken:

Der erste und der letzte (sichtbare) Listenpunkt "klebt" am Rand. Nun kann ich das natürlich durch einen fixen Abstand der ul zu ihrem Container verhindern aber das entspricht nicht der Aufgabenstellung.

Meine JS-Lösung funktioniert so:

var sum  = 0;
$tabs    = $page.find('.fplus-tabbar li');
$.each($tabs, function(){
	var w = $(this).width();
	sum+=w;
});	
$tabs.css('padding','0 '+Math.floor(($tabs.parent().width()-sum)/($tabs.length*2))+'px');

Damit hat jedes Listenelement den selben Abstand zu dem nächsten Listenelement.

Hat jemand vielleicht eine Idee, wie sich das als reine CSS-Lösung realisieren liesse?

danke für Tipps und

beste gruesse, heinetz

[Matthias Apsel]

Hallo heinetz,

ich möchte eine unsortierte Liste horizontal so ausrichten, dass sie sich über die gesamte Breite des Viewports erstreckt. Der Abstand der Listenpunkte zwischeneinander soll dabei gleich sein.

#Navigation
{
    list-style-type: none;
    height: 21px;
    background: #ccc;
    display: table;
    min-width: 100%;
}

#Navigation li
{
    display: table-cell;
    text-align: center;
}

Bis demnächst
Matthias

[heinetz]

Hallo Forum,

Der Abstand der Listenpunkte zwischeneinander soll dabei gleich sein.

vielleicht ist das nicht ganz eindeutig.

Bei der Table-Cell-Lösung wachsen die Zellen proportional zu ihrem Grössenverhältnis untereinander. D.h. eine bedingt durch Ihren Inhalt schmale Zelle wächst weniger als eine bedingt durch ihren Inhalt breitere Zelle. Entsprechend ist der Abstand von Zelleninhalt zum Zellenrand bei einer Zelle mit kleinerem Inhalt kleiner als bei einer Zelle mit grösserem Inhalt.

gruss, heinetz

[robertroth]

Liebe Mitdenker, liebe Wissende, liebe Neugierige,

Bei der Table-Cell-Lösung wachsen die Zellen proportional zu ihrem Grössenverhältnis untereinander. D.h. eine bedingt durch Ihren Inhalt schmale Zelle wächst weniger als eine bedingt durch ihren Inhalt breitere Zelle. Entsprechend ist der Abstand von Zelleninhalt zum Zellenrand bei einer Zelle mit kleinerem Inhalt kleiner als bei einer Zelle mit grösserem Inhalt.

das kann man auch verhindern, wenn man weiß, wieviele Zellen es sind. Dann kann man jeder den gleichen prozentualen Anteil vom Ganzen geben.

Das sollte aber mit einer Liste und Listelementen auch funktionieren. Allerdings könnte es dann irgendwann eng werden und es findet kein Umbruch statt, so wie Gunnar das gezeigt hat.

Spirituelle Grüße
Euer Robert
[e-mail]

[Gunnar Bittersmann]

@@Matthias Apsel

#Navigation
{
    display: table;
    min-width: 100%;
}

#Navigation li
{
    display: table-cell;
}

Keine gute Idee. Wenn das Menü nicht in eine Zeile passt, verschwindet es im Nirvana.

Eine gute Idee ist Flexbox: Variante 1

Nun ist es bei justify-content: space-around so, dass „Flex items are evenly distributed in the line, with half-size spaces on either end.“ [Spec]

Pseudoelemente schaffen auch am Anfang und Ende denselben Platz wie zwischen den Items: Variante 2

(Dann liefern space-around und space-between dasselbe Ergebnis.)

Allerdings sieht es, wenn’s mehrzeilig wird, nicht wirklich schön aus …

LLAP

[heinetz]

Hello,

bei der Suche nach einer Lösung war ich natürlich auch über die Flexbox gefallen aber ich hatte mich nicht getraut, weil ich bis dahin nie davon gehört hatte. Mein CSS-Ansatz hatte ich als Alternative zur Flexbox gefunden, wenn man bspw. den IE7 bedienen will. Daher hatte ich das dann nicht weiter verfolgt und mich auf die Alternative konzentriert. Aber da genau das exakt die Lösung zu meiner Aufgabenstellung zu sein scheint, muss ich mir eher Gedanken über Fallbacks machen.

danke und gruss, heinetz

[Gunnar Bittersmann]

@@heinetz

wenn man bspw. den IE7 bedienen will.

Tut man doch. Wenn „bedienen“ heißt, dass die Navigation im IE7 bedienbar sein soll. Und das ist sie, auch wenn die Menüpunkte nicht so angeordnet sind, dass sie die ganze Breite ausfüllen. Progressive enhancement -- problem solved.

Wenn das aber heißen soll, dass die Darstellung im IE7 genauso sein soll: Will man das denn?

muss ich mir eher Gedanken über Fallbacks machen.

IEs verstehen übrigens seit Urzeiten text-align-last; „mit Hilfe eines unsichtbaren Listenelements auf zwei Zeilen ausgedehnt“ fällt damit weg.

LLAP

[MrMurphy1]

Hallo

ich möchte eine unsortierte Liste horizontal so ausrichten, dass sie sich über die gesamte Breite des Viewports erstreckt. Der Abstand der Listenpunkte zwischeneinander soll dabei gleich sein.

Unter anderem für solche Wünsche ist das Flexbox-Modell entwickelt worden. Eine Lösung für dich könnte zum Beispiel so aussehen:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Navi ausrichten</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js" language="javascript" type="text/javascript"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         -moz-box-sizing: border-box;
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         margin: 0;
      }
      ul {
         padding: 0.3rem  0.5rem;
         display: flex;
         justify-content: space-between;
      }
      li {
         list-style-type: none;
      }
      a {
         text-decoration: none;
         color: black;
      }
   </style>
</head>
<body>
   <nav>
      <ul>
         <li><a href="#">Banane</a></li>
         <li><a href="#">Kirsche</a></li>
         <li><a href="#">Kiwi</a></li>
         <li><a href="#">Erdbeere</a></li>
         <li><a href="#">Mango</a></li>
         <li><a href="#">Pflaume</a></li>
      </ul>
   </nav>
</body>
</html>

Den Abstand vom linken und rechten Rand kannst du dann mit dem seitlichen margin / padding vom nav-, ul- oder li-Element erreichen, je nachdem, wie deine Seite im Endeffekt aufgebaut ist. Ich habe mal einen seitlichen Abstand vom 0.5rem vorgegeben.

Gruss

MrMurphy