[ERLEDIGT] Menüpunkte automatisch und dynamisch auf Div-Container verteilen

[Janglx]

Hallo zusammen,

bin gerade dabei ein Template für ein CMS zu erstellen. Nun möchte ich ein horizontales Menü, dass je nachdem wie viele Menüpunkte erstellt werden, diese über die gesamte Breite der Seite verteilt werden. Die Breite der Seite bleibt immer gleich, die passt sich nicht der Größe der Website an.
Es geht nur darum, dass die Abstände zwischen den Menüpunkten sich automatisch anpasst. Gibt es da eine Möglichkeit?

Mit freundlichen Grüßen,
Janglx

 

[MrMurphy]

Hallo

Ja, Flexbox.

Gruss

MrMurphy

 

[Janglx]

Ich nehme an dass ist eine Library, die ich umständlich hinzufügen muss? :(

Geht das nicht mit purem CSS?

 

[LeCub]

Ich nehme an dass ist eine Library, die ich umständlich hinzufügen muss?

Nope, das ist pures CSS. Siehe z.B hier: https://www.mediaevent.de/css/display-flex.html oder hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ oder wenn du es spielerisch magst hier: http://flexboxfroggy.com

 

[MrMurphy]

Hallo

Ist die Suchmaschine deiner Wahl defekt? Den Suchbegriff habe ich dir ja genannt.

Flexbox ist aktuelles CSS, das problemlos verwendet werden kann.

Wenn du ein Beispiel mit deinem bisherigen HTML und CSS gibst werde ich dir wohl auch ein Beispiel für die Anwendung darauf anbieten können.

Gruss

MrMurphy

 

[Space Vampire]

Da man für den Hinweis, dass eine Tabelle das gewünschte Ergebnis mit reinen CSS-Mitteln bringen würde, eine öffentliche Hinrichtung nach sich zieht, werde ich das besser nicht erwähnen. Uups. Schon passiert. Das war's dann wohl für mich.

Fatalismus bei Seite:
Ein Div-Konstrukt mit Tabelleneigenschaften könnte funktionieren - rein hypothetisch und ungetestet.
Du kannst dir folgende Seite ja mal ansehen:
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/display/Tabelle
div.table in dem Beispiel müsste wahrscheinlich zusätzlich noch 100% width erhalten.

 

[Janglx]

Ist die Suchmaschine deiner Wahl defekt? Den Suchbegriff habe ich dir ja genannt.

Ich habe gegoogelt, für mich sah es nun mal wie eine Library aus, da mich mein Notepad verwirrt hat.

Ein Div-Konstrukt mit Tabelleneigenschaften könnte funktionieren - rein hypothetisch und ungetestet.

Danke für den Hinweis, mir fällt die Lösung mit Flexbox aber defintiv einfacher. :)

 

[Space Vampire]

Jede Lösung die für dich gut ist, soll auch gut für mich sein. Schließlich ist es dein Problem gewesen ;)

 

[Janglx]

weil es thematisch ganz gut noch zu dem Thema passt:

Die Menüpunkte sind jetzt gleichzeitig verteilt. Gibt es jetzt noch 'ne Möglichkeit dass wenn ich über 'nen Menüpunkt mit der Maus hover der Hintergrund der Schrift mit einem gewissen Abstand nach links und rechts, passend verteilt wie die Schrift, aufleuchtet?
Geht dabei nur wieder um die Abstände, nicht darum wie man in CSS das hovern über etwas bestimmtes umsetzt.

Wenn ich es mit Padding probiere schiebt der ja dementsprechend alle Menüpunkte weiter.

Vielleicht zur Verdeutlichung:

|              | *Menüpunkt 1* |   Menüpunkt 2    Menüpunkt 3     Menüpunkt 4            |     <- Ende der Navigationsleiste

oder

|                Menüpunkt 1     Menüpunkt 2  |  *Menüpunkt 3*  |  Menüpunkt 4            |

Hoffe es ist verständlich was ich meine.

Mit freundlichen Grüßen,
Janglx

 

