• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

<ul>-Tag hat keinen Einfluss auf "height" in CSS.

M

mehmet_b_90

Neues Mitglied
Hallo zusammen,

ich erstelle gerade für meinen Vater eine Website. Dabei möchte ich ein Toggle-Menü, für die mobile Ansicht, in die Navigation einbauen. Das <ul>-Element lässt sich jedoch mit height in CSS nicht beinflussen. Denn es soll, bevor man auf den Icon klickt nicht sichtbar seien.

Bitte verzeiht mir, ich bin noch am Anfang des Webdesigns.

HTML: 
<!DOCTYPE html>

<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width:device-width, initial-scale=1.0">
       
        <title>Änderungsschneiderei-Lauingen</title>
        <meta name="description" content="Bei uns wird Ihre Kleidung maßgefertigt.">
       
        <link rel="stylesheet" type="text/css" href="css/general.css">
    </head>
   
    <body>
        <header>
            <a id="logo" href="index.html"><h2>Änderungsschneiderei-Lauingen</h2></a>
           
            <nav id="nav">
                <a class="nav-button" id="nav-open" href="#nav"><img src="image/menu.svg"></a>
                <a class="nav-button" id="nav-close" href="#close"><img src="image/menu.svg"></a>
               
                <ul id="nav-list">
                    <li><a href="index.html">Startseite</a></li>
                    <li><a href="prices.html">Preise</a></li>
                    <li><a href="contact.php">Kontakt</a></li>
                </ul>
            </nav>
        </header>
       
        <main>
            <article>
               
            </article>
           
            <aside>
               
            </aside>
        </main>
       
        <footer>
           
        </footer>
    </body>
</html>

CSS: 
* {
    box-sizing: border-box;
    padding: 0rem;
    margin: 0rem;
}

body {
    font-family: Arial, sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

/* ---------- Header ---------- */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #525252;
    height: 3rem;
}

#logo {
    margin-left: 1rem;
    text-decoration: none;
    color: white;
    font-size: 0.6rem;
}

/* ---------- Navigation ---------- */

.nav-button {
    display: inline-block;
}

.nav-button img {
    height: 3rem;
    padding: 0.5rem;
}

#nav-close {
    display: none;
}

#nav-list {
    width: 100%;
    height: 0rem;
    left: 0rem;
    position: absolute;
    transition: height 0.3s;
}

#nav-list li {
    padding: 0.5rem;
    font-weight: 600;
    list-style: none;
    text-align: center;
    background-color: #525252;
    border-bottom: solid 1px white;
}

#nav-list a {
    display: inline-block;
    width: 100%;
    text-decoration: none;
    color: white;
}

#nav-list li:hover {
    background-color: #888888;
}

#nav:target #nav-list {
    height: 5rem;
}

/* ---------- Main ---------- */

main {
    width: 97%;
    margin: 0.5rem auto;
    box-shadow: 0rem 0rem 1rem -0.4rem black;
}

Was mache ich falsch?

Mit freundlichen Grüßen
mehmet_b_90
 
Zuletzt bearbeitet:
Werbung:
So kann das nicht funktionieren!
1. In deinem Link zum öffnen des Menüs hast du als href="#nav" angegeben, willst aber die Liste id="nav-list" ansprechen.
2. Damit die Liste auch in der nicht-fokus Ansicht wirklich nicht sichtbar ist, muss du zu dem height: 0; noch overflow: hidden; im CSS hinzufügen.
3. Dein Link zum schließen der Liste... mit diesem Link müsstest du einem anderen Element den Fokus (target) zuweisen ... ist nicht sichtbar und ich sehe auch mit deinem Setup keine Möglichkeit, dieses zu ändern.

Kann nur empfehlen, deine Idee mit dem :target nochmal zu überdenken und stattdessen eine JavaScript Variante zu programmieren.
 
Hi Sailor,

danke, mit overflow: hidden; funktioniert es jetzt.

1. Ich spreche ja die ID #nav mit der Pseudoklasse :target an. Heißt wenn der Link, der auf #nav zeigt, angeklickt wird, soll #nav-list angesprochen werden. Daher ist das meiner Meinung nach doch richtig. So funktioniert es auch (jetzt mit overflow: hidden;). Sonst korrigiert micht.

Habe es übrigens auch bisher mit der Pseudoklasse :hover umgesetzt. Finde aber, dass es Probleme bei Geräten mit Touch verursacht.

Das mit JavaScript: Wie gesagt bin ich neu in der Webentwicklung. Habe bisher mit Java programmiert. Bisher habe ich mi HTML, CSS und PHP angeeignet. JavaScript steht aber auf der Liste. :smile:
 
Werbung:
Indem ich ich einen zweiten Link anzeigen lasse, der auf irgendeine ID (in dem Fall #close (muss nicht existieren)) zeigt. Damit ändert sich wieder die ID in der URL-Adresse. Somit greift der Selektor #nav:target nicht mehr. Es müsste jetzt in dem Fall ein Selektor Namens #close:target geben.

Jonas Hellwig erklärt das auf seinen Blog sehr ausführlich.

EDIT: Zwei Fragen habe ich noch:

1. Zum Verständis, wieso ist overflow: hidden notwendig, damit das ul-Element auf die height-Eigeschaft eingeht?
2. Ich möchte den Übergang vom <ul>-Tag mit transition gestalten. Jedoch greift die Eigenschaft nicht, weshalb?

CSS: 
* {
    box-sizing: border-box;
    padding: 0rem;
    margin: 0rem;
}

body {
    font-family: Arial, sans-serif;
}

img {
    max-width: 100%;
    height: auto;
}

/* ---------- Header ---------- */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #525252;
    height: 3rem;
}

#logo {
    margin-left: 1rem;
    text-decoration: none;
    color: white;
    font-size: 0.6rem;
}

/* ---------- Navigation ---------- */

.nav-button {
    display: inline-block;
}

.nav-button img {
    height: 3rem;
    padding: 0.8rem;
}

#nav-close {
    display: none;
}

#nav-list {
    width: 100%;
    height: 0rem;
    left: 0rem;
    overflow: hidden;
    position: absolute;
    transition: height 0.3s;
}

#nav:target #nav-list {
    height: auto;
}

#nav:target #nav-open {
    display: none;
}

#nav:target #nav-close {
    display: block;
}

#nav-list li {
    list-style: none;
    text-align: center;
    background-color: #525252;
    border-bottom: solid 1px white;
}

#nav-list li:hover {
    background-color: #888888;
}

#nav-list a {
    width: 100%;
    padding: 0.5rem;
    display: inline-block;
    text-decoration: none;
    color: white;
}

/* ---------- Main ---------- */

main {
    width: 97%;
    margin: 0.5rem auto;
    box-shadow: 0rem 0rem 1rem -0.4rem black;
}

@media screen and (min-width: 700px) {
    .nav-button {
        display: none;
    }
  
    #nav-list {
        display: block;
        position: static;
    }
  
    #nav-list li {
        padding: 0rem;
        display: inline-block;
        border: none;
    }
  
    #nav-list a {
        padding: 0.8rem;
    }
}
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben