Anordnung

[Meowsalot]

Hallo alle,

ist es möglich den ersten <li> Punkt ganz nach links zu schieben und die anderen ganz nach rechts, wie es jetzt auch ist?

<footer>
	<div class="container">
	<ul>
		<li><a href="start.php">Start</a></li>
    <li><a href="impressum.php">Impressum</a></li> 
		<li><a href="datenschutz.php">Datenschutz</a></li>
	</ul>
	</div>
</footer>

Und das dazugehörge CSS:

.container {
    width: 100%;  
    margin: 0 auto;
}

footer {
    padding: 1em;
    border-top: 1px solid #b39a96;
    background: linear-gradient(#252525, #0a0a0a);
}

footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row-reverse;
}

footer li:nth-last-child(2n+1)::after {
   content: "|";
   margin-left: 0.5em;
   margin-right: 0.5em;
   color: #000;
}

footer ul li a {
    color: #848282;
    text-decoration: none;
}

Bis bald!
Meowsalot (Bernd)

[beatovich]

hallo

Hallo alle,

ist es möglich den ersten <li> Punkt ganz nach links zu schieben und die anderen ganz nach rechts, wie es jetzt auch ist?

https://developer.mozilla.org/en-US/docs/Web/CSS/order

[Gunnar Bittersmann]

@@beatovich

Abgesehen davon, dass order hier wohl nicht hilft, ist das Umsortieren von Flexitems grundsätzlich ein Problem.

LLAP 🖖

[beatovich]

hallo

@@beatovich

Abgesehen davon, dass order hier wohl nicht hilft, ist das Umsortieren von Flexitems grundsätzlich ein Problem.

Ich hatte das Problem nicht korrekt erfasst (lechts und rinks)!

Umsortieren ist ein bedingtes, nicht ein grundsätzliches Problem.

[MrMurphy1]

Hallo

Was soll das

flex-direction: row-reverse;

Das solltest du wohl weglassen.

Dann kannst du mal versuchen folgendes hinzuzufügen:

footer li:first-child {
   margin-right: auto;
}

Gruss

MrMurphy

[beatovich]

hallo

Hallo

Was soll das

flex-direction: row-reverse;

Das solltest du wohl weglassen.

Dann kannst du mal versuchen folgendes hinzuzufügen:

footer li:first-child {
   margin-right: auto;
}

und dies

justify-content: space-between

[Gunnar Bittersmann]

@@MrMurphy1

footer li:first-child {
   margin-right: auto;
}

Oder flex: 1.

Und footer li:first-of-type dürfte der robustere Selektor sein.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Und footer li:first-of-type dürfte der robustere Selektor sein.

Genau. Weil jeder dritte oder zweite regelmäßig script-Elemente in seine Listen steckt. 😉

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Und footer li:first-of-type dürfte der robustere Selektor sein.

Genau. Weil jeder dritte oder zweite regelmäßig script-Elemente in seine Listen steckt. 😉

Oder template-Elemente. 😉

LLAP 🖖

[marctrix]

Hej Matthias,

Und footer li:first-of-type dürfte der robustere Selektor sein.

Genau. Weil jeder dritte oder zweite regelmäßig script-Elemente in seine Listen steckt. 😉

Es macht einfach Sinn, grundsätzlich das zu schreiben, was man meint. Wenn man den ersten Listeneintrag links haben möchte, schreibt man das auch und nicht erstes Kind 😉

Dadurch wird Code robust und man muss weniger denken. Ich habe es schon mal hier und dort erwähnt: wenn man sich solche Dinge einfach angewöhnt, statt sich ständig zu fragen, ob es sich lohnt, muss man schon nachdenken, um Seiten zu bauen, die nicht funktionieren — gilt auch und insbesondere für Barrierefreiheit.

Also einfach first-of-type immer benutzen, so lange es nicht einen expliziten Grund gibt, warum es in einem bestimmten Fall nicht zum gewünschten Ergebnis führt. Erst dann fange ich an zu denken.

Marc

[Meowsalot]

Hallo MrMurphy1,

danke für die Info. Hab es jetzt so umgesetzt

footer {
    padding: 1em;
    border-top: 1px solid #b39a96;
    background: linear-gradient(#252525, #0a0a0a);
}

footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;

}

footer li:first-child {
   margin-right: auto;
}

footer li:nth-last-child(2)::after {
   content: "|";
   margin-left: 0.5em;
   margin-right: 0.5em;
   color: #000;
}

footer ul li a {
    color: #848282;
    text-decoration: none;
}

Bis bald!
Meowsalot (Bernd)

[Linuchs]

footer li:nth-last-child(2n+1)::after

last-child ist das letzte <li> im footer, was rechnest du da mit 2n+1?

[MudGuard]

Hi,

footer li:nth-last-child(2n+1)::after

last-child ist das letzte <li> im footer, was rechnest du da mit 2n+1?

beachte den Unterschied zwischen
last-child und
nth-last-child

cu,
Andreas a/k/a MudGuard

[Linuchs]

beachte den Unterschied zwischen
last-child und
nth-last-child

Kann ein footer (oder sonst ein Container) mehrere letzte Kinder haben?

[JürgenB]

https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/strukturelle_Pseudoklasse/nth-last-child

[MudGuard]

Hi,

beachte den Unterschied zwischen
last-child und
nth-last-child

Kann ein footer (oder sonst ein Container) mehrere letzte Kinder haben?

er kann ein letztes, ein vorletztes, ein vorvorletztes, ein vorvorvorletztes usw. Kind haben.

cu,
Andreas a/k/a MudGuard

[Rolf B]

Hallo Meowsalot,

abgesehen von den genannten Lösungen: Brauchst Du den Container für andere Zwecke? Für die gezeigte Aufgabenstellung ist er unnötige Divitis.

Rolf

[Meowsalot]

Hallo Rolf,

ja, weil ich den Footer (Hintergrund) über die ganze Seite gehen lassen möchte und den Inhalt auf eine bestimmte Größe bestimmte breite begrenz wird.

Bis bald!
Meowsalot (Bernd)

[Gunnar Bittersmann]

@@Meowsalot

ja, weil ich den Footer (Hintergrund) über die ganze Seite gehen lassen möchte und den Inhalt auf eine bestimmte Größe bestimmte breite begrenz wird.

.container { width: 100% } begrenzt keinen Inhalt in der Breite.

Das div ist wohl überflüssig. Du kannst auch footer ul { max-width: 42em } angeben. Und ggfs. für andere Blockelemente im Footer.

Oder footer { display: grid } und Beschränkung der Breite der Inhalte wie in diesem Beispiel.

LLAP 🖖

[Meowsalot]

Hallo Gunnar,

ok, das <div> habe ich entfernt.

Bis bald!
Meowsalot (Bernd)