• 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
59 wizyt
pytanie zadane 17 lipca w HTML i CSS przez plkpiotr Stary wyjadacz (12,240 p.)
edycja 18 lipca 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 przez Comandeer Mentor (364,980 p.)
wybrane 17 lipca 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 przez plkpiotr Stary wyjadacz (12,240 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 przez Comandeer Mentor (364,980 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 przez plkpiotr Stary wyjadacz (12,240 p.)
Dziękuję raz jeszcze : )

Podobne pytania

0 głosów
1 odpowiedź 75 wizyt
pytanie zadane 14 grudnia 2016 w HTML i CSS przez The Real Slim Stefan Początkujący (370 p.)
0 głosów
1 odpowiedź 50 wizyt
pytanie zadane 25 marca 2016 w HTML i CSS przez Decol Użytkownik (560 p.)
0 głosów
2 odpowiedzi 107 wizyt
pytanie zadane 1 dzień temu w HTML i CSS przez Justyna Użytkownik (570 p.)
Obowiązuje już zaktualizowany regulamin.

Czy wiesz, że nie musisz już odświeżać strony głównej?

Lista pytań i odpowiedzi aktualizuje się automatycznie!

38,676 zapytań

76,595 odpowiedzi

149,654 komentarzy

18,085 pasjonatów

Przeglądających: 223
Pasjonatów: 5 Gości: 218

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.

...