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
Bite Rook
Člen
Avatar
Bite Rook:18.2.2018 21:13

Zdravím. Mám problém s logem. koukám do toho už docela dlouho a nemohu přijít na to, proč se mi nechce vykreslit logo. nevíte někdo, co jsem zadal špatně? jsem úplný začátečník

<!DOCTYPE html>
<html lang="cs-cz">
<head>
      <meta charset="utf-8" />
      <title> první vlastní web stránka </title>
      <link rel="stylesheet" href="C:/BiteRook/webstranka/webfirst/css-style.css" type="text/css" />
</head>

<body>

<header>

<div id="logo"></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>

</header>


<article>

<header>

<H1> O mně </h1>

</header>

<section>

<h1> název článku </h1>

<P> vítejte na mojí první stránce </p>


<img src="C:/BiteRook/webstranka/webfirst/images/logo.jpeg" alt="logo RavenGame" class="vlevo" />


<p> tak zkusíme tohle nnnnnnnnnnnn nnnnnnnnnnněěěěě ěěěěěěěěěěěě ěěěěěěěěěějjjjj jjjjjjjjjjjjjjjj aaaaaaaaaaaaa <br>
kkkkkkkkkkkk kkkkkkkkkkkkkk ýýýýýýýýýýýýýý ýýýýýýýýý oo oooooooooo oppppppppppp pppppp pppppp <br>
rrrrrrr rrrrrrrrrrrr rrrrraaaaa aaaaaaaaaaaaaa aaaaaavvvvvvvvvvvv vvvvvvvv vvvvvvvdd dddddddddddd <br>
uuuuu uuuuu  dddddddddd ddddddddddddlll lllllllllllllllllllll lllllllllllllll llllllllllllllll <br>
oooooo oooooooouuu uuuuuhý teeeeeeeeee eeeeeeeeeee eexxxxxxxxxx xxxxxxxxxxt tttttttt ttttttttttt </p>

<div class="cleaner"></div>

<p> a nějaký dodatkový text </p>

</section>
<div class="cleaner"></div>

 </article>

<footer>
Vytvořil &copy;Bite 2018
</footer>

</body>

</html>
h1 {
    text-align: center;
    color: #0000FF;  /* modrá barva, vždy zapisovat v šestnáctkové soustavě */
    }

.centrovany {
            text-align: center;
            }

article {
        background: url('C:/BiteRook/webstranka/webfirst/images/noisytexture.jpeg') #C80D0D;
        }

article header {
                width: 250px;
                float: left;
                }

article section {
                 width: 710px;   /* šířka */
                 float: left;   /* plovoucí obsah řazený z leva */
                 background: green;   /* pozadí */
                 border: 5px solid #000000;  /* tloušťka, typ a barva rámečku */
                 border-radius: 30px;   /* zakulacení rámečku */
                 padding: 20px;   /* odsazení obsahu textu od rámečku */
}

.cleaner {
          clear: both;
          }

.vlevo {
        float: left;
        }

body {
      background: url('C:/BiteRook/webstranka/webfirst/images/noisytexture2.jpeg');
      margin: 0px;  /* kolem stránky se udělá tenký rámeček. tímto ho vypneme */
      min-width:960px;
      }

header {
        height: 90px;
        }

#logo {
        background: url('C:/BiteRook/webstranka/webfirst/images/logoa.jpeg') no-repeat;
        width 60px;
        height: 60px;
        float: left;
        margin: 5px 5px 5px 5px;
        }
 
Odpovědět
18.2.2018 21:13
Avatar
Štěpán Halíř
Člen
Avatar
Odpovídá na Bite Rook
Štěpán Halíř:18.2.2018 23:47

Ahoj,
nejprve ti chci poradit – odsazuj si ty prvky v tom kódu (rodičovskej bude více vlevo), abys to měl přehledné. Zkus smazat ty mezery. Vím, že teď to třeba vypadá jako detail, ale je lepší se naučit psát přehledně do budoucna, aby ses v tom lépe orientovat. Pak to někomu ukážeš a on na to vyvalí oči.

C:/BiteRook/webstranka/webfirst/css-style.css

