• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi
Zapytaj

Stylizowanie dwóch różnych nieuporządkowanych list <ul>

VPS Starter Arubacloud
0 głosów
365 wizyt
pytanie zadane 17 lipca 2017 w HTML i CSS przez plkpiotr Stary wyjadacz (12,420 p.)
edycja 18 lipca 2017 przez plkpiotr

W jaki sposób mogę określić dwa różne style dla różnych list <ul> w CSS? Wewnątrz HTML umieszczone są jak niżej:

  • div container
    • div wrapper
      • first ul
    • div beam
      • second ul
<!DOCTYPE HTML>
<html lang="en-GB">
<head>
    <meta charset="utf-8">
    <meta name="description" content="Home page web application's for group of squash players">
    <meta name="keywords" content="squash, team, games, matches, players, society, app, html, css, js, php, sql">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="icon" href="img/squashBall.png">
    <link rel="stylesheet" href="css/general.css">
    <!--    <link rel="stylesheet" href="css/offline.css">-->
    <link href="https://fonts.googleapis.com/css?family=Titillium+Web:400,700&amp;subset=latin-ext" rel="stylesheet">
    <title>
        Home | Squash Court
    </title>
</head>
<body>
    <div class="container">
        <div class="wrapper">
            <header>
                <nav>
                    <ul>
                        <li class="online"><a href="get-to-know-squash-court-better">Home</a></li>
                        <li class="online"><a href="#">Calendar</a></li>
                        <li class="online"><a href="#">Games</a></li>
                        <li class="online"><a href="#">Rankings</a></li>
                        <li class="online"><a href="#">Chat</a></li>
                        <li class="online"><a href="#">Profile</a></li>
                    </ul>
                </nav>
            </header>
        </div>
        <section>
            <div class="panel">
                <h1>Web application for group of squash players</h1>
                <img src="img/playing-squash-game.jpg" alt="Squash match">
                <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deleniti, exercitationem praesentium
                    quasi reiciendis suscipit voluptatibus? Eos est omnis quod tempora voluptate! Accusantium dolorum
                    eius magnam, maxime reiciendis sit voluptatem? Lorem ipsum dolor sit amet, consectetur adipisicing
                    elit. Adipisci aliquid beatae dolor minima neque placeat quae tenetur! Accusantium consectetur
                    consequatur est fugit, hic nisi omnis repellendus? Aliquid cupiditate quae tempore!</p>
            </div>
        </section>
        <main>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A deleniti, exercitationem praesentium
                quasi reiciendis suscipit voluptatibus? Eos est omnis quod tempora voluptate! Accusantium dolorum
                eius magnam, maxime reiciendis sit voluptatem? Lorem ipsum dolor sit amet, consectetur adipisicing
                elit. Adipisci aliquid beatae dolor minima neque placeat quae tenetur! Accusantium consectetur
                consequatur est fugit, hic nisi omnis repellendus? Aliquid cupiditate quae tempore!</p>
                uatur est fugit, hic nisi omnis repellendus? Aliquid cupiditate quae tempore!</p>
        </main>
        <footer>
            <div class="beam">
                <ul>
                    <li>First</li>
                    <li>Second</li>
                    <li>Third</li>
                    <li>Forth</li>
                </ul>
                <p class="signature">
                    WEB SQUASH COURT - All rights reserved - 2017 - &copy
                </p>
            </div>
        </footer>
    </div>
</body>

Próbowałem w następujący sposób, wpisując kolejno elementy, które się w sobie zawierają, zarówno z selektorami > jak i bez (edit: najwyraźniej błąd składniowy, bo ich usunięcie rozwiązało problem), jednak bez pożądanych efektów:

body {
    color: white;
    background-color: #121212;
    font-family: 'Titillium Web', sans-serif;
    font-size: 20px;
    margin: 0;
}

.wrapper > {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
}

.wrapper > ul {
    margin: 0;
    text-align: center;
    cursor: default;
    height: 60px;
}

