Abstände zwischen horizontale Menüpunkte gleichmäßig

[Christian001]

Hallo liebe Community,

ich habe eine Homepage mit einer fixen Breite von 980px.
Ich habe auch ein horizontales Menü mit 4 Punkten und der 5 Punkte (Intern) scheint erst auf, wenn man sich angemeldet hat.

Home   ÜberUns    Übersicht   Impressum   Intern

Gibt es eine Möglichkeit, dass alle Menüs gleichmäßig aufteilen bzw. die Abstände zwischen den einzlnen Menüpunkte gleich groß sind.
Bin eher ein html und CSS Learning by Doing Kenner, daher reichen meine Kenntnisse nicht so weit aus.

Folgenden Code habe ich bereits:

#header nav .level_1 {
    text-align:center;
}
#header ul {
    padding:0;
}
#header nav .level_1 li {
    display:inline-block;
    list-style-type:none;
}
#header nav .level_2 li {
    display:list-item;
    list-style-type:none;
}
#header nav .level_2 {
    position:absolute;
    margin:0;
    padding:0;
    border:0;
    border-radius:0;
    font:0/0 serif;
    behavior:url('assets/css3pie/1.0.0/PIE.htc');
    z-index: -1;
}
#header nav .level_1 li:hover .level_2 {
    background-color:#fffcfc;
    z-index: 1;
    font: inherit;
}
#header nav .level_2 li {
    float:none;
    vertical-align:bottom;
}
#header nav .level_1 a,
#header nav .level_1 span {
    width:190px;
    display:block;
    margin:.6em 0 0;
    padding-top:.4em;
    background-color:#f7f7ff;
    border:.5px #fafffb;
    border-radius:1px 1px 0 0;
    font-weight:bold;
    text-decoration:none;
    color:#7ecc4e;
    behavior:url('assets/css3pie/1.0.0/PIE.htc');
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}
#header nav a:focus,
#header nav a:hover,
#header nav span {
    background-color:#dbd0d0;
    border:.1px outset;
    font-weight:bold;
    color:#171fbf;
}
#header nav .level_1 span {
    background-color:#bfb8b8;
    font-weight:bold;
    color:#171fbf;
}
}

[mlweb]

Ich würde da an Flexbox denken. Ich nehme an, dass es damit funktioniert (ungetestet).

[planepix]

Hallo Christian, willkommen im Contao Forum.

Schau dir mal dieses Blogpost an:
https://erdmann-freunde.de/css-kurs/...gation-contao/

[Physiklehrer]

Falls du das Impressum bei angemeldeten Mitgliedern nicht brauchst, könntest du dieses auch einfach mit "nur Gästen anzeigen" in den Seiteneinstellungen ausblenden. Dann sind es in allen Fällen 4 Menüpunkte, was das Design sicherlich erleichtert.

[Christian001]

Danke für die rasche Hilfe.

Habe es probiert.
Funktioniert super mit FLEX - muss es aber noch ein wenig lernen.

Mein Code: https://thimbleprojects.org/christian001/307906

Was mir noch fehlt ist:
> Wie schaffe ich das alle die Menü über eine fixe Breite gleichmäßig verteilt ist?
> Wie schaffe ich das, das die Untermenüs (in diesem Fall "ul class="level_2") die gleiche Breite wie "ul class="level_1" hat.

Über               (ul class="level_1)
  Nachricht        (ul class="level_2)
  Grundlagen       (ul class="level_2)

Danke

[mlweb]

Im Moment ist bei dem Link gar nichts mit Flexbox, obwohl ich glaube vor ein paar Minuten etwas in dieser Richtung gesehen zu haben. Auf jeden Fall war und ist bei den Listenelementen ein display: inline-block zu finden. Wozu das denn?

Hier kann man schön mit Flexbox spielen: http://flexboxfroggy.com/
Und u.a. hier findet man umfassende Informationen:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.mediaevent.de/css/display-flex.html

[Andreas]

+ http://the-echoplex.net/flexyboxes/ / Generator, den ich immer wieder benutze.

[Fehrmann]

Oh, danke Andreas. Das sieht interessant aus.

[mlweb]

Zum Spielen finde ich den Generator ganz nett, allerdings habe ich dem auch schon Fehldarstellungen enlockt.

[Andreas]

Ja, der könnte besser sein, habe aber keine Zeit was besseres zu machen. Ich kopiere auch sehr selten den Code daraus, aber man bekommt ne schnelle Übersicht, welche Eigenschaften es gibt und welche Auswirkungen die haben. Man kann sehen, wie kompliziert der Code aussehen kann, wenn man alte Browser unterstützen möchte (mache ich eigentlich nie, die Fallbacks sind sehr einfach einzurichten).

[mlweb]

Stammt der von Dir?

Edit: Ach nein Du meinst Du hast drüber nachgedacht etwas eigenes zu machen.

[Andreas]

Ja, genau. Evtl. reicht mir auch erstmal, ein eigenes CSS auf diese URL aufzusetzen um die Grenzen der Container und Items deutlich zu machen.

Die einzige Unschönheit, die mich dort manchmal ärgert, ist die gesetzte Einstellung von

justify-content: flex-start;
align-items: flex-start;
align-content: stretch;

welche die Browser default auf normal setzen.

justify-content: normal;
align-items: normal;
align-content: normal;

Ein Setzen von align-items:stretch auf den Container ist nämlich nicht notwendig, um den Items eine "equal height" zu verpassen. Flex-Items sind automatisch equal height, allerdings nicht mit dieser Vorbelegung auf align-items:flex-start.

Die anderen Startwerte scheinen mir in Ordnung zu sein, obwohl die Default-Werte natürlich nicht gesetzt werden müssten. Oft reicht ein einfaches display:flex auf den Container und fertig.

[mlweb]

Ja genau. Der generierte Code ist sagen wir mal nicht immer optimal und ich hatte in irgendeiner Konstellation auch mal eine nicht korrekte Darstellung. Kann aber sein, dass das schon bereinigt ist.