[CSS] podbarvení menu (L3)

Webdesign, HTML, CSS, Flash, PHP, ASP, .NET, JavaScript. Kritika www stránek na Smetišti.

Moderátor: Moderátoři Živě.cz

Do fóra se už nepřihlásíte přezdívkou, je potřeba e-mail. Hned teď se podívejte, jakou e-mailovou adresu tady používáte a zapište si ji: odkaz Uživatelský panel v hlavičce –> záložka Profil. (Podrobnosti)

Odeslat příspěvekod Alesh2020 7. 12. 2021 12:04

Zdravím, toto menu s položkama "Lorem, Accusantium, Adipisci, Aut & Eos" by mělo být podbarveno modře.
Ale neděje se to. Kde je potíž?

Kód: Vybrat vše
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8" />
    <title>Titulek stránky</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="Popis stránky" />
    <meta name="author" content="Jméno autora" />

    <link rel="stylesheet" href="css/style.css" type="text/css"/>

    <!--[if lt IE 9]>
        <script src="js/vendor/html5shiv.js"></script>
    <![endif]-->
</head>
<body>

        <p>testovací text</p>
<p style="background: red; color: #FFEE00; border-radius: 999px; width: 100px; height: 100px; vertical-align: top; display: flex; align-items: center; justify-content: center; ">Bestseller!</p>
<nav class="some-meaningless-class"><ul><li><a>...</nav>
<nav class="menu">
    <ul>
        <li><a href="#1">Lorem</a></li>
        <li><a href="#2">Accusantium</a></li>
        <li><a href="#3">Adipisci</a></li>
        <li><a href="#4">Aut</a></li>
        <li><a href="#5">Eos</a></li>
    </ul>
</nav>
   <script src="js/script.js"></script>
</body>
</html>

____
Kód: Vybrat vše
@font-face {
  font-family: Poppins;
  src: url(fonty/Poppins-Regular.ttf);
  font-weight: normal;
}
@font-face {
  font-family: Poppins;
  src: url(fonty/Poppins-ExtraBold.ttf);
  font-weight: bold;
}

.centrovany {
  text-align: center;
}

body {
  font-family: "Poppins";
  font-size: 14px;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  color: #0a294b;
}

h2 {
  font-size: 1.7em;
}

article h2 {
  font-size: 2em;
}

article h1 {
  margin: 0;
  font-size: 2.3em;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 4px solid #ef6534;
}

article h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 10px 0;
  color: #00386b;
  width: max-content;
}

article header {
  height: 900px;
  background: none;
}

article section p {
  margin-bottom: 1.5em;
  line-height: 1.8em;
}

article section a {
  color: #ef6534;
}
#centrovac {
  margin: 0 auto;
  max-width: 960px;
}

.domu-article {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 100px max-content;
  border: 3px inherit green;
  box-shadow: 2px 2px 7px #F22609;
}

.domu-article img {
  width: 300px;
  grid-row-start: 1;
  grid-row-end: span 2;
  grid-column: 2;
  filter: hue-rotate(90deg);
}// https://developer.mozilla.org/en-US/docs/Web/CSS/filter

article {
  padding: 200px 50px;
  flex: 1;
}
.vlevo{
    float:left;
    padding: 10px;
}
.reference-tlacitko {
    background: #F3A30D;
    color: black;
    font-size: 0.9em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 12px 25px;
    border-radius: 25px;
}
body > header {
    height: 100px;
    position: fixed;
    display: flex;
    justify-content: space-evenly;
    top: 0;
    background: #00386B;
    color: white;
    width: 100%;
    z-index: 1;
}
#logo {
    background: url('source/hlavicka.png') no-repeat;
    background-size: 40px 40px;
    height: 40px;
    margin: auto 0 auto 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#logo > * {
    margin: 0 0 0 50px;
}
#logo h1 {
    font-weight: normal;
    font-size: 1.5em;
    line-height: 1.2em;
}
#logo h1 span {
    font-weight: bold;
    text-transform: uppercase;
}
#logo small {
    text-transform: uppercase;
    font-size: 0.85em;
}
nav ul {
    margin: 0;
    height: 100%;
    align-items: center;
    list-style-type: upper-roman;
    display: flex;
}
nav ul li {
    padding: 0 25px;
    margin: 0 5px;
    font-size: 1em;
    line-height: 4.3em;
}
nav ul a {
    color: orange;
    padding: 8px 0;
    text-decoration: none;
    text-transform: uppercase;
}
nav ul a:hover, .aktivni a {
    border-bottom: 2px solid #EF6534;
}
.kontakt-tlacitkoq {
  background: #3783AA;
  padding: 10px 20px;
  border-radius: 20px;
}
.kontakt-tlacitko:hover,
.reference-tlacitko:hover {
  filter: brightness(115%) contrast(85%);
  border: 0;
}
footer {
    box-sizing: border-box;
    text-align: center;
    height: 100px;
    color: white;
    background: #414042;
    padding: 50px 0 0 0;
    clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%);
}
#centrovac {
    margin: 0 auto;
    max-width: 960px;
}
#dovednosti td {
    width: 33%;
    padding: 10px;
    vertical-align: bottom;
    border: 1px solid gray;
}
#dovednosti {
    border-collapse: collapse;
}
#reference img {
  border: 1px solid gray;
  padding: 6px;
  box-shadow: 3px 3px 6px #36F828;
  margin-right: 6px;
}
.clanek {
  box-sizing: border-box;
  width: 100%;
  height: 200px;
  margin: 20px 0;
  padding: 15px;
  background: blue;
}

