zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Horizontale Trenner zwischen Navi-Elementen: der eleganteste Weg?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.02.2018, 08:42
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard Horizontale Trenner zwischen Navi-Elementen: der eleganteste Weg?

Moin.

Es gibt viele Arten einen sichtbaren Trenner zwischen horizontal angeordneten Navi-Elementen zu realisieren.

border
margin+background-color
generated content

Typischerweise setzt man eine Regel, die rechts etwas hinzufügt und entfernt dann beim "last-child" das Ganze wieder.

Gibt es einen eleganteren Weg, der von vorneherein nur /zwischen/ den Elementen etwas einfügt. Und eben nicht auch am äußersten Rand, wenn kein weiterer Nachbar mehr daneben steht.

Versteht ihr, was ich meine?
Ansonsten lege ich nach.

Danke.
__________________

Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.02.2018, 09:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.074
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von AndreasB Beitrag anzeigen
Gibt es einen eleganteren Weg, der von vorneherein nur /zwischen/ den Elementen etwas einfügt. Und eben nicht auch am äußersten Rand, wenn kein weiterer Nachbar mehr daneben steht.
Nein.
Eventuell mit CSS3 Selektoren wie :has (also nur dann, wenn das Element einen Nachfolger hat), da ist der support aber nicht wirklich *g* da.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.02.2018, 09:28
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

Danke Ich war nicht sicher, ob ich was übersehen habe.
__________________

Mit Zitat antworten
  #4 (permalink)  
Alt 28.02.2018, 09:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 10.01.2010
Beiträge: 1.071
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

Zitat:
Typischerweise setzt man eine Regel, die rechts etwas hinzufügt und entfernt dann beim "last-child" das Ganze wieder.
Nein. Typischerweise (= in der Mehrheit) werden die Links oder deren parent-Container direkt ohne Abstände nebeneinander gesetzt. "Abstände" werden dann gleichmäßig per padding erzeugt.

Richtige Abstände werden aktuell mittels Flexbox oder zunehmend per CSS-Grid erzeugt.

Abstände mittels margin werden in der Praxis eher selten erstellt. Bevor es Flexbox gab waren sie häufiger zu sehen.

Grafische Elemente (durch border oder mittels Grafiken) wurden eher von Anfängern verwendet, da sie in deren Augen mehr hermachen.

Zitat:
Gibt es einen eleganteren Weg, der von vorneherein nur /zwischen/ den Elementen etwas einfügt. Und eben nicht auch am äußersten Rand, wenn kein weiterer Nachbar mehr daneben steht.
Ja. Zum Beispiel ganz einfach mit nth-last-of-type oder nth-last-child.

Gruss

MrMurphy
Mit Zitat antworten
  #5 (permalink)  
Alt 28.02.2018, 10:02
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.074
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen
Ja. Zum Beispiel ganz einfach mit nth-last-of-type oder nth-last-child.

Gruss

MrMurphy
Ja, da hast du Recht, da muss ich mein "Nein" revidieren
Mit Zitat antworten
  #6 (permalink)  
Alt 28.02.2018, 10:09
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

Zitat:
Zitat von MrMurphy Beitrag anzeigen

Richtige Abstände werden aktuell mittels Flexbox oder zunehmend per CSS-Grid erzeugt.
Wie erzeugt man denn bitte mittels Flexbox folgende Ausgabe aus einer UL?

Code:
# AGB • Impressum • Datenschutzerklärung                          #
Sowas meine zum Beispiel mit Trenner /zwischen/ den Elementen.
Die # symbolisieren die Viewport-Grenzen.

Es kann auch eine horizontale Linie sein, die über die gesamte Höhe der Box läuft (und dann so aussieht wie ein border).

Code:
#     AGB     |     Impressum     |     Datenschutzerklärung     #
__________________


Geändert von AndreasB (28.02.2018 um 10:15 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 28.02.2018, 19:44
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.027
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Ich weiß nicht, ob ich dein Problem verstanden habe. Du kannst doch tricksen indem du zum Beispiel nur lis ansprichst die schon einen Vorgänger haben, oder last-child ausschließt:
Code:
li + li {
	border-left: 1px solid red;
}

li:not(:last-child) {
	border-right: 1px solid red;
}
Je nachdem, ob du links oder rechts am Element etwas stylen (oder ein Pseudoelement hinzufügen) willst. Meinst du sowas?

PS: Du meinst eine vertikale Linie oder?
Mit Zitat antworten
  #8 (permalink)  
Alt 28.02.2018, 22:10
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

@inta
Danke. Sowas meinte ich. Ich kannte eigentlich beide Selektoren, hatte sie aber wohl unbewußt als schlecht unterstützt aus der Vergangenheit abgespeichert.

Nochmal kurz zum Gestaltungsziel bei der horizontalen Navbar, wo sich die Breiten der einzelnen Menüpunkt auf die ganze Breite aufteilen und wo das trennende vertikale "border-left" in der Mitte stehen soll.

https://codepen.io/fermion/pen/MQLYvO

Falls Du was aus dem Ärmel schüttelst: gerne.

Ich muss mich in flexbox und seine Eigenheiten noch einfuchsen.
__________________

Mit Zitat antworten
  #9 (permalink)  
Alt 28.02.2018, 22:57
Benutzerbild von inta
free as in freedom
XHTMLforum-Kenner
 
Registriert seit: 04.12.2006
Ort: Berlin
Beiträge: 5.027
inta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz seininta kann auf vieles stolz sein
Standard

Lass die Kind-Elemente einfach mit flex-grow den gesamten Platz einnehmen:
https://codepen.io/anon/pen/PQVNdE
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.03.2018, 09:21
Benutzerbild von AndreasB
Erfahrener Benutzer
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 29.11.2005
Beiträge: 1.326
AndreasB wird schon bald berühmt werden
Standard

@inta
Vielen Dank

Flexbox ist so genial.
__________________

Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Abstände zwischen img wollen nicht weg Lili0312 CSS 2 03.09.2008 19:57
Horizontale Navigation - Abstand zwischen </li> und <li> outlaw CSS 4 26.08.2008 18:52
ie. Abstand über horizontaler Navi geht nicht weg. tifi CSS 5 21.11.2006 18:17
Bekomme Abstand zwischen Bild und Tabelle nicht weg TheGrudge CSS 2 03.04.2006 11:03
Abstand zwischen Bildern soll weg riot CSS 9 28.06.2005 16:16


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:29 Uhr.