Warum schiebt sich bei diesem Code die "ul" nach rechts?

3 Antworten

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
13.06.2024, 19:47
Sobald man Flex 1 Setzt schiebt sich die "ul" nach Rechts, warum das?

Das flex-Property ist ein Shorthand für flex-grow, flex-shrink und flex-basis. Explizit flex-grow gibt an, mit welchem Faktor das Element den restlich verfügbaren Platz im Flex-Container einnehmen soll. Der Standardwert ist 0, für deinen logo-Container setzt du ihn auf 1. Somit ist der Container das einzige Element im Flex-Container, welches sich den noch verfügbaren Platz einverleiben darf.

Zuletzt noch drei Anmerkungen:

1) Logo ist keine gute Linkbeschreibung, immerhin verweist der Link doch gar nicht auf ein Logo. Wenn der Link stets auf die Startseite zeigen soll, wäre ein Text wie "Gehe zu Startseite" besser.

2) Dein Bild (Logo) ist ein dekoratives Element. Der Wert des alt-Attributs sollte daher leer bleiben. Alternativ (wenn du den Text des darumliegenden Links eh nicht anzeigen möchtest) kann der Linktext auch in das alt-Attribut:

<a href="#"><img src="logo.svg" alt="Go to start page"></a>

3) Dem Toggle-Link fehlt ein Linktext. Zudem kann man wohl bezweifeln, dass es sich hierbei tatsächlich um einen Link handelt. Es soll sich bei Klick doch sicherlich eher ein Flyout o.ä. öffnen, was eine klassiche Buttonaktion wäre.

<button aria-label="Open menu" type="button"><ion-icon name="menu-outline"></ion-icon></button>

Die Buttonbeschriftung kann man mit einem aria-label-Attribut vornehmen.

Alternativ zu einem Button könntest du ebenso ein Element mit einer entsprechenden role ausstatten:

<div aria-label="Open menu" role="button"><ion-icon name="menu-outline"></ion-icon></div>
Trismegisto 
Beitragsersteller
 14.06.2024, 09:25

Wow danke, hat mir sehr weitergeholfen!

Gruß

Limearts
13.06.2024, 14:35

Weil eine Liste in HTML von Haus aus mit einer Einrückung formatiert ist, damit die Aufzählungszeichen der Listenelemente Platz haben. Willst Du das unterbinden, kannst Du das Padding von .menu oder schlicht ul einfach auf 0 setzen.
Woher ich das weiß:Berufserfahrung – selbstständiger Dienstleister und Nerd
cleanercode  13.06.2024, 17:11

Du hast da etwas falsch verstanden. Es geht nicht um die Liste, sondern das Layout.

Trismegisto 
Beitragsersteller
 13.06.2024, 16:54

check nciht was du meinst....
cleanercode
13.06.2024, 17:34

Es wäre gut zu wissen, was du erzwingen willst.

Das Logo in die Navigationsleiste zu packen ist nicht besonders schön. Du bräuchtest einen Header-Container mit zwei weiteren Containern jeweils für das Logo und die Nav-Leiste.

Ist nicht schön, aber ich hoffe, es ist ein Ansatz:

<html>
<head>
    <style>
        .header {
            border: 1px solid black;
            display: inline-flex;
        }

        .nav {
            border: 1px solid red;
        }

        .logo {
            border: 1px solid blue;
        }

    </style>
</head>
<body>
    <div class="header">
        <div class="logo">
            <a href="#"><img src="logo.svg" alt="logo">Logo</a>
        </div>
        <div class="nav">
            <nav>
                <ul class="menu">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
    </div>
</body>
</html>
regex9  13.06.2024, 19:53
Das Logo in die Navigationsleiste zu packen ist nicht besonders schön.

Das Element in einen nichtssagenden div-Container zu verschieben ist unschön. Für einen Header-Bereich gibt es das header-Element.

Das Logo aber auch einfach (wie gehabt) im nav-Element zu behalten, ist nicht verkehrt, da es im Fall des FS ebenso der Navigation dient.