.postranni-panel {
  box-sizing: border-box;
  width: 100%;
  height: 100px;
  margin: 20px 0;
  padding: 10px;
  background: red;
}

@media screen and (min-width: 900px) {
  .clanek {
    width: 79%;
    float: left;
  }

  .postranni-panel {
    width: 19%;
    float: right;
  }
}
nav.menu {
  display: block;
  width: 100%;
  background: blue;
}
nav.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav.menu ul li {
  width: 100%;
}
nav.menu a {
  display: block;
  color: white;
  text-decoration: none;
  font-family: sans-serif;
  line-height: 2em;
  padding: 0 15px;
}
nav.menu a:hover {
  background: rgba(0, 0, 0, 0.1);
}
Ách jo, kam si má teda člověk psát poznámky... :hm
Alesh2020
Junior
Uživatelský avatar

Odeslat příspěvekod Just_jo 7. 12. 2021 13:25

Na https://codepen.io/pen/ to funguje normálně - jen bych dodal, že ten efekt podtrhnutí není dobrý. Dodej ten rámeček do všech a pak měň jen barvu.
Just_jo
Junior
Uživatelský avatar

Odeslat příspěvekod Alesh2020 7. 12. 2021 14:25

https://postimg.cc/8J8tctYg

Je mi líto - ještě jsem zkusil stáhnout znovu z těhle webovek ty dva kódy a znovu je uložit k sobě, a spustit, ale opět se mi to zobrazilo tak, jak to být nemá. Kde je problém? :hm

Mám Google chrome.
Ách jo, kam si má teda člověk psát poznámky... :hm
Alesh2020
Junior
Uživatelský avatar

Odeslat příspěvekod Wikan 7. 12. 2021 15:02

Máš ten CSS soubor ve správné složce a správně pojmenovaný?
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod JirkaVejrazka 7. 12. 2021 15:18

