Ergebnis 1 bis 2 von 2

Thema: CSS: Korrekte Verschachtelung

  1. #1
    HTML Newbie
    Registriert seit
    13.10.2016
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard CSS: Korrekte Verschachtelung

    Hallöchen,

    ich pauke aktuell ein wenig das Webdesign mit Hilfe eines Rheinwerke-Videotrainings. Hier wird aktuell ein Submenü gebaut, welches aufgeklappt wird, sobald man mit der Maus über einen Menüpunkt fährt. Die dort hinterlegten a-Elemente sollen mit text-align links ausgerichtet werden, soweit alles klar. Gemacht wird dies folgendermaßen:

    header nav ul li ul {
    display: none;
    background-color: #0a0c0d;
    position: absolute;
    top: 111px;
    text-align: left;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.;
    -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.;
    -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.;
    }

    Verstehe ich soweit auch. Im Header-Element befindet sich ein Nav-Element, welches ein ul-Element und mehrere li-Elemente beinhaltet (das Hauptmenü eben). Innerhalb dieses Hauptmenüs gibt es nun ein weiteres ul-Element, welches für das Submenü zuständig ist und dieses wird nun links zentriert.

    WIESO werden aber nicht gleich die dort enthaltenen li Elemente angesprochen sondern die ul, beispielsweise so:

    header nav ul li ul li {
    display: block;
    padding: 2px 8px;
    HIER das text-align:left;
    }


    ? Ich habe zum Testen das text-align oben beim ul-Element entfernt und es unten bei den li-Elementen des Submenüs (wie oben gezeigt) eingefügt, mit der gleichen Wirkung. Ist es in solchen Fällen egal, wo man das text-align setzt oder gibt es einen tieferen Grund, wieso der Trainer dies explizit bei der ul und nicht dessen li-Elementen einfügt?

    Danke im Voraus und Gruß

  2. #2
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    532
    Danke
    12
    Bekam 60 mal "Danke" in 60 Postings

    Standard AW: CSS: Korrekte Verschachtelung

    Hallo,

    Du musst Dir das DOM ( DocumentObjectModel ) als Pfad vorstellen.

    Ein Beispiel
    HTML-Code:
    <header>
        <nav>
            <ul>
                <li><a href="">1</a>
                    <ul>
                        <li><a href="">1.1</a></li>
                        <li><a href="">1.2</a></li>
                    </ul>
                </li>
                <li><a href="">2</a>
                    <ul>
                        <li><a href="">2.1</a></li>
                        <li><a href="">2.2</a></li>
                    </ul>
                </li>
                <li><a href="">3</a>
                    <ul>
                        <li><a href="">3.1</a></li>
                        <li><a href="">3.2</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header
    Die Einrückung verrät eigentlich schon das ganze Geheimnis.
    Du wanderst mit jeder Elementangabe eine Ebene weiter rein:
    Code:
    /* selektiert alle ul-tags, egal auf welcher ebene */
    ul
    header ul
    header nav ul
    
    /* selektiert ausschliesslich die ul-tags auf 5. ebene, da die auf 3. ebene keinen li-parent haben! */
    li ul
    header li ul
    header ul li ul
    header nav li ul
    header nav ul li ul
    Wenn Du expliziter arbeiten willst, nutzt Du den > Operator:
    Code:
    ul > ul
    würde bspw. nichts selektieren, weil im DOM kein ul unmittelbares Child-Element von einem ul ist!

    Code:
    li > ul
    hingegen selektiert die ul-Tags der 5. Ebene, weil es die einzigen sind, die unmittelbare Child-Element eines li-Tags sind!

    Gruß Arne

Ähnliche Themen

  1. Keine Korrekte Darstellung - Hilfe!!!
    Von Tracey im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 01.09.2008, 20:52
  2. Nicht korrekte Darstellung von mm_menu's im IE7
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 21.03.2007, 19:46
  3. verschachtelung der frames
    Von wasti32 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 18.02.2007, 19:12
  4. verschachtelung von mehreren navi's
    Von MAC im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 14.07.2005, 00:48
  5. Unsere korrekte Seite
    Von im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 1
    Letzter Beitrag: 01.01.2005, 03:48

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •