Mikuláš je tu! Získaj 90 % extra kreditov ZADARMO s promo kódom CERTIK90 pri nákupe od 1 199 kreditov. Len do nedele 7. 12. 2025! Zisti viac:
NOVINKA: Najžiadanejšie rekvalifikačné kurzy teraz s 50% zľavou + kurz AI ZADARMO. Nečakaj, táto ponuka dlho nevydrží! Zisti viac:

Diskusia – 17. diel - Štýlovanie hlavičky HTML stránky a flexbox

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre
Posledné komentáre sú na spodnej časti poslednej stránky.
Avatar
Daniel Šup
Člen
Avatar
Odpovedá na Tomáš Pokorný
Daniel Šup:21.7.2017 20:19

Ahoj,

Zarovnat hlavičku na střed můžeš vložením obsahu celé hlavičky s navigací do elementu div, který bude mít maximální šířku 960 pixelů a nastavíš mu vlastnost margin na hodnotu auto. Vzhledem k tomu, že víme, že velikost hlavičky je omezená 960 pixely, tak si můžeš dovolit nastavit maximální šířku divu, do kterého celou hlavičku vložíš. Pro lepší pochopení uvedu příklad.
Mějme hlavičku, která je v HTML zapsaná níže.

<div class="page">
<header>
<div id="logo"><h1>supdanie</h1></div>
<nav>
    <ul>
        <li class="aktivni"><a href="#">Domů</a></li>
        <li><a href="#">O mně</a></li>
        <li><a href="#">Dovednosti</a></li>
        <li><a href="#">Reference</a></li>
        <li><a href="#">Kontakt</a></li>
    </ul>
</nav>
<div class="cistic"></div>
    </header>
</div>

V tomto konkrétním případě nastylujeme div, který patří do třídy page. Pomocí CSS nastylujeme div se třídou page níže uvedeným způsobem.

.page {
    max-width: 960px;
    margin: auto;
}
Editované
Avatar
Marek Jaroslav Pelíšek
Člen
Avatar
Marek Jaroslav Pelíšek:15.10.2017 19:50

zdravíčko, mam jeden problém.
Nechce se mi zobrazit pozadí v body
css

body
{
 background: url('obrazky\pozadi\navigace.png') red;
 margin: 0px;
 font-family: impact;
 min-width: 960px;

}
Article
{
  background: url('\obrazky\pozadi\background.jpg') rgb(192,0,16)
}
Article header
{
 width: 250px;
 float: left;
}
Article section
{
 width: 710px;
 float: left;
 Background: white;
 border: 2px solid rgb(192,0,16);
 border-radius: 10px;
 box-shadow: 2px 2px 25px rgb(192,0,16);
 padding: 20px;
 width: 666px;
}
h2,h3,h4,h5,h6
{
 text-align: center;
 font-family: Lucida Console;
 color: rgb(204,255,0);
}
h1
{
 font-size: 2.5em;
 font-weight: normal;
 text-align: center;
 font-family: Lucida Console;
 color: rgb(204,255,0);
}
p
{
 text-align:center;
 font-size: 20px;
 color: rgb(102,204,51);
}
a
{
 font-size: 20px;
 text-align:center;
 color: rgb(0,0,102);
}
.cistic
{
 clear: both;
}

html

<!DOCTYPE html>
<html lang="cs-CZ">
 <head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="style.css" type="text/css" />
  <title>Rozlozeni</title>
 </head>
  <body>
  <header>
   <div id"logo"">Markusak</div>
   <nav>
    <li class="aktivny""><a href="#">Domů</a></li>
    <li><a href="#">O mně</a></li>
    <li><a href="#">Dovednosti</a></li>
    <li><a href="#">Reference</a></li>
   </nav>
  </header>
   <article>
   <header>
   <h1>O mně</h1>
   </header>

   <section>
    <p>
     Ahoj moje jmeno je Marek Jaroslav Pelíšek. Rád programuji.
     <br>Programaju v jazykách: Html + css,#C.
     <p><img src="obrazky\obrazky\pacman.png" alt="Pac Man"></p>
     <br>Už jsem naprogramoval kalkulačku.
     <br>Hodně mě to baví a chci v tom pokračovat
     <br>Zde je muj <a href="kontakt.html">kontakt</a>
    </p>
   </section>
   <div class="cistic"></div>
   </article>
  </body>