Klikni pravym tlacitkem na te strance v prohlizeci a vyber z nabidky "View Source Code" (mozna to budes mit cesky, tj. neco jako "zdrojovy kod stranky". Prohlizece maji dobry zvyk ukazovat veci, ktere se jim nelibi, cervene.

Take tam muzes kliknout na odkaz na externi soubory a zkotrolovat si, ze se opravdu otevrou CSS a JS soubory, ktere cekas.

V neposledni rade ma kazdy prohlizec Developer Tools (Vyvojarske nastroje?), obvykle po stisku F11. Kdyz se s nimi naucis pracovat, muzes treba lehce zjistit proc ma kazdy prvek na strance nejakou barvu, vlastnost atd. atp. a odkud ji ziskal (z nejake definice CSS tridy, zdedenou z nadrazeneho prvku atd.)

Tohle by ti hodne mohlo ulehcit patrani po zdroji tvych problemu. Ale musis se s tim naucit pracovat.
JirkaVejrazka
Mírně pokročilý

Odeslat příspěvekod Alesh2020 7. 12. 2021 15:36

Wikan: věřím tomu, že ano https://postimg.cc/WdKHGZ8N

Jirka: zvláštní, nic tam neřve... https://postimg.cc/5H46mH2r :hm

PS: https://uloz.to/file/TLPHPQjOIz4T/test- ... qMBTIvMN== tady to všechno je, ale věřím, že tam nenajdete nic nového. Dát tomu správnou příponu a správně to stáhnout odtud z tohoto vlákna jsem snad zvládl.
Ách jo, kam si má teda člověk psát poznámky... :hm
Alesh2020
Junior
Uživatelský avatar

Odeslat příspěvekod Wikan 7. 12. 2021 15:41

Tak to věříš špatně. Vážně ti "styl.css" přijde stejné jako "css/style.css"?
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod JirkaVejrazka 7. 12. 2021 15:45

"Take tam muzes kliknout na odkaz na externi soubory a zkotrolovat si, ze se opravdu otevrou CSS a JS soubory, ktere cekas." - udelals to?
JirkaVejrazka
Mírně pokročilý

Odeslat příspěvekod Wikan 7. 12. 2021 15:46

A navíc jak na to koukám, tak v tom CSS souboru není CSS, ale opět HTML.
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod Alesh2020 7. 12. 2021 15:55

https://postimg.cc/cg8pPmD5 když jsem ten soubor pojmenoval dobře, tak to stejně nepomohlo.
Ách jo, kam si má teda člověk psát poznámky... :hm
Alesh2020
Junior
Uživatelský avatar

Odeslat příspěvekod Wikan 7. 12. 2021 15:58

A co obsah toho souboru?
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod Alesh2020 7. 12. 2021 17:07

Jde o to, že tato část kódu je z .html?

Kód: Vybrat vše
</head>
<body>

        <p>testovací text</p>
<p style="background: red; color: #FFEE00; border-radius: 999px; width: 100px; height: 100px; vertical-align: top; display: flex; align-items: center; justify-content: center; ">Bestseller!</p>
<nav class="some-meaningless-class"><ul><li><a>...</nav>
<nav class="menu">
    <ul>
        <li><a href="#1">Lorem</a></li>
        <li><a href="#2">Accusantium</a></li>
        <li><a href="#3">Adipisci</a></li>
        <li><a href="#4">Aut</a></li>
        <li><a href="#5">Eos</a></li>
    </ul>
</nav>


A] to nikdy nelze smíchat html a css?
B] potíž je v tom, že já přesně jedu podle zadání kurzu. Co s tím teda, je-li to špatně?
Ách jo, kam si má teda člověk psát poznámky... :hm
Alesh2020
Junior
Uživatelský avatar

Odeslat příspěvekod JirkaVejrazka 7. 12. 2021 17:22

Ano, lze smichat HTML a CSS, kdyz se to udela spravne. Ale kdyz v HTML souboru napises
Kód: Vybrat vše
<link rel="stylesheet" href="...nekde..." type="text/css" />
tak v tom odkazovanem souboru musi byt ciste CSS. HTML tam nema co delat.
JirkaVejrazka
Mírně pokročilý

Odeslat příspěvekod Alesh2020 7. 12. 2021 17:31

Okej...
Ách jo, kam si má teda člověk psát poznámky... :hm
Alesh2020
Junior
Uživatelský avatar

Odeslat příspěvekod Wikan 7. 12. 2021 17:32

Podle zadání kurzu určitě nejedeš. Takovou kravinu by tam snad nikdo nedal.
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod Alesh2020 7. 12. 2021 17:37

PROJEKTY\2_\test

Tak každý se mohl mechanicky ubouchnout, že. Ale dobrá. html prvky jsem odstranil, ale i tak mi to pořád nejede.

Kde může být chyba?

Kód: Vybrat vše
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8" />
    <title>Titulek stránky</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="Popis stránky" />
    <meta name="author" content="Jméno autora" />

    <link rel="stylesheet" href="css/style.css" type="text/css"/>

    <!--[if lt IE 9]>
        <script src="js/vendor/html5shiv.js"></script>
    <![endif]-->
</head>
<body>

        <p>testovací text</p>
<p style="background: red; color: #FFEE00; border-radius: 999px; width: 100px; height: 100px; vertical-align: top; display: flex; align-items: center; justify-content: center; ">Bestseller!</p>
<nav class="some-meaningless-class"><ul><li><a>...</nav>
<nav class="menu">
    <ul>
        <li><a href="#1">Lorem</a></li>
        <li><a href="#2">Accusantium</a></li>
        <li><a href="#3">Adipisci</a></li>
        <li><a href="#4">Aut</a></li>
        <li><a href="#5">Eos</a></li>
    </ul>
</nav>
   <script src="js/script.js"></script>
</body>
</html>


Kód: Vybrat vše
<p style="background: red; color: #FFEE00; border-radius: 999px; width: 100px; height: 100px; vertical-align: top; display: flex; align-items: center; justify-content: center; ">Bestseller!</p>
<nav class="some-meaningless-class"><ul><li><a>...</nav>
Ách jo, kam si má teda člověk psát poznámky... :hm
Alesh2020
Junior
Uživatelský avatar

Odeslat příspěvekod Wikan 7. 12. 2021 17:39

Tak ono nestačí odstranit to HTML. Jestě je potřeba tam dodat nějaké CSS.
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod JirkaVejrazka 7. 12. 2021 17:53

Tohle nema cenu. Venuj 10 minut precteni uplnych zakladu, na ktere jsem te uz odkazoval: https://www.jakpsatweb.cz/css/css-uvod.html#priklady

Konkretni priklad psani externiho CSS souboru mas tady: https://www.jakpsatweb.cz/css/css-prakt ... ml#externi

Tohle tvoje zkouseni, kdy sahnes do orloje, neco zmenis a pak se ptas proc to nefunguje, je plytvani nasim casem.
JirkaVejrazka
Mírně pokročilý

Odeslat příspěvekod Alesh2020 7. 12. 2021 17:58

Wikan píše:Tak ono nestačí odstranit to HTML. Jestě je potřeba tam dodat nějaké CSS.



Tak úvaha byla, že tohle
Kód: Vybrat vše
<link rel="stylesheet" href="css/style.css" type="text/css"/>
spojí .hmtl a .css soubor.
A z .css souboru jsem odstranil .html část, a nechal tam jen ty věci, co souvisejí s .css, pokud .css použijeme pro stylizaci. Pak by tam ten .css soubor byl naprosto bezvýznamný. :hm
Ách jo, kam si má teda člověk psát poznámky... :hm
Alesh2020
Junior
Uživatelský avatar

Odeslat příspěvekod Wikan 7. 12. 2021 18:03

Ach jo. Podívej se na svůj první příspěvek v tomhle vlákně. Máš tam obsahy dvou souborů. Jsi si jistý, že to odpovídá současnému stavu?
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod Alesh2020 7. 12. 2021 18:25

index.html
Kód: Vybrat vše
<!DOCTYPE html>
<html lang="cs">
<head>
    <meta charset="UTF-8" />
    <title>Titulek stránky</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="description" content="Popis stránky" />
    <meta name="author" content="Jméno autora" />

    <link rel="stylesheet" href="css/style.css" type="text/css"/>

    <!--[if lt IE 9]>
        <script src="js/vendor/html5shiv.js"></script>
    <![endif]-->
</head>
<body>

        <p>testovací text</p>
<p style="background: red; color: #FFEE00; border-radius: 999px; width: 100px; height: 100px; vertical-align: top; display: flex; align-items: center; justify-content: center; ">Bestseller!</p>
<nav class="some-meaningless-class"><ul><li><a>...</nav>
<nav class="menu">
    <ul>
        <li><a href="#1">Lorem</a></li>
        <li><a href="#2">Accusantium</a></li>
        <li><a href="#3">Adipisci</a></li>
        <li><a href="#4">Aut</a></li>
        <li><a href="#5">Eos</a></li>
    </ul>
</nav>
   <script src="js/script.js"></script>
</body>
</html>


style.css
Kód: Vybrat vše
@font-face {
  font-family: Poppins;
  src: url(fonty/Poppins-Regular.ttf);
  font-weight: normal;
}
@font-face {
  font-family: Poppins;
  src: url(fonty/Poppins-ExtraBold.ttf);
  font-weight: bold;
}

.centrovany {
  text-align: center;
}

body {
  font-family: "Poppins";
  font-size: 14px;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: center;
  color: #0a294b;
}

h2 {
  font-size: 1.7em;
}

article h2 {
  font-size: 2em;
}

article h1 {
  margin: 0;
  font-size: 2.3em;
  font-weight: bold;
  text-transform: uppercase;
  border-bottom: 4px solid #ef6534;
}

article h1,
h2,
h3,
h4,
h5,
h6 {
  padding: 10px 0;
  color: #00386b;
  width: max-content;
}

article header {
  height: 900px;
  background: none;
}

article section p {
  margin-bottom: 1.5em;
  line-height: 1.8em;
}

article section a {
  color: #ef6534;
}
#centrovac {
  margin: 0 auto;
  max-width: 960px;
}

.domu-article {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 100px max-content;
  border: 3px inherit green;
  box-shadow: 2px 2px 7px #F22609;
}

.domu-article img {
  width: 300px;
  grid-row-start: 1;
  grid-row-end: span 2;
  grid-column: 2;
  filter: hue-rotate(90deg);
}// https://developer.mozilla.org/en-US/docs/Web/CSS/filter