.wrapper > ul > li {
    display: inline-block;
    width: 100px;
    line-height: 200%;
    height: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.wrapper > ul > li > a {
    color: #ffffff;
    font-weight: 700;
    display: block;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

.wrapper > ul > li.online:hover {
    background-color: #f16a85;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

.wrapper > ul > li > a {
    text-decoration: none;
}

.panel {
    text-align: center;
    margin-top: 60px;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.panel img {
    filter: brightness(40%) blur(3px);
    position: relative;
    width: 100%;
    margin: -500px 0 0 0;
}

.panel > h1 {
    font-size: 40px;
    position: absolute;
    top: 100px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 5;
}

.panel > h1::after {
    content: '';
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border: 2px solid #dc143c;
    width: 300px;
}

.panel > p {
    position: absolute;
    top: 250px;
    margin-left: 200px;
    margin-right: 200px;
    text-align: center;
    z-index: 5;
}

.beam > ul {
    background-color: black;
}

@media (max-width: 570px) {
    .wrapper > ul {
        background-color: purple;
    }

    .wrapper > ul > li {
        width: 60px;
    }

    .wrapper > ul > li > a {
        font-size: 14px;
    }

    .panel > img {
        margin: -20px 0 0 0;
    }

    .panel > h1 {
        font-size: 22px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 10px;
        width: 250px;
    }

    .panel > p {
        font-size: 12px;
        top: 160px;
        margin-left: 90px;
        margin-right: 90px;
    }
}

@media (min-width: 571px) and (max-width: 768px) {
    .wrapper > ul {
        background-color: deepskyblue;
    }

    .wrapper > ul > li {
        width: 70px;
    }

    .wrapper > ul > li > a {
        font-size: 16px;
    }

    .panel > img {
        margin: -20px 0 0 0;
    }

    .panel > h1 {
        font-size: 24px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 10px;
        width: 250px;
    }

    .panel > p {
        font-size: 16px;
        top: 160px;
        margin-left: 90px;
        margin-right: 90px;
    }
}

@media (min-width: 769px) and (max-width: 980px) {
    .wrapper > ul {
        background-color: green;
    }

    .wrapper > ul > li {
        width: 80px;
    }

    .panel > img {
        margin: -210px 0 0 0;
    }

    .panel > h1 {
        font-size: 26px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 10px;
        width: 250px;
    }

    .panel > p {
        font-size: 16px;
        top: 160px;
        margin-left: 100px;
        margin-right: 100px;
    }
}

@media (min-width: 981px) and (max-width: 1200px) {
    .wrapper > ul {
        background-color: orange;
    }

    .wrapper > ul > li {
        width: 90px;
    }

    .panel > img {
        margin: -280px 0 0 0;
    }

    .panel > h1 {
        font-size: 32px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 10px;
        width: 250px;
    }

    .panel > p {
        font-size: 18px;
        top: 180px;
        margin-left: 200px;
        margin-right: 200px;
    }
}

@media (min-width: 1201px) and (max-width: 1600px) {
    .wrapper > ul {
        background-color: #dc143c;
    }

    .panel > img {
        margin: -330px 0 0 0;
    }
}

@media (min-width: 1601px) {
    .wrapper > ul {
        background-color: black;
    }

    .panel > img {
        margin: -460px 0 0 0;
    }

    .panel > h1 {
        font-size: 36px;
        top: 100px;
    }

    .panel > h1::after {
        margin-top: 15px;
        display: block;
        width: 300px;
    }

    .panel > img {
        margin: -280px 0 0 0;
    }

    .panel > h1 {
        font-size: 36px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 15px;
        width: 250px;
    }

    .panel > p {
        font-size: 24px;
        top: 200px;
        margin-left: 400px;
        margin-right: 400px;
    }
}

Co robię niewłaściwie? Chodzi o kolejność zapisu, czy może niepoprawnie wykorzystuję Media Queries?

1 odpowiedź

+1 głos
odpowiedź 17 lipca 2017 przez Comandeer Guru (604,920 p.)
wybrane 17 lipca 2017 przez plkpiotr
 
Najlepsza

Nie możesz użyć >, bo te listy nie są bezpośrednio w tych div. Możesz co najwyżej użyć czegoś na kształt .wrapper ul, .wrapper li itd.

 komentarz 17 lipca 2017 przez plkpiotr Stary wyjadacz (12,420 p.)

Dziękuję za pomoc, istotnie zrezygnowanie z "bezpośredniego" zawierania pomogło:

body {
    color: white;
    background-color: #121212;
    font-family: 'Titillium Web', sans-serif;
    font-size: 20px;
    margin: 0;
}

.wrapper {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 10;
}

.wrapper ul {
    margin: 0;
    text-align: center;
    cursor: default;
    height: 60px;
}

.wrapper ul > li {
    display: inline-block;
    width: 100px;
    line-height: 200%;
    height: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.wrapper ul > li > a {
    color: #ffffff;
    font-weight: 700;
    display: block;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

.wrapper ul > li.online:hover {
    background-color: #f16a85;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

.wrapper ul > li > a {
    text-decoration: none;
}

.panel {
    text-align: center;
    margin-top: 60px;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.panel img {
    filter: brightness(40%) blur(3px);
    position: relative;
    width: 100%;
    margin: -500px 0 0 0;
}

.panel > h1 {
    font-size: 40px;
    position: absolute;
    top: 100px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 5;
}

.panel > h1::after {
    content: '';
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    border: 2px solid #dc143c;
    width: 300px;
}

.panel > p {
    position: absolute;
    top: 250px;
    margin-left: 200px;
    margin-right: 200px;
    text-align: center;
    z-index: 5;
}

.beam ul {
    background-color: black;
}

@media (max-width: 570px) {
    .wrapper ul {
        background-color: purple;
    }

    .wrapper ul > li {
        width: 60px;
    }

    .wrapper ul > li > a {
        font-size: 14px;
    }

    .panel > img {
        margin: -20px 0 0 0;
    }

    .panel > h1 {
        font-size: 22px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 10px;
        width: 250px;
    }

    .panel > p {
        font-size: 12px;
        top: 160px;
        margin-left: 90px;
        margin-right: 90px;
    }
}

@media (min-width: 571px) and (max-width: 768px) {
    .wrapper ul {
        background-color: deepskyblue;
    }

    .wrapper ul > li {
        width: 70px;
    }

    .wrapper ul > li > a {
        font-size: 16px;
    }

    .panel > img {
        margin: -20px 0 0 0;
    }

    .panel > h1 {
        font-size: 24px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 10px;
        width: 250px;
    }

    .panel > p {
        font-size: 16px;
        top: 160px;
        margin-left: 90px;
        margin-right: 90px;
    }
}

@media (min-width: 769px) and (max-width: 980px) {
    .wrapper ul {
        background-color: green;
    }

    .wrapper ul > li {
        width: 80px;
    }

    .panel > img {
        margin: -210px 0 0 0;
    }

    .panel > h1 {
        font-size: 26px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 10px;
        width: 250px;
    }

    .panel > p {
        font-size: 16px;
        top: 160px;
        margin-left: 100px;
        margin-right: 100px;
    }
}

@media (min-width: 981px) and (max-width: 1200px) {
    .wrapper ul {
        background-color: orange;
    }

    .wrapper ul > li {
        width: 90px;
    }

    .panel > img {
        margin: -280px 0 0 0;
    }

    .panel > h1 {
        font-size: 32px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 10px;
        width: 250px;
    }

    .panel > p {
        font-size: 18px;
        top: 180px;
        margin-left: 200px;
        margin-right: 200px;
    }
}

@media (min-width: 1201px) and (max-width: 1600px) {
    .wrapper ul {
        background-color: #dc143c;
    }

    .panel > img {
        margin: -330px 0 0 0;
    }
}

@media (min-width: 1601px) {
    .wrapper ul {
        background-color: black;
    }

    .panel > img {
        margin: -460px 0 0 0;
    }

    .panel > h1 {
        font-size: 36px;
        top: 100px;
    }

    .panel > h1::after {
        margin-top: 15px;
        display: block;
        width: 300px;
    }

    .panel > img {
        margin: -280px 0 0 0;
    }

    .panel > h1 {
        font-size: 36px;
        top: 75px;
    }

    .panel > h1::after {
        margin-top: 15px;
        width: 250px;
    }

    .panel > p {
        font-size: 24px;
        top: 200px;
        margin-left: 400px;
        margin-right: 400px;
    }
}

Korzystając z tego, że problem rozwiązany, czy mogę zapytać o powierzchowną ocenę dotychczasowego kodu - niekoniecznie Pana? Jest to mój pierwszy projekt i mam wątpliwości, czy póki co będzie coś z tego, czy raczej web developer „płakał jak przeglądał’’ ; )

1
 komentarz 17 lipca 2017 przez Comandeer Guru (604,920 p.)

Selektory powinni być jak najkrótsze, w idealnym przypadku zawierać po prostu klasę. Można np. poczytać sobie o metodologii BEM.

 komentarz 17 lipca 2017 przez plkpiotr Stary wyjadacz (12,420 p.)
Dziękuję raz jeszcze : )

Podobne pytania

0 głosów
0 odpowiedzi 135 wizyt
[CSS] Media queries Chrome i Firefox różnica dla 1px
pytanie zadane 4 grudnia 2019 w HTML i CSS przez jared Gaduła (3,600 p.)
0 głosów
1 odpowiedź 169 wizyt
Menu rozwijane złożone z dwóch list ( ol i ul ) - poprawne wyświetlanie
pytanie zadane 10 lipca 2018 w HTML i CSS przez Biay Początkujący (420 p.)
0 głosów
2 odpowiedzi 551 wizyt
Stylizacja a w ul > li elementu o dwóch klasach
pytanie zadane 17 października 2019 w HTML i CSS przez vingilot85 Obywatel (1,150 p.)

93,016 zapytań

141,977 odpowiedzi

321,272 komentarzy

62,361 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...