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ß
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Moderator Avatar von Arne Drews
    Registriert seit
    20.01.2016
    Ort
    Friedrichstadt, NF
    Beiträge
    1.198
    Danke
    21
    Bekam 120 mal "Danke" in 119 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
    Anti-Mod Texte in der Signatur, aber PN sperren, weil man der selbst entfachten Diskussionsgrundlage nicht gewachsen ist?! Das zeugt von Reife...

    http://www.php-rocks.de
    » Tutorials

Ähnliche Themen

  1. Keine Korrekte Darstellung - Hilfe!!!
    Von Tracey im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 01.09.2008, 19: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, 18:46
  3. verschachtelung der frames
    Von wasti32 im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 18.02.2007, 18:12
  4. verschachtelung von mehreren navi's
    Von MAC im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 13.07.2005, 23:48
  5. Unsere korrekte Seite
    Von im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 1
    Letzter Beitrag: 01.01.2005, 02:48

Stichworte

Berechtigungen

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