NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze – Lekce 17 - Stylování hlavičky HTML stránky a flexbox

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře
Avatar
Daniel Šup
Člen
Avatar
Odpovídá 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;
}
Editováno 21.7.2017 20:21
 
Odpovědět
21.7.2017 20:19
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

 
Odpovědět
15.10.2017 19:50
Avatar
Štěpán Halíř
Člen
Avatar
Odpovídá 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í. :-)

 
Odpovědět
15.10.2017 21:51
Avatar
Marek Jaroslav Pelíšek
Člen
Avatar
Odpovídá 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

 
Odpovědět
15.10.2017 22:18
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

 
Odpovědět
28.11.2017 22:14
Avatar
Peter Sciranka
Tvůrce
Avatar
Odpovídá 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.

Odpovědět
28.11.2017 22:35
Act as if it was Impossible to Fail
Avatar
J.F. Štreicher
Člen
Avatar
Odpovídá na Marek Jaroslav Pelíšek
J.F. Štreicher:16.12.2017 17:11

Mam ten isty problem

 
Odpovědět
16.12.2017 17:11
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá 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.

Odpovědět
16.12.2017 18:05
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;
}
Odpovědět
13.2.2018 17:50
Důležité je se nevzdávat...
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá 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.

Odpovědět
13.2.2018 18:20
TruckersMP vývojář
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 10 zpráv z 305.