Diskuze: Ne/podbarvení menu.

Ladislav Šafránek

Člen

Ladislav Šafránek:7.12.2021 10:19

Zdravím, to menu o položkách "Lorem, Accusantium, Adipisci, Aut & Eos" by mělo být podbarveno modře, ale není. V čem je problém?

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

___

@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;
}

Odpovědět

7.12.2021 10:19

Peter Mlich

Člen

Peter Mlich:7.12.2021 20:27

https://jigsaw.w3.org/css-validator/#validate_by_input

css validator stale hlasi ve tvem css 2 chyby. Muze dojit k tomu, ze zbytek stylu, pod chybou, az do konce souboru, bude ignorovan.
2.

background: blue;
background: blue !important; /*styl muzes vynutit importantem, ale radeji si jnajdi, ktery radek ti to prebiji*/

3. Pravdepodobne tam mas styl, ktery ti to prebiji.
tag je nadrazeny class
id, jak kdy, je nadrazene tagu a class
"nav.menu {" - pokud tam mas nekde nejake nav a prednim id nebo tag, tak to muze prebijet vse
4. Pokud tam mas nekde float bez display:inline-block, table, table-row, table-cell, tak se muze v zavislosti na prohlizeci nebo odrolovani ztracet barva pozadi. Takovy letity bug prohlizecu.

Pokud na nic neprijdes, muzu se ti na to zas mrknout

Nahoru Odpovědět

7.12.2021 20:27

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 2 zpráv z 2.