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

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
Status
Es sind keine weiteren Antworten möglich.

Janglx

Neues Mitglied
22 November 2016
15
0
1
Osnabrück
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:

MrMurphy

Senior HTML'ler
28 Juli 2009
1.507
222
63
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

Senior HTML'ler
19 Mai 2009
1.794
31
48
Claudia Colonia
www.space-vampire.de
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

Neues Mitglied
22 November 2016
15
0
1
Osnabrück
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. :)
 

Janglx

Neues Mitglied
22 November 2016
15
0
1
Osnabrück
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:

Marv

Mitglied
6 November 2010
408
9
18
Milkyway
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.
 

Janglx

Neues Mitglied
22 November 2016
15
0
1
Osnabrück
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?
 

Janglx

Neues Mitglied
22 November 2016
15
0
1
Osnabrück
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.
 

Janglx

Neues Mitglied
22 November 2016
15
0
1
Osnabrück
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!
 
Status
Es sind keine weiteren Antworten möglich.
Werbung:

Latest posts