• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

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

Status
Für weitere Antworten geschlossen.

Janglx

Neues Mitglied
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
 
Zuletzt bearbeitet:
Werbung:
Ich nehme an dass ist eine Library, die ich umständlich hinzufügen muss? :(

Geht das nicht mit purem CSS?
 
Werbung:
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
 
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.
 
Werbung:
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:

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

oder


Code:
|                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
 
Zuletzt bearbeitet:
Werbung:
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:
Code:
li:hover span {
  background: red;
}

HTML:
<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.
 
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:

c4c1ee15ad.jpg


Ich hätte es gerne so:

679878270d.jpg


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?
 
Werbung:
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.
 
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
 
Werbung:
Status
Für weitere Antworten geschlossen.
Zurück
Oben