Stránka 1 z 2

[CSS] podbarvení menu (L3)

Odeslat příspěvekNapsal: 7. 12. 2021 12:04
od Alesh2020
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);
}

Re: [CSS] podbarvení menu (L3)

Odeslat příspěvekNapsal: 7. 12. 2021 13:25
od Just_jo
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.

Re: [CSS] podbarvení menu (L3)

Odeslat příspěvekNapsal: 7. 12. 2021 14:25
od Alesh2020
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.

Re: [CSS] podbarvení menu (L3)

Odeslat příspěvekNapsal: 7. 12. 2021 15:02
od Wikan
Máš ten CSS soubor ve správné složce a správně pojmenovaný?

Re: [CSS] podbarvení menu (L3)

Odeslat příspěvekNapsal: 7. 12. 2021 15:18
od JirkaVejrazka
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.

Re: [CSS] podbarvení menu (L3)

Odeslat příspěvekNapsal: 7. 12. 2021 15:36
od Alesh2020
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.

Re: [CSS] podbarvení menu (L3)

Odeslat příspěvekNapsal: 7. 12. 2021 15:41
od Wikan
Tak to věříš špatně. Vážně ti "styl.css" přijde stejné jako "css/style.css"?

Re: [CSS] podbarvení menu (L3)

Odeslat příspěvekNapsal: 7. 12. 2021 15:45
od JirkaVejrazka
"Take tam muzes kliknout na odkaz na externi soubory a zkotrolovat si, ze se opravdu otevrou CSS a JS soubory, ktere cekas." - udelals to?

Re: [CSS] podbarvení menu (L3)

Odeslat příspěvekNapsal: 7. 12. 2021 15:46
od Wikan
A navíc jak na to koukám, tak v tom CSS souboru není CSS, ale opět HTML.

Re: [CSS] podbarvení menu (L3)

Odeslat příspěvekNapsal: 7. 12. 2021 15:55
od Alesh2020
https://postimg.cc/cg8pPmD5 když jsem ten soubor pojmenoval dobře, tak to stejně nepomohlo.

Re: [CSS] podbarvení menu (L3)

Odeslat příspěvekNapsal: 7. 12. 2021 15:58
od Wikan
A co obsah toho souboru?

Re: [CSS] podbarvení menu (L3)

Odeslat příspěvekNapsal: 7. 12. 2021 17:07
od Alesh2020
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ě?

Re: [CSS] podbarvení menu (L3)

Odeslat příspěvekNapsal: 7. 12. 2021 17:22
od JirkaVejrazka
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.

Re: [CSS] podbarvení menu (L3)

Odeslat příspěvekNapsal: 7. 12. 2021 17:31
od Alesh2020
Okej...

Re: [CSS] podbarvení menu (L3)

Odeslat příspěvekNapsal: 7. 12. 2021 17:32
od Wikan
Podle zadání kurzu určitě nejedeš. Takovou kravinu by tam snad nikdo nedal.