article {
  padding: 200px 50px;
  flex: 1;
}
.vlevo{
    float:left;
    padding: 10px;
}
.reference-tlacitko {
    background: #F3A30D;
    color: black;
    font-size: 0.9em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 12px 25px;
    border-radius: 25px;
}
body > header {
    height: 100px;
    position: fixed;
    display: flex;
    justify-content: space-evenly;
    top: 0;
    background: #00386B;
    color: white;
    width: 100%;
    z-index: 1;
}
#logo {
    background: url('source/hlavicka.png') no-repeat;
    background-size: 40px 40px;
    height: 40px;
    margin: auto 0 auto 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#logo > * {
    margin: 0 0 0 50px;
}
#logo h1 {
    font-weight: normal;
    font-size: 1.5em;
    line-height: 1.2em;
}
#logo h1 span {
    font-weight: bold;
    text-transform: uppercase;
}
#logo small {
    text-transform: uppercase;
    font-size: 0.85em;
}
nav ul {
    margin: 0;
    height: 100%;
    align-items: center;
    list-style-type: upper-roman;
    display: flex;
}
nav ul li {
    padding: 0 25px;
    margin: 0 5px;
    font-size: 1em;
    line-height: 4.3em;
}
nav ul a {
    color: orange;
    padding: 8px 0;
    text-decoration: none;
    text-transform: uppercase;
}
nav ul a:hover, .aktivni a {
    border-bottom: 2px solid #EF6534;
}
.kontakt-tlacitkoq {
  background: #3783AA;
  padding: 10px 20px;
  border-radius: 20px;
}
.kontakt-tlacitko:hover,
.reference-tlacitko:hover {
  filter: brightness(115%) contrast(85%);
  border: 0;
}
footer {
    box-sizing: border-box;
    text-align: center;
    height: 100px;
    color: white;
    background: #414042;
    padding: 50px 0 0 0;
    clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%);
}
#centrovac {
    margin: 0 auto;
    max-width: 960px;
}
#dovednosti td {
    width: 33%;
    padding: 10px;
    vertical-align: bottom;
    border: 1px solid gray;
}
#dovednosti {
    border-collapse: collapse;
}
#reference img {
  border: 1px solid gray;
  padding: 6px;
  box-shadow: 3px 3px 6px #36F828;
  margin-right: 6px;
}
.clanek {
  box-sizing: border-box;
  width: 100%;
  height: 200px;
  margin: 20px 0;
  padding: 15px;
  background: blue;
}

.postranni-panel {
  box-sizing: border-box;
  width: 100%;
  height: 100px;
  margin: 20px 0;
  padding: 10px;
  background: red;
}

@media screen and (min-width: 900px) {
  .clanek {
    width: 79%;
    float: left;
  }

  .postranni-panel {
    width: 19%;
    float: right;
  }
}
nav.menu {
  display: block;
  width: 100%;
  background: blue;
}
nav.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav.menu ul li {
  width: 100%;
}
nav.menu a {
  display: block;
  color: white;
  text-decoration: none;
  font-family: sans-serif;
  line-height: 2em;
  padding: 0 15px;
}
nav.menu a:hover {
  background: rgba(0, 0, 0, 0.1);
}


No, pojmenovaný to mám dobře. Ať koukám, jak koukám. A v tom .css souboru .html prvky nevidím. Tak, kde může být zakopaný pes? Ikdyž by mě teda zajmalo, jak se do toho .css souboru dostaly ty .html prvky z prostředku stránky.
Ách jo, kam si má teda člověk psát poznámky... :hm
Alesh2020
Junior
Uživatelský avatar

Odeslat příspěvekod Wikan 7. 12. 2021 18:28

No samy se tam nedostaly. Ten CSS soubor máš ve složce css?
Wikan
Moderátor
Uživatelský avatar

Odeslat příspěvekod Alesh2020 7. 12. 2021 18:30

Kód: Vybrat vše
    <link rel="stylesheet" href="[b]css/style.css[/b]" type="text/css"/>


Jo tohle. Já to považoval spíš za formalitu. A už chápu, odkud vítr vane. Spíš je zajmavý, že tu lajnu pořád a pořád kopíruju...

A k těm překlepům. Snad se mi ku*va nikdo nehrabe v kompu. :hm

Ale díky za pomoc...
Ách jo, kam si má teda člověk psát poznámky... :hm
Alesh2020
Junior
Uživatelský avatar




Kdo je online

Uživatelé procházející toto fórum: Žádní registrovaní uživatelé a 0 návštevníků