Probleme mit Nav

[Rolf B]

Hallo Joseba,

es ist besser, Fragen im Forum zu besprechen. Aus zwei Gründen: Andere könnten die gleiche Frage haben. Und ich könnte einen Fehler machen, dann kann das jemand anderes korrigieren.

Deine Frage per Privatnachricht war:

ich versuche die neue Linker (Computer, News und Bucher) die auf nav sind , nach rechte Seite zu bewegeng , aber kann nicht mit

.dropbtn a {
  text-align: right;
}

Ich hatte Dir das nav Element zur Flexbox gemacht, und die ul Elemente zu Flex-Items mit flex: 1 0 1em; Das bewirkt: Die ul werden so vergrößert, dass jedes die Hälfte von nav belegt. Innerhalb der ul werden die li dann linksbündig gemacht (weil sie inline-block sind).

Es gibt zwei mögliche Lösungen:

1. Die ul lassen wie sie sind und die Menüpunkte verschieben

+--nav--------------------------------------------------------------------+
| +--ul-----------------------------+ +--ul-----------------------------+ |
| | ITEM  ITEM  ITEM                | |                  ITEM ITEM ITEM | |
| +---------------------------------+ +---------------------------------+ |
+--nav--------------------------------------------------------------------+

Um das so zu machen, musst Du der rechten Liste ein text-align:right geben. Nicht den a Elementen. Also so:

nav ul:nth-of-type(2) { text-align:right; }

2. Die ul nur so breit wie nötig machen, und sie von Flexbox verteilen lassen

+--nav--------------------------------------------------------------------+
| +--ul--------------+                                 +--ul------------+ |
| | ITEM  ITEM  ITEM |                                 | ITEM ITEM ITEM | |
| +------------------+                                 +----------------+ |
+--nav--------------------------------------------------------------------+

Dazu musst Du zwei Dinge tun: dem nav Element eine justify-content Eigenschaft geben (space-between heißt: Freien Platz zwischen die Flexitems schieben) und den ul Elemente die automatische Vergrößerung wegnehmen (die 1 in flex:1 0 1em). Es kann den Defaultwert behalten, der flex: 0 0 auto; lautet (nicht vergrößern, nicht verkleinern, so groß wie nötig).

Mit dem padding-left und padding-right im nav kannst Du den Abstand der Menüs vom Bildschirmrand einstellen. Und dem ul gibst Du padding:0, weil das ul Element vom Browser ein padding bekommt, das dann nur stört.

nav {
   display:flex; justify-content: space-between;
   padding-left: …
   padding-right: …

}
nav ul {
   /* LÖSCHEN: */flex: 1 0 1em;
   padding: 0;
}

Beides geht. Die Sache mit dem Padding kannst Du auch in Lösung 1 verwenden.

Viel Spaß, und Alaaf, wie wir in Köln dieses Wochenende sagen :)

Rolf