Používáš absolutní zápis cesty k tvému souboru. Až tu složku, ve které máš dokumenty webu nahrané, přemístíš, tak zjistíš, že se ti to najednou vše rozsype jen proto, že to máš takhle zapsané. Používej relativní zápis, jako to je použito v kurzu, tj. že se odkazuješ na soubor z určitého místa (souboru). Když to tak budeš mít, můžeš si složku s webem libovolně přesouvat z jednoho disku na druhý, vkládat do jiné složky apod.

K tvému problému.
Zkus doplnit chybějící : za width v #logo. Posílám kód, kde je doplněná.

#logo {
        background: url('C:/BiteRook/webstranka/webfirst/images/logoa.jpeg') no-repeat;
        width: 60px;
        height: 60px;
        float: left;
        margin: 5px 5px 5px 5px;
        }

Kdyby to nepomohlo, zkontroluj, jestli ti sedí cesta k tomu obrázku, popř. jeho název a koncovka.
:-)

 
Odpovědět
18.2.2018 23:47
Avatar
Bite Rook
Člen
Avatar
Odpovídá na Štěpán Halíř
Bite Rook:18.2.2018 23:55

No teda... moc děkuji. Tolik jsem se soustředil, jestli mi opět nechybí někde středník nebo uvozovka (již se mi dnes taky stalo), že jsem si dvojteček vůbec nevšímal a tudiž ji přehlédnul. S doplněnou dvojtečkou už vše funguje, jak má. Také děkuji za rady ohledně uvedené cesty k obrázku. Myslel jsem, že je naopak vhodné psát konkrétnější cestu. S tím odsazováním prvků, jen pro jistotu, předpokládám myslíš tak, jak to mám např. v oblasti HTML mezi <nav> </nav>.

 
Odpovědět
18.2.2018 23:55
Avatar
Štěpán Halíř
Člen
Avatar
Odpovídá na Bite Rook
Štěpán Halíř:19.2.2018 0:10

To jsem rád, že ti to už funguje.
Vem si to takhle. Když změníš umístění složky, ve které máš dokumenty toho webu nyní, nepůjde ti nic. Vše, kde máš nastavené cesty k nějakým stylům, obrázkům atd. už nebude aktuální. Musel bys všechny odkazy přepsat na tu aktuální cestu. Nutno dodat, že pokud bys to nahrál na internet a chtěl se tím někomu pochlubit, žádný disk C to nenajde.
Když bys to udělal tak, jako to je v tutoriálu, tak ti to říká, že obrázek na pozadí je ve složce obrazky (odkazuješ se z styl dokumentu) a i kdybys tu hlavní složku, ve které máš vše, přesunul, stále tahle cesta bude platit.

background: url('obrazky/logo.png') no-repeat;

Když tak mrkni na internet na absolutní a relativní cesty.

S tím odsazováním prvků. Je to spíše taková rada. Stejně se to pak přelouská stejně, ale minimálně pro orientaci v rozvržení toho kódu je to lepší. V tvojí ukázce jsou všechny prvky (ať je to header, div, body, html...) stejně odsazené, tj. úplně nalevo. Zkus to trošku odsazovat podle toho, jak se to člení.

<article>

<header>

<H1> O mně </h1>

</header>

<section>

<h1> název článku </h1>

<P> vítejte na mojí první stránce </p>


<img src="C:/BiteRook/webstranka/webfirst/images/logo.jpeg" alt="logo RavenGame" class="vlevo" />


<p> tak zkusíme tohle nnnnnnnnnnnn nnnnnnnnnnněěěěě ěěěěěěěěěěěě ěěěěěěěěěějjjjj jjjjjjjjjjjjjjjj aaaaaaaaaaaaa <br>
kkkkkkkkkkkk kkkkkkkkkkkkkk ýýýýýýýýýýýýýý ýýýýýýýýý oo oooooooooo oppppppppppp pppppp pppppp <br>
rrrrrrr rrrrrrrrrrrr rrrrraaaaa aaaaaaaaaaaaaa aaaaaavvvvvvvvvvvv vvvvvvvv vvvvvvvdd dddddddddddd <br>
uuuuu uuuuu  dddddddddd ddddddddddddlll lllllllllllllllllllll lllllllllllllll llllllllllllllll <br>
oooooo oooooooouuu uuuuuhý teeeeeeeeee eeeeeeeeeee eexxxxxxxxxx xxxxxxxxxxt tttttttt ttttttttttt </p>

