Meowsalot: Anordnung

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)

akzeptierte Antworten

  1. 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

    1. @@beatovich

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

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. 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.

  2. 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

    1. 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

    2. @@MrMurphy1

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

      Oder flex: 1.

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

      LLAP 🖖

      --
      „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
      1. 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

        --
        Rosen sind rot.
        1. @@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 🖖

          --
          „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        2. 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

    3. 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)

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

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

    1. 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

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

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

        1. 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

  4. 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

    --
    sumpsi - posui - clusi
    1. 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)

      1. @@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 🖖

        --
        „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
        1. Hallo Gunnar,

          ok, das <div> habe ich entfernt.

          Bis bald!
          Meowsalot (Bernd)