</html>

budu rád za každou radu

Avatar
Štěpán Halíř
Člen
Avatar
Odpovedá na Marek Jaroslav Pelíšek
Štěpán Halíř:15.10.2017 21:51

Ahoj,

background: url('obrazky\pozadi\navigace.png') red;
background: url('\obrazky\pozadi\background.jpg') rgb(192,0,16);

ty zapisuješ cestu k pozadí pomocí zpětného lomítko, což je špatně. Používá se běžně /. Nahraď to a mělo by to jít. Nezapomeň to upravit i v html souboru. Pokud ani tehdy nepůjde, bude zřejmě chyba ještě v cestě. Zkontroluj jestli ti sedí všechny složky, jejich názvy i seřazení. :-)

Avatar
Marek Jaroslav Pelíšek
Člen
Avatar
Odpovedá na Štěpán Halíř
Marek Jaroslav Pelíšek:15.10.2017 22:18

všechno jsem opravil, ale stejně se moje stránka zobrazuje s pozadím který je v body viz. obrázek
ctrlv

Avatar
Michal Koníček
Člen
Avatar
Michal Koníček:28.11.2017 22:14

Mohu se zeptat na to, jak se docílí toho, aby se položka po najetí myší rozsvítila například žlutě a po následném kliknutí na položku menu, zůstala "zakliknutá" ? Mohla by svítit jen žlutě... ? :D

nav.menu ul li:hover {
        background: #ffbb00;

nějaké nápady ? :) díky

Avatar
Peter Sciranka
Tvůrce
Avatar
Odpovedá na Michal Koníček
Peter Sciranka:28.11.2017 22:35

Dá sa to pomerne jednoducho pomocou javascriptu. Čo sa týka použitia len CSS bez javascriptu, tak ma napadá, že ak sa použije tak <a>, tak sa mu dá v CSS nastaviť pseudoclass ":visited" a to naštýlovať, ale jednoduchšie je použiť javasript.

Odpovedať
Act as if it was Impossible to Fail
Avatar
J.F. Štreicher
Člen
Avatar
Odpovedá na Marek Jaroslav Pelíšek
J.F. Štreicher:16.12.2017 17:11

Mam ten isty problem

Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovedá na J.F. Štreicher
Jan Lupčík:16.12.2017 18:05

Zřejmě jsou u tohohle dílu špatný soubory. Podívej se na další díly a tam najdeš už hotové a funkční webovky. :)
David Hartinger: měl bys zkontrolovat soubory u tohoto článku - na screenu a v web.zip jsou jiné webovky.

Odpovedať
TruckersMP vývojář
Avatar
Peter Butora
Člen
Avatar
Peter Butora:13.2.2018 17:50

**Čau pod textem **

Zbývá nějak domluvit položkám seznamu, aby se řadily vedle sebe a vypadaly lépe.........

Je kod kde chybí u margin za nulou px já jsem se pak divil že to ukazovalo jinak než vzor :)

nav ul li {
        float: left;
        padding: 0px 25px;
        margin: 0 5px;
        font-size: 17px;
        height: 73px;
        line-height: 4.3em;
}
Odpovedať
Důležité je se nevzdávat...
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovedá na Peter Butora
Jan Lupčík:13.2.2018 18:20

Za nulou se jednotky psát nemusí, zřejmě jsi měl pouze zacachovaný prohlížeč a při reloadu sis to promazal. Protože přeci 0px je stejně dlouhý jako 0km. :D
Máš to i ve specifikaci:

The format of a length value (denoted by <length> in this specification) is a <number> (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.

Odpovedať
TruckersMP vývojář
Posledné komentáre sú na spodnej časti poslednej stránky.
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 10 správy z 305.