• 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>

0 głosów
57 wizyt
pytanie zadane 5 dni temu w HTML i CSS przez Zaćwilichowski Stary wyjadacz (10,970 p.)
edycja 3 dni temu przez Zaćwilichowski

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ź 5 dni temu przez Comandeer Mentor (354,540 p.)
wybrane 5 dni temu przez Zaćwilichowski
 
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 5 dni temu przez Zaćwilichowski Stary wyjadacz (10,970 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 5 dni temu przez Comandeer Mentor (354,540 p.)

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

komentarz 5 dni temu przez Zaćwilichowski Stary wyjadacz (10,970 p.)
Dziękuję raz jeszcze : )

Podobne pytania

0 głosów
1 odpowiedź 49 wizyt
pytanie zadane 25 marca 2016 w HTML i CSS przez Decol Użytkownik (560 p.)
0 głosów
1 odpowiedź 74 wizyt
pytanie zadane 14 grudnia 2016 w HTML i CSS przez The Real Slim Stefan Nowicjusz (190 p.)
0 głosów
2 odpowiedzi 63 wizyt
pytanie zadane 21 lutego 2016 w HTML i CSS przez AviS98 Początkujący (370 p.)

36,094 zapytań

72,754 odpowiedzi

140,029 komentarzy

16,786 pasjonatów

Przeglądających: 190
Pasjonatów: 22 Gości: 168

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...