[Marv]

Hallo,
ich habe deine Frage nicht ganz verstanden.

Aktuell wird beim Hover eines Menüpunkts der ganze Menüpunkt-Hintergrund gefärbt.

Du möchtest nun folgendes?

1. Beim Hover des Menüpunkts, soll nur der Text "aufleuchten", nicht der gesamte Menüpunkt?
Dann setze den Text des Menüpunktes noch in ein span Element und änder das span beim Hover des Menüpunktes:

li:hover span {
  background: red;
}

<ul class="mein-tolles-menu">
  <li>
    <span>Menüpunkt 1</span>
  </li>
</ul>

1.1 Soll der aufleuchtende Bereich nun einen Tick größer sein, gebe dann dem span ein padding für links und rechts.
1.2 Soll der aufleuchtende Bereich nur geringfügig kleiner sein, als der ursprüngliche Effekt, der das gesamte li gefärbt hat, dann kannst du dem span auch die Eigenschaft "display: inline-block" geben und die width des spans auf sagen wir 90% setzen "width: 90%";


Komisch dass dein Padding die Menüpunkte verschiebt, entweder hast du dem Äußeren Container und nicht den Menüpunkten selbst das padding gegeben, oder den Menüpunkten ein recht großes Padding. Ändert aber beides nichts daran, dass es nicht den gewünschten Effekt bringt.

Ein Margin auf die Menüpunkte wäre auch kontraproduktiv. Dies würde auch wieder verschieben.

 

[Janglx]

Danke für deine ausführliche Antwort!

Das Problem ist ja, dass ich das Menü nicht einfach so bearbeiten kann, d.h. ein span-Element hinzufügen oder so. Ich bin halt gerade dabei mein erstes eigenes Template in Wordpress zu erstellen. Da ist der Aufbau des Menüs meines Wissens nach nicht so leicht zu bearbeiten.

Ich meine es so:

Aktuell sieht es z.B. so aus:

Ich hätte es gerne so:

Wenn ich das Padding von dem Element ".nav-container ul li a" ändere, verschiebt sich alles und wird größer. Will ja nur dass der Hintergrund beim hovern ein bisschen weiter nach links und rechts rausgeht.

Weißt du nun was ich meine?

 

[LeCub]

Du könntest dem Element eine minimale Breite geben, wie Ich es mal hier https://jsfiddle.net/Lecub/9kwgoroL/ grob skizziert habe.

 

[Janglx]

Geht leider wie ich schon erwähnt habe mit span-Elementen nicht so gut:

Das Problem ist ja, dass ich das Menü nicht einfach so bearbeiten kann, d.h. ein span-Element hinzufügen oder so. Ich bin halt gerade dabei mein erstes eigenes Template in Wordpress zu erstellen. Da ist der Aufbau des Menüs meines Wissens nach nicht so leicht zu bearbeiten.

 

[MrMurphy]

Hallo

Was verstehst du überhaupt unter

Template in Wordpress zu erstellen

Wenn du ein Template erstellst hast du alle Möglichkeiten die HTML und CSS bieten. Oder passt du nur ein bereits vorhandenes Template an?

Kannst du denn überhaupt das CSS frei bearbeiten? Oder gibt es da auch Einschränkungen?

Gruss

MrMurphy

 

[LeCub]

Geht leider wie ich schon erwähnt habe mit span-Elementen nicht so gut:

War auch eigentlich nur nen kleines Beispiel. Dann nimm eben deine li´s: https://jsfiddle.net/Lecub/9kwgoroL/1/

 

[Janglx]

Was verstehst du überhaupt unter

Damit meine ich ein Template komplett von Grund auf alleine zu erstellen. Alle Dateien selber aufbauen und strukturieren etc. Hat sich aber in diesem Fall schon erledigt.

War auch eigentlich nur nen kleines Beispiel. Dann nimm eben deine li´s: https://jsfiddle.net/Lecub/9kwgoroL/1/

Hat geklappt. Hätte ich auch irgendwie selber drauf kommen können. Dankeschön!