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

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

VPS Starter Arubacloud
0 głosów
393 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 (605,680 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 (605,680 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 138 wizyt
pytanie zadane 4 grudnia 2019 w HTML i CSS przez jared Gaduła (3,600 p.)
0 głosów
1 odpowiedź 173 wizyt
pytanie zadane 10 lipca 2018 w HTML i CSS przez Biay Początkujący (420 p.)
0 głosów
2 odpowiedzi 597 wizyt
pytanie zadane 17 października 2019 w HTML i CSS przez vingilot85 Obywatel (1,150 p.)

93,078 zapytań

142,041 odpowiedzi

321,445 komentarzy

62,422 pasjonatów

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!

...