Navigation als Schrift über gesamte Zeile, bündig

[LorenaDesign]

Hallo,
ich konnte bei google auch nach langem Suchen keine Lösung finden.
Ich möchte dieses Design umsetzen:


Mein Problem ist zur Zeit die Navi.
Sie soll möglichst sein, wie auf meinem Layout. Sprich:
Recht - & linksbündig
Gleichmäßige Abstände zwischen den einzelnen Punkten (wie Blocksatz)
Dynamisch - sollte sich ein Navigationspunkt ändern, soll die Ausrichtung automatisch passieren. Also nicht über Padding.

Mein bisheriges CSS für die Navi:
ul#navi{
padding:10px 0 0 2px;
list-style:none;
font-size:16px;
color:#000000;
line-height:10px;
text-align:justify;
}

ul#navi li{
float:left;
line-height:10px;
width:160px;
}


In der CSS ist das Chaos mit den Versuchen gewachsen ;)

Danke schonmal!

 

[Tronjer]

Mein Problem ist zur Zeit die Navi.
Sie soll möglichst sein, wie auf meinem Layout. Sprich:
Recht - & linksbündig
Gleichmäßige Abstände zwischen den einzelnen Punkten (wie Blocksatz)
Dynamisch - sollte sich ein Navigationspunkt ändern, soll die Ausrichtung automatisch passieren. Also nicht über Padding.

Wenn ein langes Wort durch ein kurzes ersetzt wird, soll der in der Menübar insgesamt zur Verfügung stehende Whitespace automatisch ermittelt und aufgeteilt werden? Ist mit reinem CSS nicht machbar und auch mit JS recht aufwändig. Dazu müssten bei jedem Laden die Menüpunkte direkt hintereinander stehen, anschließend die Koordinaten berechnet und erst daraufhin das Menü dynamisch erzeugt werden.

Aber trotzdem eine interessante Aufgabe. Vielleicht fällt ja jemandem etwas dazu ein. :)

 

[mermshaus]

Eine Diskussion gibt's etwa hier: javascript - Distribute elements evenly using CSS - Stack Overflow

 

[LorenaDesign]

Wenn ein langes Wort durch ein kurzes ersetzt wird, soll der in der Menübar insgesamt zur Verfügung stehende Whitespace automatisch ermittelt und aufgeteilt werden?

Ja, ganz genau...
Da es ein Schulprojekt ist, habe ich gewisse Vorgaben. Ich darf hier leider kein JS verwenden.
Für die zukünftigen Projekte allerdings sehr gut zu wissen. Das Problem tritt bei meinen Designs öfter auf ^^

Wenn ich mich jetzt auf die Menüpunkte beschränke, die ich im Design habe und daran auch nachträglich nichts ändere, wie kann ich dann das Ausrichten lösen?

Danke schonmal für die bisherige Hilfe.

 

[struppi]

Das ist doch recht einfach. Es sind 7 Elemente in der Navigation, diese ist 100% breit und jedes Element folglich 100/7 = 14.3%

 

[LorenaDesign]

Leider stimmen dann die Abstände nicht denn die letzten 2 Navipunkte sind vom Text her wesentlich breiter als die ersten. Spricht zwischen Navipunkt 1 und 2 wäre wesentlich mehr Platz als zwischen 5 und 6.
Es gibt sicher die Möglichkeit mir Bilder aus den Schriften zu machen und diese auszumessen und dann die einzelne Abstände zu berechnen, aber das ist eben eine unschöne Lösung.
Ein "Blocksatz-Verhalten" wäre am passensten. So hatte ich's auch bei Photoshop gemacht. Breite des Textfeldes - Absatz auf Blocksatz.

 

[struppi]

Leider stimmen dann die Abstände nicht denn die letzten 2 Navipunkte sind vom Text her wesentlich breiter als die ersten. Spricht zwischen Navipunkt 1 und 2 wäre wesentlich mehr Platz als zwischen 5 und 6.

Dann machst du etwas falsch

 

[LorenaDesign]

Das kann zwar sein, aber ich denke es ist nicht so.
Wenn ich 7 Kästen à 14 % habe, dann sind diese gleichgroß. Die Texte darin sind allerdings unterschiedlich breit die Kästen werden also unterschiedlich "gefüllt".
Der Platz datwischen ist daher auch unterschiedlich

 

[LorenaDesign]

Hier ist die Lösung, die bei mir jetzt in mehreren Browsern funktioniert hat:

#navi ul {
display: block;
text-align: justify;
padding: 0;
margin: 0;
width: 964px;
text-align-last: justify;
}

#navi ul::after
{
content: "\A0";
display: inline-block;
height: 0;
width: 100%;
}

#navi ul li {
list-style-type: none;
display: inline;
}

 

[LorenaDesign]

Danke euch!

 

[mermshaus]

Meinst du da wirklich ul::after oder ist das ein Tippfehler?

Ich habe mal eine Demoseite gemacht, falls sich jemand dran versuchen will. Ein paar Unschönheiten sehe ich im Firefox schon noch, aber vielleicht habe ich es falsch umgesetzt.

<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <style type="text/css">

        * {
            margin: 0;   /* Standardeinstellungen sollen nicht zwischenfunken */
            padding: 0;
        }

        body {
            padding: 20px;   /* Am Rand kleben soll es aber auch nicht */
        }

        ul {
            text-align: justify;
            text-align-last: justify;

            width: 900px;
            border: 1px dashed red;
        }

        ul:after {
            content: "\A0";
            display: inline-block;
            height: 0;
            width: 100%;

            background: green;   /* Um zu sehen, ob der Bereich sichtbar ist */
        }

        ul li {
            list-style-type: none;
            display: inline;
        }

        ul li a {
            padding: 5px 10px;
            background: lightsteelblue;
            text-decoration: none;
            color: white;
            font-weight: bold;
        }

        </style>
    </head>

    <body>

        <ul>
            <li><a href="./">Test</a></li>
            <li><a href="./">Webseitenerstellung</a></li>
            <li><a href="./">X Y</a></li>
            <li><a href="./">NetBeans</a></li>
            <li><a href="./">Donaudampfschifffahrt</a></li>
            <li><a href="./">Fuß</a></li>
        </ul>

    </body>

</html>