<div class="cleaner"></div>

<p> a nějaký dodatkový text </p>

</section>
<div class="cleaner"></div>

 </article>

S odsazením:

<article>
        <header>
                <h1> O mně </h1>
        </header>
        <section>
                <h1> název článku </h1>
                <P> vítejte na mojí první stránce </p>
                <img src="C:/BiteRook/webstranka/webfirst/images/logo.jpeg" alt="logo RavenGame" class="vlevo" />
                <p> tak zkusíme tohle nnnnnnnnnnnn nnnnnnnnnnněěěěě ěěěěěěěěěěěě ěěěěěěěěěějjjjj jjjjjjjjjjjjjjjj                                                   aaaaaaaaaaaaa <br>
                kkkkkkkkkkkk kkkkkkkkkkkkkk ýýýýýýýýýýýýýý ýýýýýýýýý oo oooooooooo oppppppppppp pppppp           pppppp <br>
                rrrrrrr rrrrrrrrrrrr rrrrraaaaa aaaaaaaaaaaaaa aaaaaavvvvvvvvvvvv vvvvvvvv vvvvvvvdd dddddddddddd <br>
                uuuuu uuuuu  dddddddddd ddddddddddddlll lllllllllllllllllllll lllllllllllllll llllllllllllllll <br>
                oooooo oooooooouuu uuuuuhý teeeeeeeeee eeeeeeeeeee eexxxxxxxxxx xxxxxxxxxxt tttttttt ttttttttttt
                </p>
                <div class="cleaner"></div>
                <p> a nějaký dodatkový text </p>
        </section>
        <div class="cleaner"></div>
</article>

Hodně štěstí :)

 
Odpovědět
19.2.2018 0:10
Avatar
Kamil Maděra
Člen
Avatar
Kamil Maděra:24.2.2018 16:08

Mám problém s vložením loga, jak ho můžu vložit z nějaké webové stránky?

 
Odpovědět
24.2.2018 16:08
Avatar
Jaroslav Patrný
Člen
Avatar
Odpovídá na Michal Koníček
Jaroslav Patrný:28.7.2018 18:26

Ahoj, pokud tvúj dotaz trvá, nastav třídu (např. "aktivni") jednotlivým položkám menu vždy u vybrané podstránky. "Aktivní" třídy jsem využil i u dynamického webu s využitím PHP.

 
Odpovědět
28.7.2018 18:26
Avatar
Jaroslav Patrný
Člen
Avatar
Odpovídá na Michal Koníček
Jaroslav Patrný:28.7.2018 19:33

Ještě k předešlé odpovědi: A samozřejmě tu třídu ostyluj.

 
Odpovědět
28.7.2018 19:33
Avatar
Niesomtu Hraskova
Člen
Avatar
Odpovídá na Kamil Maděra
Niesomtu Hraskova:20.11.2018 2:53

klikni na obrazok na webe pravou str. mysky-zobrazit obrazok-skopiruj url adresu a vloz to potom do css

background: url(http://www.csnd.cz/layout/csnd5.jpg);
Odpovědět
20.11.2018 2:53
Hľadám si prácu, tak mi smelo napíš mail.
Avatar
VoKo
Člen
Avatar
VoKo:11.1.2019 22:46

Ahoj, mám svůj web a když tam nahraji celou složku, tak se mi nechtějí nějaké věci zobrazit, ale když stejné soubory otevřu v počítači, tak se mi vše zobrazí :/ Neví někdo co s tím?
Scrnshty - http://prntscr.com/m614lw - snímek souboru z pc
http://prntscr.com/m614ro - snímek z webu

 
Odpovědět
11.1.2019 22:46
Avatar
Neaktivní uživatel
Člen
Avatar
Odpovídá na VoKo
Neaktivní uživatel:12.1.2019 12:52

Není problém třeba s odkazem na css soubor? Máš tam relativní, nebo absolutní cestu?

Odpovědět
12.1.2019 12:52
Neaktivní uživatelský účet
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.