Diskuze: Lekce 13 - Stylování hlavičky HTML stránky

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

Ladislav Šafránek

Člen

Ladislav Šafránek:5.12.2021 13:49

https://www.itnetwork.cz/…ani-hlavicky

Zdravím, pořád mi to "nějak ujíždí" co se týče toho banneru (červená) nahoře. A co s tím - modře označeným - "titulem"?
http://imgway.cz/s/8RrP

Děkuji...

<!DOCTYPE html>
<html lang="cs-cz">
  <head>
    <meta charset="utf-8" />
    <div id="logo">
        <h1>Křestní <span>Příjmení</span></h1>
        <small>small</small>
      </div>
    <title>Moje první webová stránka</title>
    <link rel="stylesheet" href="styl.css" type="text/css" />
  </head>

  <body>
<nav>
        <ul>
          <li class="aktivni"><a href="index.html">Domů</a></li>
          <li><a href="omne.html">O mně</a></li>
          <li><a href="dovednosti.html">Dovednosti</a></li>
          <li><a href="reference.html">Reference</a></li>
          <li><a class="kontakt-tlacitko" href="kontakt.html">Kontakt</a></li>
        </ul>
      </nav>
    <article>
      <div id="centrovac" class="domu-article">
        <header>
          <h1>O mně</h1>
        </header>
        <section>
          <p>
            Testovací text A.
          </p>

          <p>
            Dlouhý testovací text B. QWERTZUIOPqwertzuiop Kontaktovat mě můžete na
            <a href="kontakt.html">kontaktní stránce</a>.
          </p>

          <p>Testovací text C.</p>
          <p>
            Dlouhý testovací text D.
            <strong>//tučně//</strong>!
          </p>

          <h2>Dovednosti</h2>
          <p>
            Co umím, jsem sepsal na stránce
            <a href="dovednosti.html">dovednosti</a>.
          </p>
<p class="tlacitko-odstavec">
            <a href="reference.html" class="reference-tlacitko"
              >Moje reference</a
            >
          </p>
        </section>

        <img
          src="source/avatar.jpg"
          alt="Avatárek"

        />
      </div>
    </article>
<footer>
Vytvořila &copy;SHODAN pro
      <a href="https://seznam.cz">seznam.cz</a>
</footer>
  </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;
}

Odpovědět

5.12.2021 13:49

Peter Mlich

Člen

Peter Mlich:6.12.2021 7:37

Ja ti doporucuji pouzivat stylovani podle css Bootstrapu nez jako tvorit vlastni rozpadajici se reseni.

display: flex;
flex-direction: column;

Ja bych flex nepouzil na body, ale udelal si tam div. Bootstrap pouziva div.container, treba.

https://validator.w3.org/nu/#…
Html validator rika, ze mas spatne html kod. Jak se ti ocitl DIV tag v miste header? Header slouzi k nastaveni hlavicky souboru, tam tagy div, h1, script a dalsi, vubec nepatri. Ono, script tam byt muze, ale moc ti to nedoporucuji. Spis je lepsi davat vsechny script na konec stranky.

Nahoru Odpovědět

6.12.2021 7:37

Ladislav Šafránek

Člen

Ladislav Šafránek:6.12.2021 9:22

Ten kurz je postavenej na principu "napiš si sám". A mám pocit, že při nějaké závěrečném testu v rámci kurzu taky nepůjde si pomáhat pomocníčkama. To, že se to běžně dělá, že člověk nezačne od prázdné "A4" lovit něco z hlavy - stejně, jako když se kreslí v CAD, taky se nezačne od prázdného okna - mi je jasné. Bohužel...

Nahoru Odpovědět

6.12.2021 9:22

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 3 zpráv z 3.