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

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

Jasně formalita. Ty koukám všechno považuješ za formalitu a za něco nepodstatného.
Wikan
Moderátor
Uživatelský avatar

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

Jde totiž o to, že plno věcí je vlastně atavismus. Např. "ů" je "památka" na to "o", co tam kdysi bylo.
Ách jo, kam si má teda člověk psát poznámky... :hm
Alesh2020
Junior
Uživatelský avatar

Předchozí stránka

Kdo je online

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