Aktuálně: Postihly zákazy tvou profesi? Poptávka po ajťácích prudce roste, využij halloweenské akce 80% výuky zdarma!
Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu
Python týden

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

V minulé lekci, Navigační menu, patička a HTML entity, jsme si připravili HTML kód hlavičky a patičky.

Dnes se v HTML/CSS tutoriálu budeme věnovat stylování hlavičky.

Pozadí

Hlavička a patička budou mít stejné pozadí. Opět se jedná o obrázek se šumem, který jsme si vygenerovali na http://www.noisetexturegenerator.com/. Můj obrázek vypadá takto:

Textura šumu na pozadí

Pozadí nebudeme nastavovat ani hlavičce, ani patičce, ale rovnou celému body. Důvodem je, aby byl pozadím u patičky vždy vyplněný celý zbylý prostor stránky (tedy i za patičkou, když je obsah příliš krátký a klient má vysoké rozlišení). Pokud bychom to tak neudělali, mohlo by na velkých monitorech zbýt pod patičkou bílé místo.

Pozadí tedy zapíšeme do selectoru body, kde již máme nastavení písma. Kromě obrázku určíme i barvu, proč jsme si již vysvětlovali. Body nastavíme ještě vnější okraj (margin) na 0, tím zmizí nevzhledný tenký okraj okolo celé stránky. Jako poslední nastavíme celému tělu stránky minimální šířku 960px. Jistě si pamatujete, že právě 960px je doporučená šířka pro webové stránky (pokud nepočítáme responzivní verzi, ale o tom až později). Stránka se díky specifikované minimální šířce nerozsype, když zmenšíme okno prohlížeče, ale pouze se zobrazí posuvníky.

Styl body by nyní měl vypadat asi takto:

body {
    background: url('obrazky/pozadi_sede.png') #1c2228;
    margin: 0px;
    font: 14px Verdana;
    min-width: 960px;
}

Výsledek:

Pozadí body v HTML a CSS

Hlavička

Pusťme se do stylování hlavičky. Nejprve hlavičce nastavme výšku na 73px. Výšku nastavíme prostě headeru, aplikuje se i na header v článku, ale to nás v tomto případě netrápí:

header {
    height: 73px;
}

Logo

Logo jsme vložili do HTML jako div, což je pro zopakování element určený pouze ke stylování a nemající žádný další význam. V CSS vložíme do loga obrázek tak, že ho umístíme na pozadí a vypneme opakování. Je to alternativa k vložení loga přes obrázek pomocí HTML tagu img. Výhodou je, že se s obrázkem lépe pracuje a lépe se pozicuje, když je na pozadí. Do obsahu článku se tento přístup příliš nehodí, v rozvržení je naopak užitečný.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Jako obrázek loga jsem použil tento:

Logo

Můžete si ho stáhnout nebo použít svůj. Velikost je 64x64 pixelů. Nabízí se i použití nějaké pěkné ikony, kde je hledat již víte. Ostylujme si div s ID "logo". ID selektor funguje úplně stejně, jako selektor třídní, jen nezačíná na tečku ., ale na mřížku #:

#logo {
    background: url('obrazky/logo.png') no-repeat;
    width: 250px;
    height: 60px;
    float: left;
    margin: 7px 0px 0px 20px;
}

Nastavení pozadí by mělo být jasné. Hodnotou no-repeat určujeme, že se nemá obrázek opakovat (dláždit vedle sebe, jako např. pozadí stránky).

Dále tu máme nastavení šířky a výšky divu s logem a textem.

Float určí element jako "plovoucí", což je nutné k tomu, aby mohlo být logo vedle navigace. Neplovoucí blokové elementy se řadí pod sebe. Všimněte si, že doteď bylo logo nad navigací.

Marginem určíme vnější okraj, hodnoty jsou udávány v pořadí horní, pravý, dolní, levý. Posouváme ho tedy kousek dolů a doprava.

Nyní přejdeme do HTML a text v divu logo vložíme do tagu <h1>. Je totiž vhodné, aby byl nápis v logu označen jako nadpis první úrovně. Stará specifikace HTML neumožňovala 2 nadpisy první úrovně na jedné stránce. HTML s tím od verze 5 nemá problém, pokud jsou nadpisy vloženy v headeru. I logicky je to lepší, jelikož nadpis má jak webová stránka, tak článek v ní zobrazený.

<div id="logo"><h1>HoBi</h1></div>

Aby nadpis vypadal dobře, snížíme mu horní vnější okraj, což ho posune nahoru. Posuneme ho i kousek doprava:

#logo h1 {
    margin: 14px 0px 0px 10px;
}

Naše snažení by mělo dopadnout nějak takto:

Logo stránky v HTML a CSS

Navigační menu

Zbývá nastylovat navigační menu. Nejprve seznamu v navigaci vypneme odrážky, dělá se to CSS vlastností list-style-type, k výběru máme následující hodnoty:

  • circle - Kruhové
  • decimal - Číslované
  • decimal-leading-zero - Číslované na 2 místa (před čísla menší než 10 přidá nulu)
  • disc (výchozí) - Vyplněný kruh
  • lower-alpha - Malá písmena latinské abecedy
  • lower-greek - Malá písmena řecké abecedy
  • lower-latin - Malá písmena latinské abecedy
  • lower-roman - Římské číslice malými písmeny
  • none - Bez odrážek
  • square - Čtvercové
  • upper-alpha - Velká písmena latinské abecedy
  • upper-greek - Velká písmena řecké abecedy
  • upper-latin - Velká písmena latinské abecedy
  • upper-roman - Řecké číslice velkými písmeny
  • inherit - Zdědí typ odrážek od rodičovského elementu.

Jak různé typy vypadají máte jako vždy ukázáno v českém CSS 3 manuálu. Nás bude nyní zajímat hodnota none, která odrážky vypne.

Nastavme tedy tento styl danému seznamu a zároveň mu vypněme vnější okraje (tím zmizí volné místo nahoře):

nav ul {
    margin: 0px;
    list-style-type: none;
}

Zbývá nějak domluvit položkám seznamu, aby se řadily vedle sebe a vypadaly lépe. Asi tušíte, že řazení docílíme pomocí vlastnosti float s hodnotou left. Dále to bude jen o nastavování okrajů, fontu a barvy.

nav ul li {
    float: left;
    padding: 0px 25px;
    margin: 0 5px;
    font-size: 17px;
    height: 73px;
    line-height: 4.3em;
}

Nová je pro nás jen poslední vlastnost line-height. Vzpomínáte si, jak jsme si říkali, že centrování je v CSS řešeno poněkud nešťastně? Line-height nastaví výšku řádku a lze pomocí ní centrovat text svisle v nějakém elementu. V našem případě budou popisky tlačítek ve středu.

Odkazy nebudeme chtít modré, ale bílé. Obarvit je není nic těžkého, jak vypnout podtržení již také víme:

nav a {
    color: white;
    text-decoration: none;
}

Zbývá ostylovat aktivní položku a položku, na kterou najedeme myší. Styl budou mít stejný, v selectoru využijeme parametru :hover:

nav ul li:hover, .aktivni {
    background: #ffbb00;
    box-shadow: 0px 0px 5px black;
}

Výsledek vypadá takto:

Navigační menu v HTML a CSS

Jako vždy je projekt ke stažení v příloze.

V následujícím cvičení, Řešené úlohy k 12.-13. lekci HTML a CSS, si procvičíme nabyté zkušenosti z předchozích lekcí.


 

Stáhnout

Staženo 5289x (85.81 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Navigační menu, patička a HTML entity
Všechny články v sekci
Webové stránky krok za krokem
Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
59 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn university Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (5)

 

 

Komentáře

Avatar
japo01
Člen
Avatar
japo01:23.6.2013 7:46

Mám pocit, že by se na stránce neměl opakovat nadpis h1, jinak bude kód nevalidní. Ale pokud je to nevyhnutelné a vykreslení je správné nejspíše to nevadí.

 
Odpovědět
23.6.2013 7:46
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na japo01
Honza Bittner:23.6.2013 8:36

Chyba, v HTML5 můžeš mít více nadpisů h1, dělí se to poté na hlavní nadpis stránky a dále na nadpisy různých divů, articlů atp.

Odpovědět
23.6.2013 8:36
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Kit
Redaktor
Avatar
Odpovídá na japo01
Kit:23.6.2013 8:52

V HTML5 může mít každý (libovolně vnořený) blok vlastní "h1".

Odpovědět
23.6.2013 8:52
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
japo01
Člen
Avatar
Odpovídá na Kit
japo01:23.6.2013 11:46

Děkuji za informaci o vnoření. Dále bych připsal k nav a {display: block;}

Editováno 23.6.2013 11:48
 
Odpovědět
23.6.2013 11:46
Avatar
United121CZ
Člen
Avatar
United121CZ:10.8.2013 23:25

Ten soubor co tady máš ke stažení mi nepřijde že patří k tomuto článku (vypadá to že jsi sem zkopíroval zdrojáky z některého z minulých článků)

 
Odpovědět
10.8.2013 23:25
Avatar
relycanx
Člen
Avatar
relycanx:14.9.2013 11:37

přesně jak říká United121CZ - bylo by moc fajn, kdybyste tu měli krom aktuálního css souboru i aktualizované html ke stažení :) každopádně to je jinak mrtě fajn tutorial

 
Odpovědět
14.9.2013 11:37
Avatar
josef133
Člen
Avatar
josef133:20.11.2013 21:16

Ahoj, vrtá mi hlavou jedna věc. Proč se logo nastavuje jako pozadí divu? Proč nedat logo do tagu img a ten napozicovat?

 
Odpovědět
20.11.2013 21:16
Avatar
Odpovídá na josef133
Michal Žůrek - misaz:20.11.2013 21:19

tak ono je to celkem fuk jak to uděláš. Jediná výhoda divu je, že si tam pak můžeš snadno dopsat slogan.

 
Odpovědět
20.11.2013 21:19
Avatar
Zdeněk Bauer
Redaktor
Avatar
Zdeněk Bauer:20.11.2013 21:21

Je to tak hezčí, jak ze strany kódu, tak i ze strany použití.
Když potom uživatel přijde, tak to nemůže posouvat, nemůže kliknout pravým a dát "Otevřít obrázek na nové kartě" atd...

//Aha, Misaz byl rychlejší a měl i inteligentnější vysvětlení :)

Editováno 20.11.2013 21:22
 
Odpovědět
20.11.2013 21:21
Avatar
josef133
Člen
Avatar
josef133:20.11.2013 21:26

Díky zdenda204, tyhle věci mě nenapadly.

 
Odpovědět
20.11.2013 21:26
Avatar
plugmansk
Člen
Avatar
plugmansk:26.11.2013 18:59

Dobrý večer,
Chcem sa spýtať ako spraviť sub-menu v hlavnom menu!
Ďakujem za odpoveď 8|

Editováno 26.11.2013 18:59
 
Odpovědět
26.11.2013 18:59
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na plugmansk
David Čápka:26.11.2013 19:07

Do LI vložíš další UL.

Odpovědět
26.11.2013 19:07
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
plugmansk
Člen
Avatar
Odpovídá na David Čápka
plugmansk:29.11.2013 19:27

Mohol by si spraviť aj tutorial ako spraviť rolovacie menu ?!

 
Odpovědět
29.11.2013 19:27
Avatar
Ondri
Člen
Avatar
Ondri:4.1.2014 7:30

Ďakujem za pekný seriál o tvorbe web stránok :). Ale trápi ma jedna vec. Ako sústredím odkaz tlačítka v navigácií na jeho celú plochu a nie len na text ?

Vďaka za odpoveď :)

 
Odpovědět
4.1.2014 7:30
Avatar
David Hynek
Redaktor
Avatar
Odpovídá na Ondri
David Hynek:4.1.2014 8:34

snad se teď po ránu nepletu, ale k tomu stylování u odkazu (a) přidejte vlastnost display: block klikatelná ploha by se měla rozšířit do povolené plochy prvku li.

Odpovědět
4.1.2014 8:34
Čím víc vím, tím víc věcí nevím.
Avatar
antonin.stribrny:5.1.2014 14:52

Zdravím všechny,

mám dotaz, nějak se mi nedaří oddělit hlavičku od zbytku stránky, když změním pozadí hlavičky, změní se pozadí celého body. Prosím o radu kde dělám chybu?

 
Odpovědět
5.1.2014 14:52
Avatar
Peco
Člen
Avatar
Odpovídá na antonin.stribrny
Peco:5.1.2014 14:54

skus poslať zdrojáky

Odpovědět
5.1.2014 14:54
Každý deň vstávam, aby som sa niečo nové naučil.
Avatar
Juraj Mlich
Redaktor
Avatar
Odpovídá na antonin.stribrny
Juraj Mlich:5.1.2014 14:54

Bez zdrojového kódu ti toho moc neporadíme :)

 
Odpovědět
5.1.2014 14:54
Avatar
Kit
Redaktor
Avatar
Odpovídá na antonin.stribrny
Kit:5.1.2014 15:06

Hlavička HTML se nezobrazuje a proto se ani nijak nestyluje.

Odpovědět
5.1.2014 15:06
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Peco
Člen
Avatar
Odpovídá na Kit
Peco:5.1.2014 19:14

silne predpokladám, že myslel hlavičku z tutoriálu, čiže tú kde je menu.;) netreba sa chytať za slovíčka :P

Odpovědět
5.1.2014 19:14
Každý deň vstávam, aby som sa niečo nové naučil.
Avatar
Odpovídá na Peco
antonin.stribrny:6.1.2014 23:11

Ano předpokládáš velmi dobře :-) no ale chybu jsem již díky staženým tutoriálům našel. Chyba byla v tom že jsem strčil article a article section pod jedno. děkuji všem z pomoc. přeji všem krásný večer:-)

 
Odpovědět
6.1.2014 23:11
Avatar
Hiridus
Člen
Avatar
Hiridus:2.2.2014 16:43

Ahoj, mám problém: nevím, proč mi velikost šířky loga ovlivňuje umístění hlavičky článku. Tzn.: Mám velikost šířky loga 250px, ale hlavička článku (article header) se mi posune také o 250px doprava. Nevíte co s tím? Nakonec mi z toho vznikne nadpis někde uprostřed stránky a ne vedle textu. Viz zde http://prntscr.com/2ov5sd

Odpovědět
2.2.2014 16:43
Chyba Androidu je v Javě, chyba Linuxu v ovladačích, chyba Windows je ve Windows
Avatar
Odpovídá na Hiridus
Neaktivní uživatel:2.2.2014 17:05

Protože je logo vyšší než hlavička a přesahuje přes její spodní hranu. Zmenši výšku loga / zvětši výšku hlavičky.

Odpovědět
2.2.2014 17:05
Neaktivní uživatelský účet
Avatar
Hiridus
Člen
Avatar
Odpovídá na Neaktivní uživatel
Hiridus:2.2.2014 18:07

Díky. Už se mi to s tím neposunuje, ale pořád je to nad tím a ne vedle toho. Já na to snad někdy přijdu.

Odpovědět
2.2.2014 18:07
Chyba Androidu je v Javě, chyba Linuxu v ovladačích, chyba Windows je ve Windows
Avatar
Odpovídá na Hiridus
Neaktivní uživatel:2.2.2014 18:17

Teď nevím, co bys rád.

Odpovědět
2.2.2014 18:17
Neaktivní uživatelský účet
Avatar
Hiridus
Člen
Avatar
Odpovídá na Neaktivní uživatel
Hiridus:2.2.2014 18:27

Už jsem to vyřešil. Díky za pomoc. Vše již funguje, jak má.

Odpovědět
2.2.2014 18:27
Chyba Androidu je v Javě, chyba Linuxu v ovladačích, chyba Windows je ve Windows
Avatar
Michal Kučera:10.3.2014 20:49

nav a {
color: white;
text-decoration: none;
}

-> Pořádně nevím proč je tam nav a
Proč tam je zrovna a??

Odpovědět
10.3.2014 20:49
Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.
Avatar
Ondřej Štorc
Redaktor
Avatar
Odpovídá na Michal Kučera
Ondřej Štorc:10.3.2014 21:21

To a je tag. Takže toto pravidlo vlastně znamená že odkaz/y který patří tagu nav bude mít tyto pravidla.. Snad jsem ti to vysvětlil dostatečně :)

Editováno 10.3.2014 21:21
Odpovědět
10.3.2014 21:21
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
Michal Kučera:11.3.2014 14:49

Ano, pochopil jsem to, děkuji.
Moje poslední otázka bude v jakém případě mám použít tag div.
Jestli víte na co se ptám. :D
Moc děkuji za odpověď. :)

Odpovědět
11.3.2014 14:49
Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.
Avatar
Michal Kučera:11.3.2014 15:49

Dobrý už to chápu.. Špatně jsem četl
div slouží k stylování..

Odpovědět
11.3.2014 15:49
Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.
Avatar
cz-ko
Člen
Avatar
cz-ko:26.3.2014 0:30

Můžu poprosit o pomoc? Přesto, že jsem to stáhla, nefunguje mi jistá část webu. Neví někdo, čím by to mohlo být? (S webem jsem nemanipulovala.)

 
Odpovědět
26.3.2014 0:30
Avatar
Odpovídá na cz-ko
Neaktivní uživatel:26.3.2014 1:25

Pokud vidím správně, tak maš složku, v ní další složku a až v ní stažené soubory. Zkus si ty stažené soubory přemístit např. na plochu do složky např. web, a pak spustím index.html

Mělo by to jít.
Nejsem si jistý, ale snad jo.

EDIT: Teď to zkouším a ono to fakt nejde.

Editováno 26.3.2014 1:27
Odpovědět
26.3.2014 1:25
Neaktivní uživatelský účet
Avatar
Michal Žůrek - misaz:26.3.2014 6:20

aha, vypadá to že je k článku přiřazený špatný soubor. Ono totiž žádná navigace, o které se v článku píše, tam ani není.

 
Odpovědět
26.3.2014 6:20
Avatar
Neaktivní uživatel:7.4.2014 18:05

Ahoj, jak udělám, že v navigaci místo textu dám obrázek? Zkoušel jsem to, že jsem ho dal na pozadí a vypnul opakování ale obrázek je delší než položka v menu a v půlce se odřízne. Nikde jsem nenašel nastavení elementu abych mohl přenastavit velikost.

Odpovědět
7.4.2014 18:05
Neaktivní uživatelský účet
Avatar
Neaktivní uživatel:7.4.2014 18:06

Ahoj, jak udělám, že v navigaci místo textu dám obrázek? Zkoušel jsem to, že jsem ho dal na pozadí a vypnul opakování ale obrázek je delší než položka v menu a v půlce se odřízne. Nikde jsem nenašel nastavení elementu abych mohl přenastavit velikost.

Odpovědět
7.4.2014 18:06
Neaktivní uživatelský účet
Avatar
 
Odpovědět
7.4.2014 18:45
Avatar
charlesvohlidka:9.5.2014 6:16

Dobrý den mám dotaz není nějaký sctript aby se nemuselo klikat pouze na text v tom menu ale třeba že by se dalo kliknout na celé to oranžové pole ? napadl mě příkaz button ale nevím jak ho zapsat do tohoto menu zvetšit ho by mělo jít přes css předpokládám na velikost oranžového obdelníku :)

Editováno 9.5.2014 6:18
 
Odpovědět
9.5.2014 6:16
Avatar
Odpovídá na charlesvohlidka
Michal Štěpánek:9.5.2014 7:48

Všechno, co máš mezi

<a href="...">...</a>

funguje jako odkaz

Editováno 9.5.2014 7:48
Odpovědět
9.5.2014 7:48
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
Jan Lupčík
Super redaktor
Avatar
Jan Lupčík:24.7.2014 14:03

Ahoj,
zkouším a zkouším, ale nějak jsem nevykoumal, jak tu patičku mít na dolním okraji stránky. Neporadíte mi někdo? Koukal jsem se na ty kódy, ale nic jsem z toho nevykoumal. :-/

Odpovědět
24.7.2014 14:03
TruckersMP vývojář
Avatar
Šimon Raichl
Redaktor
Avatar
Odpovídá na Michal Žůrek - misaz
Šimon Raichl:15.8.2014 9:09

Je v souboru rozlozeni.html

 
Odpovědět
15.8.2014 9:09
Avatar
mikuskajan
Člen
Avatar
mikuskajan:12.9.2014 13:44

Zdravim, potřebuju poradit... Nezobrazuje se mi logo vlevo nahoře... Vlastně vůbec nikde, a cestu k němu mám správnou, kontroloval jsem to hodněkrát.

 
Odpovědět
12.9.2014 13:44
Avatar
Odpovídá na mikuskajan
Tomáš Maňhal:12.9.2014 14:00

Není od věci ukázat kód ;-) Nejsme vševědoucí a nevidíme ti do adresáře webu :-)

 
Odpovědět
12.9.2014 14:00
Avatar
mikuskajan
Člen
Avatar
mikuskajan:12.9.2014 14:08

Sorry... Opraveno

 
Odpovědět
12.9.2014 14:08
Avatar
mikuskajan
Člen
Avatar
mikuskajan:12.9.2014 14:09
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html lang="cs-cz">

    <head>



            <link rel="stylesheet"
            href="C:\Documents and Settings\Lucie Ticháčková\Plocha\WEB\WEB\První stránka\css na první stránku.css"
            type="text/css">

            <meta charset="utf-8" />
            <title>Moje Portfolio</title>


    </head>



    <body>
          <header>

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

          </header>

          <article>
                  <header>
                          <h1>O mně</h1>
                  </header>

                  <section>
                          <p>Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.</p>
                          <p class="centrovany"><img src="C:\Documents and Settings\Lucie Ticháčková\Plocha\WEB\WEB\Obrázky WEB\201211131036_bkjb.jpg" alt="Logo" width="25%" /></p>
                          <p>Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT. Kontaktujte mě na <a href="Kontakt.html">Kontaktní stránce</a></p>
                          <p>Rád čtu a někdy (hlavně v létě) i sportuju.</p>
                          <div class="cistic"></div>
                          <p>Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!</p>
                  </section>
                  <div class="cistic"></div>
          </article>

          <footer>
                  Vytvořil &copy;Mike Jr. 2014 pro <a href="http://www.diakoniebroumov.org">Diakonie Broumov</a>
          </footer>

    </body>
</html>
 
Odpovědět
12.9.2014 14:09
Avatar
Odpovídá na mikuskajan
Tomáš Maňhal:12.9.2014 15:42

Ukaž nám ještě ten css soubor a NIKDY už nepojmenovávej soubory názvy s mezerami ;-)

 
Odpovědět
12.9.2014 15:42
Avatar
mikuskajan
Člen
Avatar
mikuskajan:12.9.2014 15:43
/* CSS Document */
.centrovany {text-align: center;}

body {background: url('C:\Documents and Settings\Lucie Ticháčková\Plocha\WEB\WEB\Obrázky WEB\pozadi3.png') #1c2228;
      margin: 0px;
      font: Verdana 14px
      min-width: 960px;}

h2, h3, h4, h5, h6   {text-align: center;
                          color: #0a294b;
                          font-family: Arial;
                          text-shadow: 3px 3px 7px #666666; }

h2 {font-size: 1.7em;}

article {Background: url('C:\Documents and Settings\Lucie Ticháčková\Plocha\WEB\WEB\Obrázky WEB\pozadi2.png') #009aca;}

h1 {font-size: 2em;
    font-weight: normal;
    color: white;
    text-align: center;
    text-shadow: 2px 2px 1px #0a294b;}

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

article section  {width: 666px;
                  float:left;
                  background: white;
                  border: 2px solid #006797;
                  box-shadow: 2px 2px 7px #1c2228;
                  padding: 20px;}

.cistic   {clear: both;}

.vlevo {float: left;}

header {height: 73px;}

#logo {background: url('C:\Documents and Settings\Lucie Ticháčková\Plocha\WEB\WEB\Obrázky WEB\Java.png') no repeat;
         width: 250px;
         height: 60px;
         float: left;
         margin: 7px 0px 0px 20px;}

#logo h1 {margin: 14px 0px 0px 10px;}

nav ul {margin: 0px;
        list-style-type: none;}

nav ul li   {float: left;
            padding: 0px 25px;
            margin: 0 5px;
            font-size: 17px;
            height: 73px;
            line-height: 4.3em;}

nav a {color: white;
       text-decoration: none;}

nav ul li:hover, .aktivni {background: #ffbb00;
                           box-shadow: 0px 0px 5px black;}
 
Odpovědět
12.9.2014 15:43
Avatar
mikuskajan
Člen
Avatar
mikuskajan:12.9.2014 15:45

Dobře, poučím se z toho... Děkuji. Vlastně jsem nikdy neprogramoval a ve firmě teď po mě chtějí udělat nový web aby to bylo zdarma. Vůbec nevím jak na to, tak se snažím do sebe něco nalámat. Mají mě za guru moderních technologií, jen díky tomu, že vím jak z telefonu vymazat zprávy :D

 
Odpovědět
12.9.2014 15:45
Avatar
Odpovídá na mikuskajan
Tomáš Maňhal:12.9.2014 16:06

Vypadla Ti pomlčka u no-repeat v css souboru u toho pozadí na logo...Jinak mám dotaz, ty používáš elementy HTML5, ale definuješ DOCTYPE pro starší verzi 4...proč?

 
Odpovědět
12.9.2014 16:06
Avatar
mikuskajan
Člen
Avatar
mikuskajan:12.9.2014 16:26

Vůbec netuším že něco takovýho je :D

 
Odpovědět
12.9.2014 16:26
Avatar
mikuskajan
Člen
Avatar
mikuskajan:12.9.2014 16:28

Ale furt to nejde... Pomlčka nepomohla...

 
Odpovědět
12.9.2014 16:28
Avatar
Odpovídá na mikuskajan
Tomáš Maňhal:12.9.2014 16:36

Musela, protože u mne pomohla a jiné změny jsem nedělal v tvém dosti nepřehledném kódu :-) ;-) Jen tu deklaraci na html5 a uprav si zpátky ty cesty k obrazkům ;-)

<!DOCTYPE html>

 <html lang="cs-cz">

     <head>



             <link rel="stylesheet" href="style.css" type="text/css">

             <meta charset="utf-8" />
             <title>Moje Portfolio</title>


     </head>



     <body>
           <header>

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

           </header>

           <article>
                   <header>
                           <h1>O mně</h1>
                   </header>

                   <section>
                           <p>Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.</p>
                           <p class="centrovany"><img src="C:\Documents and Settings\Lucie Ticháčková\Plocha\WEB\WEB\Obrázky WEB\201211131036_bkjb.jpg" alt="Logo" width="25%" /></p>
                           <p>Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT. Kontaktujte mě na <a href="Kontakt.html">Kontaktní stránce</a></p>
                           <p>Rád čtu a někdy (hlavně v létě) i sportuju.</p>
                           <div class="cistic"></div>
                           <p>Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!</p>
                   </section>
                   <div class="cistic"></div>
           </article>

           <footer>
                   Vytvořil &copy;Mike Jr. 2014 pro <a href="http://www.diakoniebroumov.org">Diakonie Broumov</a>
           </footer>

     </body>
 </html>
/* CSS Document */
 .centrovany {text-align: center;}

 body {background: url('pozadi3.png') #1c2228;
       margin: 0px;
       font: Verdana 14px
       min-width: 960px;}

 h2, h3, h4, h5, h6   {text-align: center;
                           color: #0a294b;
                           font-family: Arial;
                           text-shadow: 3px 3px 7px #666666; }

 h2 {font-size: 1.7em;}

 article {Background: url('pozadi2.png') #009aca;}

 h1 {font-size: 2em;
     font-weight: normal;
     color: white;
     text-align: center;
     text-shadow: 2px 2px 1px #0a294b;}

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

 article section  {width: 666px;
                   float:left;
                   background: white;
                   border: 2px solid #006797;
                   box-shadow: 2px 2px 7px #1c2228;
                   padding: 20px;}

 .cistic   {clear: both;}

 .vlevo {float: left;}

 header {height: 73px;}

 #logo {background: url('logo.png') no-repeat;
          width: 250px;
          height: 60px;
          float: left;
          margin: 7px 0px 0px 20px;}

 #logo h1 {margin: 14px 0px 0px 10px;}

 nav ul {margin: 0px;
         list-style-type: none;}

 nav ul li   {float: left;
             padding: 0px 25px;
             margin: 0 5px;
             font-size: 17px;
             height: 73px;
             line-height: 4.3em;}

 nav a {color: white;
        text-decoration: none;}

 nav ul li:hover, .aktivni {background: #ffbb00;
                            box-shadow: 0px 0px 5px black;}/* CSS Document */
Editováno 12.9.2014 16:37
 
Odpovědět
12.9.2014 16:36
Avatar
Michal Kučera:23.11.2014 9:25

Čaues lidi, nejde udělat, aby odkaz v menu nebyl jenom text, ale i celý ten obdah oranžového obdélníku kolem něho? Doufám že mě chápete :D

Odpovědět
23.11.2014 9:25
Lidé jsou jako stromy, když do nich sekáš sekerou, umřou.
Avatar
luky.b
Člen
Avatar
luky.b:3.1.2015 17:06

Lidi jaký používáte programy ?...Mě to v tom PSpadu prostě nikdy nejde dát pozadí ikdyž to přesně opíšu...musím pak dávat pozadí přímo do html ale to už neni v css a ztrácím v tom přehled..nemáte někdo tip na něco v čem to jde ? Jelikož už mi to vážně trhá nervy :D Všechno vždycky v pořádku kromě pozadí...

 
Odpovědět
3.1.2015 17:06
Avatar
Odpovídá na luky.b
Tomáš Maňhal:3.1.2015 17:14

To PSPadem určitě nebude :-D

 
Odpovědět
3.1.2015 17:14
Avatar
luky.b
Člen
Avatar
Odpovídá na Tomáš Maňhal
luky.b:3.1.2015 17:17

Ale mě vždycky jenom blbne to pozadí..napsal jsem

body {
        background: url('moje cesta') #1c2228;
        margin: 0px;
        font: 14px Verdana;
        min-width: 960px;
}

A stále nic, cestu mám v pořádku, png taky, mám totiž úplně stejný ale s jiným názvem na jinou část a ta funguje...

 
Odpovědět
3.1.2015 17:17
Avatar
luky.b
Člen
Avatar
luky.b:3.1.2015 17:18

Toto je část z CSS

article {
        background: url('C:\noisy.png');
}

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

article section {
        width: 900px;
        float: left;
        background: white;
        border: 2px solid #006797;
        box-shadow: 2px 2px 7px #1c2228;
        padding: 20px;
}

body {
      background: url('C:\black.png');
      margin: 0px;
      font: 14px Verdana;
}

ten první s article funguje, a ten druhý v body ne...
Ještě mě napadlo, mám article v body, není to ten problém ?

Editováno 3.1.2015 17:20
 
Odpovědět
3.1.2015 17:18
Avatar
Odpovídá na luky.b
Tomáš Maňhal:3.1.2015 17:22

a nepřekrývá Ti ten obrázek v article ten obrázek na pozadí? :-) Nevidím totiž, že by jsi ho měl nějak velikostně ošetřený :-)

 
Odpovědět
3.1.2015 17:22
Avatar
luky.b
Člen
Avatar
Odpovídá na Tomáš Maňhal
luky.b:3.1.2015 17:25

Nene, ten article je vlastně jenom

<article>
        <header>
                <h1>Pokus</h1>
        </header>

        <section>
                <p>Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde.</p>

                <p class="centrovany"><img src="C:\Happy.png" alt="Happy" height="100" /></p>

                <p class="centrovany">Jmenuji se Lukáš a je mi 16 let. <br />
                Rád čtu a někdy (hlavně v létě) i sportuju.<br />
                Mým koníčkem je <strong>programování</strong> a <strong>tanec</strong> !</p>
        </section>
        <div class="cistic"></div>
</article>

toto

 
Odpovědět
3.1.2015 17:25
Avatar
Odpovídá na luky.b
Tomáš Maňhal:3.1.2015 17:28

Nejlepší by bylo, kdyby jsi to přesunul někam na free hosting, ať se můžu podívat na kompletní stránky :-) Takhle opravdu chybu asi nezjistíme :-) Každopádně PSpad za to nemůže :-) Až to nahraješ někam (třeba endora) tak se ozvi ;-)

 
Odpovědět
3.1.2015 17:28
Avatar
ferror
Člen
Avatar
Odpovídá na Michal Kučera
ferror:28.1.2015 16:21

Lze to udělat tak, že změníš vlastnost zobrazení linku na blokové:

nav a {
    color: white;
    text-decoration: none;
    display: block;
}
 
Odpovědět
28.1.2015 16:21
Avatar
replikator3
Člen
Avatar
Odpovídá na luky.b
replikator3:28.1.2015 19:25

Máš CSS soubor ve stejné složce jako HTML soubor? Pokud ne, tak je možná špatná adresa obrázku. Potom totiž v HTML souboru by byla jiná adresa obrázku než v CSS souboru. Měl jsem takový problém.

 
Odpovědět
28.1.2015 19:25
Avatar
Odpovídá na luky.b
Michal Šmahel:28.1.2015 22:02

Zkus tagu body dát třídu, například body:

<body class="body">
.
.
.
</body>

Vypadá to jako kravina a není to tak dlouho, co mi to pomohlo. V CSS jen vyměníš body za .body (za tu třídu).

.body {
      background: url('C:\black.png');
      margin: 0px;
      font: 14px Verdana;
}
Odpovědět
28.1.2015 22:02
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
sahlepik
Člen
Avatar
sahlepik:29.1.2015 9:04

Když koukám na kód, tak krom použití HTML5 značek a DOCTYPE HTML 4.01 vidím ještě jeden problém a to je odkaz na obrázkové soubory, např:

<img src="C:\Documents and Settings\Lucie Ticháčková\Plocha\WEB\WEB\Obrázky WEB\201211131036_bkjb.jpg" alt="Logo" width="25%" />

Když se podívám i na další příspěvky v této diskuzi, odkazují se na soubor na lokálním disku počítače!!! (C:\...). Tohle na vzdáleném hostingu či jiném lokálním počítači nikdy nebude fungovat.

A ještě je v názvu složek diakritika...

Editováno 29.1.2015 9:06
 
Odpovědět
29.1.2015 9:04
Avatar
Odpovídá na Michal Šmahel
Michal Šmahel:29.1.2015 20:20

Tak už jsem přišel na to, proč to dělalo mně. Používal jsem v CSS podmínky přes //. Takže tohle ti nejspíš nepomůže. Kdyby se někdo z moderátorů nudil, odstraňte to, prosím.

Odpovědět
29.1.2015 20:20
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Odpovídá na sahlepik
Neaktivní uživatel:29.1.2015 20:59

Kdes to prosímtě vzal?

Odpovědět
29.1.2015 20:59
Neaktivní uživatelský účet
Avatar
sahlepik
Člen
Avatar
Odpovídá na Neaktivní uživatel
sahlepik:29.1.2015 23:33

Je to z ukázky kódu od "mikuskajan" z 12. 9. 2014. Sice mám u svého komentáře mínus, ale jistě se shodneme na tom, že odkazovat v tagu <img /> na obrázek na lokálním disku C:\ je nesmysl.

 
Odpovědět
29.1.2015 23:33
Avatar
Odpovídá na sahlepik
Neaktivní uživatel:30.1.2015 11:35

Ale tak to je kód, který potřeboval upravit a už se to i evidentně vyřešilo. Rozhodně to nebyl žádný vzorový kód, podle kterého se to má dělat.

Odpovědět
30.1.2015 11:35
Neaktivní uživatelský účet
Avatar
mkapinaj
Člen
Avatar
mkapinaj:17.2.2015 19:33

cavte ludia mam problem logo sa mi nechce zobrazit prekontroloval som si kod a nenasiel som v nom chybu >/ bol by som vdacny

Editováno 17.2.2015 19:34
 
Odpovědět
17.2.2015 19:33
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na mkapinaj
Jan Lupčík:17.2.2015 19:39

Hned jsem koukl na kód a máš tam chybu ... má tam být charset a ne chase. (hlavička). Určitě to není řešení tvého problému, ale i tak. :)

Odpovědět
17.2.2015 19:39
TruckersMP vývojář
Avatar
mkapinaj
Člen
Avatar
Odpovídá na Jan Lupčík
mkapinaj:17.2.2015 19:40

dakujem hned to zmenim :)

 
Odpovědět
17.2.2015 19:40
Avatar
mkapinaj
Člen
Avatar
Odpovídá na mkapinaj
mkapinaj:17.2.2015 19:42

oprava: vdacny za pomoc

 
Odpovědět
17.2.2015 19:42
Avatar
sahlepik
Člen
Avatar
Odpovídá na mkapinaj
sahlepik:17.2.2015 19:42

Koukal jsem na definici kaskádových stylů a podle mě je chyba v cestě k obrázkouvému souboru. Úplně na konci, tedy před názvem souboru obrázku máš najednou opačné lomítko.

navíc,v HTML kódu, kde vkládáš obrázek koala.jpg máš chybu v atributu alt, chybí ti rovnítko mezi alt a uvozovkou s textem.

 
Odpovědět
17.2.2015 19:42
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na mkapinaj
Jan Lupčík:17.2.2015 19:42

Chyba v cestě... máš

C:\Users\…

ale má být

C:/Users/…
Odpovědět
17.2.2015 19:42
TruckersMP vývojář
Avatar
sahlepik
Člen
Avatar
Odpovídá na sahlepik
sahlepik:17.2.2015 19:44

Lomítka jsem popsal opačně

Editováno 17.2.2015 19:47
 
Odpovědět
17.2.2015 19:44
Avatar
mkapinaj
Člen
Avatar
mkapinaj:17.2.2015 19:58

oprava: vdacny za pomochaha s lomitkami sa zobrazuje skoro spravne ale dvom veciam stale nerozumiem ako je mozne ze su tam opacne lomitka ked kopirujem cestu a len dopisem nazov.png? a preco mi obrazok z html fungoval ked som mal opacne zatvorky? kazdopadne DAKUJEM !! 2 hod som sa snazil najst chybu

 
Odpovědět
17.2.2015 19:58
Avatar
siskowsky
Člen
Avatar
siskowsky:3.4.2015 21:52

v styl.css mám v body už modré pozadí , když tam dám pozadí hlavičky ( šedé ) , tak se mi celé pozadí i za textem změní na šedé .. co s tím ? ..
píšu dobře to modré pozadí do body v styl.css , nebo se to píše jinam ? ..

 
Odpovědět
3.4.2015 21:52
Avatar
Tomáš123
Člen
Avatar
Odpovídá na mkapinaj
Tomáš123:3.4.2015 22:04

Windows používa opačné lomítka, preto ten problém s kopírovaním. A čo sa týka opačných zátvoriek, neviem, čo myslíš...

Odpovědět
3.4.2015 22:04
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na siskowsky
Tomáš123:3.4.2015 22:05

Ukážeš nám kód (napr. v tomto editore http://kod.djpw.cz)

Odpovědět
3.4.2015 22:05
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Lukáš Hornych
Redaktor
Avatar
Odpovídá na siskowsky
Lukáš Hornych:4.4.2015 10:00

Myslím, že se píše do article.

 
Odpovědět
4.4.2015 10:00
Avatar
Odpovídá na siskowsky
Michal Šmahel:4.4.2015 12:17

Podle rozložení stránky...
Pokud to máš pomocí HTML5, body (celé stránce) nastav modrou a header (hlavičce, zobrazené, neplést s head) dej šedou. Pokud máš u header nastavené rozměry (není roztażen na celou stránku), mělo by to fungovat.

Odpovědět
4.4.2015 12:17
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Tomáš123
Tomáš123:4.4.2015 12:36

Alebo do CSS pridaj:

html, body {height: 100%}
Odpovědět
4.4.2015 12:36
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
mkapinaj
Člen
Avatar
Odpovídá na Tomáš123
mkapinaj:23.4.2015 13:08

myslel som lomitka pomylil som sa ide o to ze jeden obrazok mi zobrazil aj s takymi lomitkami a druhy nie

 
Odpovědět
23.4.2015 13:08
Avatar
Tomáš123
Člen
Avatar
Odpovídá na mkapinaj
Tomáš123:23.4.2015 15:17

Nuž chyba bude pravdepodobne v ceste ku obrázku, nezabúdaj na to, že ak linkuješ obrázok v CSS, relatívna cesta vedie k súboru .css nie .html indexu. Ďalej si cesty manuálne prejdi a skontroluj si preklepy v slovách.

Inak, nezabudol si náhodou v druhej ceste na adresár /pozadie?

Všetky lomítka použi rovnaké, ideálne tie noromálne "/".

Absolútne cesty nie sú vhodné. Ak stránky presunieš na hosting, všetko budeš musieť prerábať... Čím skôr si začni zvykať na správne spôsoby, aby si potom nemal veľa práce s opravami.

Ak si chybu nenašiel, upresni prosím, či sa jedná o nenačítavanie obrázku v CSS alebo HTML.

HTML skrátka rešpektuje obidva druhy lomítok. Spätné by som ale nepoužíval. Ak budeš programovať napr. v PHP a zadáš tam cestu C:\neviemco, zalomí sa ti riadok. Sekvencia \n totiž zalamuje. Preto si na to radšej veľmi nezvykaj (u ciest vôbec).

Odpovědět
23.4.2015 15:17
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Mikuláš Mašek:28.5.2015 16:34

Jak? ta lištička s navigací mě skočí uplně mimo. Fakt netuším co s tím může být chybu jsem hledal, ale kde nic tu nic teda aspoň pro mě. http://kod.djpw.cz/ilnb Mrkněte na to někdo prosím. Díky

 
Odpovědět
28.5.2015 16:34
Avatar
DuchX
Člen
Avatar
Odpovídá na Mikuláš Mašek
DuchX:28.5.2015 19:52

Chybí ti tam obtékání v divu v header. Přidej levé obtékání do identifikátoru s logem nebo třídu vlevo k divu.

 
Odpovědět
28.5.2015 19:52
Avatar
 
Odpovědět
2.6.2015 14:37
Avatar
Fr
Člen
Avatar
Fr:11.6.2015 22:19

Ahoj,

poraďte prosím, jak udělat, aby mi do toho loga nelezl ten nadpis ("To bude zábava").

odkaz na prt screen:
http://prntscr.com/7fvebs

 
Odpovědět
11.6.2015 22:19
Avatar
Odpovídá na Fr
Michal Šmahel:12.6.2015 7:29

Ještě kód by pomohl. Můžeš ten nadpis odsadit marginem, ale spíš ti tam nesedí pozicování.

Odpovědět
12.6.2015 7:29
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Fr
Člen
Avatar
Odpovídá na Michal Šmahel
Fr:14.6.2015 13:27

Tady mám ten svůj kód. Snad se v tom vyznáš. http://kod.djpw.cz/osnb

 
Odpovědět
14.6.2015 13:27
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na Fr
Tonda Kozák:14.6.2015 14:44

Nastav pro #logo padding-left takový, jako je ten ninja široký. Tuhle hodnotu budeš ale ještě muset odečíst od současné šířky (width).

 
Odpovědět
14.6.2015 14:44
Avatar
Billy Jackson:7.1.2016 14:22

ahoj mam problem.. moje stranka vypada takto

http://prntscr.com/9n4ze2

zde pises toto

http://prntscr.com/9n4znq

jenze ja uz u body tehle atribut mam neak nastaven z tvych predchozich tutorialu
http://prntscr.com/9n5050

takhle vypada html soubor
http://prntscr.com/9n50bf

muzes mi prosim vysvetlit kde mam chybu? sam na to asi neprijdu.. mozna je to tim ze je pred vyplatou a ja si nemoh dobit ten ucet abych si koupil ty procvicovaci lekce ale hned o vyplate to udelam.. prosim pomoz mi..

 
Odpovědět
7.1.2016 14:22
Avatar
Petr Čech
Redaktor
Avatar
Odpovídá na Billy Jackson
Petr Čech:7.1.2016 15:17

Tak to prostě přepiš, ne? Pokud to nebude fungovat, tak sem dej HTML a CSS kód jako text Máme tu na to tlačítko </>. Nikdy neposílej kód jako text, špatně se s tím pracuje.

Odpovědět
7.1.2016 15:17
the cake is a lie
Avatar
adder
Člen
Avatar
Odpovídá na Billy Jackson
adder:7.1.2016 16:02

zkus přepsat ten

<div class="clear"> -> <div class="clear"></div>
Odpovědět
7.1.2016 16:02
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Billy Jackson:7.1.2016 16:50

prepsal jsem to a dela mi to to samy.. neco mi tam unika nebo nakou jedinou vec delam tak jak nemam a nevim o tom

poprve jsem si dost veci delal spis podle sebe ale tentokrat jsem se snazil vetsinu delat podle tutorialu.. takhle vypada kod kdyz sem ho prepsal a narazil na ten samy problem..

body
  {font-family: verdana; font-size: 14px; #1e0ffa; background:
  url('img/background/default.png'); min-width: 960px}
h1
  {text-align: center; color: #0a294b; font-family:Arial; font-size: 1.7em;
  text-shadow: 3px 3px 7px #666666}
h2
  {text-align: center; color: #0a294b; font-family:Arial; font-size: 1.4em;
  text-shadow: 3px 3px 7px #666666}
.center
  {text-align: center;}
.clear
  {clear: both;}
.left
  {float: left;}
article header
  {width: 250px; float: left; background: }
article section
  {width: 666px; float: left; border-radius: 8px;
  box-shadow: 2px 2px 7px #1c2228; background: white; padding: 20px;}

stranka ma cele pozadi zbarveno na svetle modrou s tim sumem tak jak to melo byt jenze kdyz udelam to co se pise v tomto clanku a zmenim v body background na tu tmavsi modrofialovou ci co to je za barvu tak se mi to do fialove zmeni cele ne? zkusil sem to a logicky se to stalo

dale sem zkousel v css udelat novou tridu s timto pozadim a pripojit k ni tag

<nav>

ale to vypadalo uplne jinak nez na obrazku v tutorialu a bylo to opravdu osklive.. pozadi bylo jen pod pismem..

nic dalsiho me nenapadlo

to je moje prepsane html

<!DOCTYPE html>
<html lang="cs-CZ">
  <Head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css" type="text/css" />
    <title>Můj první web</title>
  </head>
  <body>
    <nav>
      <ol>
        <li><a href="index.html" class="active">Hlavní stránka</a>
        <li><a href="dovednosti.html">Dovednosti</a>
        <li><a href="kontakt.html">Kontakt</a>
      </ol>
    </nav>
    <h1 class="center">Můj první web</h1>
    <article>
      <header>
        <h2>O mě</h2>
      </header>
      <section>
        <img src="img/index/avatar.png">
        <p>Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde..</p>
        <p>Jmenuji se Billy Jackson, je mi 24let a zajímám se o IT a informatiku a proto se snažím naučit psát html..</p>
        <p>Časem bych se chtěl naučit i programovat..</p>
        <p>Mám rád hudbu a vše okolo počítačů.. zejména mě láká programování.. nepohrdnu ale ani hraním PC her..</p>
      </section>
    </article>
  </body>
</html>
 
Odpovědět
7.1.2016 16:50
Avatar
Odpovídá na adder
Billy Jackson:7.1.2016 16:55

addere to je jen ukonceni obtekani textu ne? nemelo by to mit co delat s pozadim.. ale dopisu to tam :) asi to tam ma byt

 
Odpovědět
7.1.2016 16:55
Avatar
Billy Jackson:7.1.2016 17:14

omlouvam se uploadoval jsem stare css.. toto je prepsane

body
  {font-family: Verdana; font-size: 14px; #1e0ffa; background:
  url('img/background/default.png'); min-width: 960px;
  text-shadow: 3px 3px 7px #1e0ffa}
h1
  {text-align: center; color: #0a294b; font-family:Arial; font-size: 1.7em;
  text-shadow: 3px 3px 7px #666666}
h2
  {text-align: center; color: #0a294b; font-family:Arial; font-size: 1.4em;
  text-shadow: 3px 3px 7px #666666}
.center
  {text-align: center;}
.clear
  {clear: both;}
article header
  {width: 250px; float: left;}
article section
  {width: 666px; float: left; border-radius: 8px;
  box-shadow: 2px 2px 7px #1c2228; background: white; padding: 18px;}
 
Odpovědět
7.1.2016 17:14
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
adder
Člen
Avatar
adder:7.1.2016 19:30

No stím už se dá pracovat lépe. Jasně. :) Nejde ti to, protože ten obsah, ve kterém to je, nemá nastavený background. Takže article, nebo to celý obal do nějakého div a nastav tomu barvu.

A ten

<div class="clear"></div>

tam je velice důležitý, jelikož když floatuje (tzv. poživáš float: left, right;), tak se rodivčovskému se vynuluje výška. To se nesmí stát, jelikož to narušuje layout, takže bezprostředně za elementama, které mají atribut float, přidáš asi nejhorší, ale dostačujicí řešení clear. Sám mám taky trochu meze v znalostech, proč to tak vůbec je. :)

A jen pro příště, ukončuj každou specifikaci ve stylech středníkem a nenechávej prázdné vlasnosti a ještě k tomu bez středníku viz.

background:

Snad by mě stačit tohle řešení: https://jsfiddle.net/svakaLw4/1/

Odpovědět
7.1.2016 19:30
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na adder
Tomáš123:8.1.2016 13:09

Hodnoty výšky nie sú vlastnosťou float priamo ovplyvnené. Dochádza k tomu iba následkom vyňatia floatovaného prvku z toku dokumentu. Teda po floatovaní bez explicitnej zmeny ostane u rodičovského prvku height: auto, nie height: 0.

Prázdny prvok by som nenazýval najhorším, ale najmenej elegantným riešením. Sčasti prekračuje stanovenú hranicu medzi HTML a CSS. Hoci by ostatné riešenia (teraz mi napadá iba zmena hodnoty overflowu a clearfix cez :after) vo väčšine prípadov nerobili problémy, prázdny prvok považujem za najspoľahlivejší. Nepamätám si presne, v čom malo riešenie s overflowom nedostatky, ale zdá sa mi, že to malo čosi so staršími Explorermi. Určite na to bol nejaký hack.

Odpovědět
8.1.2016 13:09
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
adder
Člen
Avatar
Odpovídá na Tomáš123
adder:8.1.2016 14:38

Děkuji za objasnění. Ano, máš pravdu, nejméně elegantní. Jen pro info používám tenhle clerfix - http://nicolasgallagher.com/…earfix-hack/.

Měj se, ještě jednou děkuji. ;)

Odpovědět
8.1.2016 14:38
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
lx
Člen
Avatar
lx:22.1.2016 23:02

Jak udělat aby fungoval jako odkaz celý obdélník (v menu) a nemusel jsem se trefovat přímo na ten text? Díky :D

 
Odpovědět
22.1.2016 23:02
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na lx
Tonda Kozák:23.1.2016 18:31

Nastav odkazu display: block (nebo inline-block) a rozměry podle rodiče (toho celého obdélníku).

 
Odpovědět
23.1.2016 18:31
Avatar
Patrik Bednář:17.4.2016 16:30

Můžu mít dotaz? Proč je na obrázku v návodu v layoutu navigace jako je Domů,Kontakt,Re­ference apod. podbarvené modře? Já to třeba nemám.. Mám pouze Domů..

 
Odpovědět
17.4.2016 16:30
Avatar
Odpovídá na Patrik Bednář
Filip Oborník:17.4.2016 18:16

Nevím, jestli tě chápu dobře, ale pokud myslíš ten modrý text v navigaci (první obrázek), tak ten se takto zbarví, pokud je to odkaz. Nemáš náhodou jako odkaz nastaveno jen to Domů?

Odpovědět
17.4.2016 18:16
"Good judgment comes from experience, and a lot of that comes from bad judgment." Will Rogers
Avatar
Odpovídá na Filip Oborník
Patrik Bednář:19.4.2016 10:07

Odkaz pomocí # ?

 
Odpovědět
19.4.2016 10:07
Avatar
Odpovídá na Patrik Bednář
Filip Oborník:19.4.2016 10:40

Ono můžeš odkazovat i na jednotlivé elementy, které mají ID. A s tim souvisí ten #. Použití je stejné jako v CSS. Tak když styluješ nějaký element s ID, tak taky použiješ #ID. Tady je to ale proto, aby ti to text zvýraznilo, jako že je to odkaz, i když to nikam nevede.

Odpovědět
19.4.2016 10:40
"Good judgment comes from experience, and a lot of that comes from bad judgment." Will Rogers
Avatar
Filip Válek
Člen
Avatar
Filip Válek:7.5.2016 16:32

Ahoj všem,

rád bych se zeptat jak dosáhnu toho,abych vytvořil navigační menu v artiklu v sekci header? Tj. rád bych si přidal odkazy pěkně pod sebou v té modré části "O mě", ale zároveň bych chtěl nechat i ty odkazy jak jsou zde uvedené. Jediné co mě napadlo je použití tagu <aside>...

Díky

 
Odpovědět
7.5.2016 16:32
Avatar
hankablack
Člen
Avatar
hankablack:29.12.2016 16:02

Ahoj, nastavila jsem si background k body ten obrázek se šumem, ale nereagovalo mi to. Pak jsem ještě přidala ten náhradní kód pro barvu a v tu chvíli mi začal fungovat na pozadí ten obrázek. Může mi někdo vysvětlit proč to tak je? Musím vždy zadat ještě 'pojistku' aby mi fungovalo to původní pozadí?

 
Odpovědět
29.12.2016 16:02
Avatar
jakubho
Člen
Avatar
Odpovídá na hankablack
jakubho:29.12.2016 16:25

Samozřejmě ta pojistka není povinná. Pravděpodobně jsi přepsala ještě něco - nechyběl ti třeba předtím středník? :)

Odpovědět
29.12.2016 16:25
Chyba-Jediná jistota v životě programátora.
Avatar
hankablack
Člen
Avatar
Odpovídá na jakubho
hankablack:29.12.2016 21:29

právě že mi to taky odporuje logice, že by to tak muselo být :-)
No já tam předtím zkoušela i kopírovat zadání na background, který jsem měla nastavený u article (tam mi funguje) a ani po zkopírování mi to nereagovalo. A teď když na to koukám, tak když u pozadí article smažu tu barvu - pojistku, tak mi to tady nereaguje na ten obrázek, který jsem nastavila, ale vloží mi to pozadí pro body.

 
Odpovědět
29.12.2016 21:29
Avatar
Odpovídá na hankablack
Jiří Gavenda:29.12.2016 21:45

Zkoušel jsem to a funguje to bez problému i bez té "pojistky". Nemáš tam opravdu někde chybu? Pošli sem ten kód.

Odpovědět
29.12.2016 21:45
"Kdybychom byli bez chyb, nezpůsobilo by nám takovou radost odhalovat chyby druhých. " - Francois de la Roc...
Avatar
hankablack
Člen
Avatar
Odpovídá na Jiří Gavenda
hankablack:29.12.2016 23:24
h1,h2,h3,h4,h5,h6
{
    text-align: center;
    color:#870089;
    font-family: Verdana;
    text-shadow: 13px 8px 5px #ea1555;
}

h2{
       font-size: 1.7em;
}

.centrovany{
    text-align: center;
}

body{
    font-family: Verdana;
    font-size: 14px;
    background: url('obrazky/pozadi_2.png') #f27a01;
    margin: 0px;
    min-width: 960px;
 }

 header{
     height: 73px;
 }

 #logo{
     background: url('obrazky/logo.png') no-repeat;
     width: 250px;
     height: 65px;
     float: left;
     margin: 20px 0px 0px 20px;
 }

 #logo h1{
     margin: 20px 0px 0px 10px;
 }

 nav ul{
     margin: 5px 0px 0px 0px;
     list-style-type: none;
 }

 nav ul li{
     float: left;
     padding: 0px 25px;
     margin: 10px 5px;
     font-size: 17px;
     height: 73px;
     line-height: 4.3em;
 }

 nav a {
     color: white;
     text-decoration: none;
 }

 nav ul li:hover, .aktivni{
     background: #f2fa01;
     box-shadow: 0px 0px 5px black;
     color: #070000;
 }

  article{
 background: url('obrazky/pozadi.png') #15c452;
 margin: 30px 0px 0px 0px;
 }

 article header{
     width: 250px;
     float: left;
     background: url('obrazky/pozadi.png') #15c452;
 }

 article section{
     width: 706px;
     float: left;
     background: white;
     border: solid #a40094 2px;
 }

 .cistic{
     clear:both;
 }

 .vlevo{
     float: left;
 }
 
Odpovědět
29.12.2016 23:24
Avatar
Odpovídá na hankablack
Jiří Gavenda:30.12.2016 13:08

Zvláštní, myslím, že by to mělo fungovat bez problému a to bez ohledu na to, jestli tam tu barvu máš, nebo ne. A myslím, že nemusíš mít nastavené pozadí pro article header, pokud je stejné, jako pro article.

Odpovědět
30.12.2016 13:08
"Kdybychom byli bez chyb, nezpůsobilo by nám takovou radost odhalovat chyby druhých. " - Francois de la Roc...
Avatar
hankablack
Člen
Avatar
hankablack:30.12.2016 16:37

No taky mě to zaráží, že to nejede bez té pojistky.
JJ, díky :-) Zkoušela jsem si v article header nastavovat jiné pozadí a pak jsem to nevymazala ale přepsala na stejné jako u zbytku.

 
Odpovědět
30.12.2016 16:37
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na hankablack
Jan Lupčík:30.12.2016 16:52

Ta funkce funguje bez pojistky. Používáš doctype v HTML dokumentu? Nemáš nějaký zastaralý prohlížeč? A obnovuj si vždy cache, když něco napíšeš do CSS, aby tohle nebyl problém.

Editováno 30.12.2016 16:52
Odpovědět
30.12.2016 16:52
TruckersMP vývojář
Avatar
Tomas Kala
Člen
Avatar
Tomas Kala:1.1.2017 21:08

Zdravím, mohli byste mi někdo prosím poradit? Po vložení "odkazu" na daný obrázek mi vyskočí chyba"Expected RBRACE"

#logo {
        background: url(2.png) no-repeat;
        width: 250px;
        height: 60px;
        float: left;
        margin: 7px 0px 0px 20px;
 
Odpovědět
1.1.2017 21:08
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na Tomas Kala
Jan Lupčík:1.1.2017 22:16
  1. Nechybí ti } na konci?
  2. Zkus dát tu URL na obrázek do uvozovek.
Odpovědět
1.1.2017 22:16
TruckersMP vývojář
Avatar
hankablack
Člen
Avatar
Odpovídá na Jan Lupčík
hankablack:2.1.2017 14:03

Doctype používám, cache obnovuji. Stáhla jsem si nejnovější verzi mozily, když to zadám bez pojistky, tak se mi tam zobrazí jen ten šum, ale ta barva, která tam má být také, tak ta chybí.

 
Odpovědět
2.1.2017 14:03
Avatar
Tomas Kala
Člen
Avatar
Odpovídá na Jan Lupčík
Tomas Kala:2.1.2017 22:50

díky, to s uvozovkama pomohlo :)

 
Odpovědět
2.1.2017 22:50
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na hankablack
Jan Lupčík:3.1.2017 6:31

Pojistka se zobrazí, když obrázek nefunguje. Ten se ti ale v pohodě načte. Funguje to teda jak má, co potřebuješ?

Odpovědět
3.1.2017 6:31
TruckersMP vývojář
Avatar
hankablack
Člen
Avatar
hankablack:3.1.2017 19:46

Právě že nefunguje. Když nedám pojistku, tak se nezobrazí ten barevný obrázek se šumem, ale nereaguje to. Ale stáhla jsem novou verzi prohlížeče a v něm se mi bez pojistky zobrazí jen šum na bílém pozadí. Takže je tedy problém prohlížeč a kód mám dobře. Díky za pomoc.

 
Odpovědět
3.1.2017 19:46
Avatar
Ondřej Rejmont:12.1.2017 19:31

Stalo se mi to, že když jsem tam chtěl vložit tu šedou barvu do té hlavičky a patičky, taky se mi to celé obarvilo na šedou a zmizela mi modrá (v mém případě zelená) barva pozadí. Poté, co jsem si stáhl šablonu, tak jsem si všimnul toho, že je to pozadí napsáno v article {
background: url('obrazky/po­zadi.png') #48FF00;
}
Já to měl ale v "body". Chci se zeptat, jestli je to tím a proč tomu tak bylo. Předem děkuji za odpověď.

 
Odpovědět
12.1.2017 19:31
Avatar
Odpovídá na Ondřej Rejmont
Daniel Miarka:4.2.2017 10:37

zkus poslat zdroják, moc jsme tě nepochopil.

 
Odpovědět
4.2.2017 10:37
Avatar
Lazar Slavković-Raco:9.3.2017 15:10

Zdravim me z nejakeho duvodu nefunguje pozadi jak je udelane v tomhle navodu.
Zdrojak zde:

body{
    margin: 0;
    padding: 0;

    background: url('Pictures/pozadi.png');
}

h1{
    font-size: 2em;
    font-weight: normal;
    color: white;
    text-align: center;
    text-shadow: 2px 2px 3px #0a294b;
}

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

article section{
    width:666px;
    padding: 20px;
    float: left;
    background: white;
    border: 2px dotted black;
    border-radius: 10px;
    box-shadow: 2px 2px 7px #1c2228;
}

.cistic{
    clear: both;
}

.vlevo{
    float: left;
}

p{
    font-family: "Arial Narrow";
    font-size: 1.2em;
    font-weight: normal;
}

footer{
    text-shadow: 2px 2px 3px white;
    color: black;
    font-family: "Arial Narrow";
    font-weight: normal;
}

.fx1{
    background: url("Pictures/pozadi2.png");
}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="styl.css" type="text/css">
        <title>Porfolio</title>
    </head>

    <body>
    <header>
        <div id="logo">Hobi</div>
        <nav>
            <ul class="fx1">
                <li class="aktivni"><a href="#">Domu</a></li>
                <li><a href="#">O mne</a></li>
                <li><a href="#">Dovednosti</a></li>
                <li><a href="#">Reference</a></li>
                <li><a href="#">Kontakt</a></li>

            </ul>
        </nav>

    </header>
        <article>
            <div>
            <header>
                <h1>About me</h1>
            </header>
            </div>
            <section>
                <p>Welcome on my first page XD</p>
                <p class="centrovany"><img src="Pictures/avatar.png" alt="Programator Boby" class="vlevo" style="border-radius: 500px"/>
                    Jmenuji se Honza Bittner a je mi 16 let. Chodím na Střední průmyslovou školu v České Lípě na obor IT </p>
                <p>Rád čtu a někdy (hlavně v létě) i sportuju.</p>
                <div class="cistic"></div>
                <p>Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!</p>
            </section>
           <div class="cistic"></div>
        </article>
    </body>
<footer class="fx1">
    Vytvořil &copy;HoBi 2013 pro <a href="http://devbook.cz">DEVBOOK.CZ</a>
</footer>
</html>
 
Odpovědět
9.3.2017 15:10
Avatar
Odpovídá na Lazar Slavković-Raco
Matúš Petrofčík:9.3.2017 17:32

Ahoj, napadá ma že máš zlú cestu k obrázkom. Cesty by si mal písať relatívne k css súboru. Tzn. že ak máš napr. takúto štruktúru:

projekt/css/style.css
projekt/img/pozadi.png
projekt/index.html

tak v tom css súbore musí byť cesta k pozadu takáto: background: url('../img/po­zadi.png');
Predpokladám že práve toto je tá tvoja chybka.

Odpovědět
9.3.2017 17:32
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Odpovídá na Matúš Petrofčík
Lazar Slavković-Raco:10.3.2017 4:37

Takze musim myt zvlast slozku tyhle obrazky na hl.background a na background?

 
Odpovědět
10.3.2017 4:37
Avatar
Odpovídá na Matúš Petrofčík
Lazar Slavković-Raco:10.3.2017 9:18

Uz jsem zjistil za chybu. Dal jsem spatne background do spatnyho elementu, ale nastal dalsi problem. Me nejak te article posunul vlevo a ten zahlavi articlu sel doprava.
Zdrojak zde:

body{
    font-family: Verdana;
    font-size: 14px;
    text-shadow: #0a294b;
    background: url("Pictures/pozadi2.png");
}
h1, h2, h3, h4, h5, h6 {
    text-align: center;
    color: white;
    font-family: "Arial Narrow";
}
.centrovany{
    text-align: center;
}
article{
    background: url("Pictures/pozadi.png");
    box-shadow: 2px 2px 7px #1c2228;

}
h1 {
    font-size: 2em;
    font-weight: normal;
    color: white;
    text-align: center;
    text-shadow: 2px 2px 1px #0a294b;
}
article header {
    width: 250px;
    float: left;
}
article section {
    width: 710px;
    float: left;
    background: white;
    border: 2px dashed #4b79ff;
    border-radius: 10px;
}
.cistic {
    clear: both;
}
.vlevo{
    float: left;
}
section{
    padding: 20px;
    width: 666px;
}
#logo{
    background: url("Pictures/logo.png") no-repeat;
    width:250px;
    height:60px;
    float:left;
    margin: 7px 0px 0px 20px;
}
#logo h1{
    margin: 14px 0px 0px 10px;
}
nav ul{
    margin: 0px;
    list-style-type: none;
}
nav ul li{
    float: left;
    margin: 0px;
    font-size:17px;
    height: 73px;
    padding: 0px 25px;
}
nav ul li a{
        padding: 0px 25px;
}
nav a{
    color: white;
    text-decoration: none;
}
nav ul li:hover, .aktivni{
        background: #7bff95;
    box-shadow: 0px 0px 5px black;
}
 
Odpovědět
10.3.2017 9:18
Avatar
Patrik Svoboda:24.3.2017 20:24

Ahoj, když přidám logo tak se mi nadpis "o mně" posune až za logo a dá se do dvou řádků. Nevím čím by to mohlo být způsobeno.
Díky za radu 

<!doctype html>
<html lang="cs-cz">

<head>
     <meta charset="utf-8" />
     <link rel="stylesheet" href="styl.css" type="text/css" />
     <title> patrikovo porfolio </title>
     <header>

           <nav>
            <div id="logo"><h1>Psvoboda8</h1></div>
             <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="#">Kontakt</a></li>
              </ul>
           </nav>



     </header>
</head>
   <body>
    <article>
    <header class="vlevo">
     <h1 class="vlevo">O mně</h1>
    </header>
          <section>
                <p class="centrovany">
                Vítej na mém prvním webu</p>

                <p>Jmenuju se <u>Patrik Svoboda</u> je mi 14 let.a žiju v ostravě</p>
                <p><img src="obrazky/krajina.png" alt="obrazek krajiny" width="25%" /></p>
                <p>venku je <strong>tepolo</strong></p>

          </section>
           <div class="cistic"></div>
          </article>

      <footer class="centrovany">
                  Vytvořil &copy;Psvoboda8 pro test
           </footer>
     </body>
</html>
Editováno 24.3.2017 20:26
 
Odpovědět
24.3.2017 20:24
Avatar
Odpovídá na Patrik Svoboda
Patrik Svoboda:24.3.2017 20:47

už jsem vyřešil :)

 
Odpovědět
24.3.2017 20:47
Avatar
Martin Šebek:21.5.2017 12:37

Ahoj,
chtěl jsem se zeptat, jak mám udělat, když bych chtěl mít celou tu hlavičku zarovnanou na střed? Myšleno, že když otevřu stránky na obrazovce s rozlišením větším než 960px tak se vždy zobrazí uprostřed i s navigací?
Díky

 
Odpovědět
21.5.2017 12:37
Avatar
Odpovídá na Martin Šebek
Tomáš Pokorný:12.6.2017 16:57

Tohle by mě taky zajímalo...

 
Odpovědět
12.6.2017 16:57
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: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
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
Per aspera ad astras
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: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
Redaktor
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
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
Super redaktor
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 Čápka: 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
Péťa
Avatar
Jan Lupčík
Super redaktor
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ář
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
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
Per aspera ad astras
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
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
Per aspera ad astras
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
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
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
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
Odpovídá na VoKo
Reaktivní 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
Kdo je připraven, toho zaskočí něco jiného
Avatar
VoKo
Člen
Avatar
 
Odpovědět
12.1.2019 12:55
Avatar
Patrik Pastor:24.2.2019 17:10

chtěl bych se zeptat. V obrázku (posílám se souborem) jde vidět, že u list itemů v navigaci mám sice margin, ale padding mi nefunguje (není mezera mezi slovy v pozadí - oranžové barvě.

CSS kód:
nav ul li{
float: left;
padding: 0px, 25px;
margin: 0px 20px;
font-size: 17px;
height: 73px;
line-height: 4.3em;
}

nevíte, proč mi nefunguje Padding? díky.

PS: css kod je stejný, jako na itnetwork.cz ,tak fakt nwm

Editováno 24.2.2019 17:12
 
Odpovědět
24.2.2019 17:10
Avatar
Odpovídá na Patrik Pastor
Michal Šmahel:24.2.2019 17:19

Ahoj, mezi hodnotami máš čárku (",") místo mezery. Nahraď ji za mezeru a bude to fungovat.

Odpovědět
24.2.2019 17:19
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Odpovídá na Michal Šmahel
Patrik Pastor:24.2.2019 17:21

díky, už to funguje, celkem rychlost tady :D
Jinak jsem to udělal asi protože jsem zvykly z C# (na tom jsem začínal - tam se všechny parametry čárkou oddělují).

 
Odpovědět
24.2.2019 17:21
Avatar
Odpovídá na Michal Šmahel
Patrik Pastor:25.2.2019 21:53

Ještě kdybys mi prosím vysvětlit toto:

article header{
width: 250px;
float: left;
position: static;
background: none;
}

hlavně, že kdybych změnil width (např zvětšil o 100px) toho headeru, tak se to rozsype cele. A ja může mít text (<header><h1>O MĚ</h1></header>) - nadpis šířku?? text nemá snad šířku ne? nebo se ten nadpis roztáhne doprava na okraj toho headeru? Pak by ten nadpis byl float: right ne? spoustu otázek ale v seriálu žádna odpoveď, předem díky tedy za ní.

 
Odpovědět
25.2.2019 21:53
Avatar
Michal Šmahel:27.2.2019 7:52

No, s rychlostí odpovědí je to různé - určuje to většinou kvalita dotazu a jestli má zrovna někdo čas.

Co se týče tvého dotazu, bylo by dobré ho upřesnit, úplně nerozumím, o co ti jde.

Text samotný stylovat není možné, ale zároveň není možné vložit do HTML text, aniž by nebyl obalen alespoň jedním tagem. Když text obalíš třeba "<span>", můžeš ho nastavit jako blokový element a ten již může mít šířku. Text sám o sobě (v řádkovém typu) šířku mít nemůže. Nadpis je blokový element, takže šířku mít může. Pokud používáš float (což většinou není nutné a lze to nahradit lepšími technologiemi - css grid, flexbox), musí ti rozměry sedět tak, aby jejich celková velikost byla rovna maximálně šířce obrazovky.

Odpovědět
27.2.2019 7:52
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Odpovídá na Patrik Pastor
Michal Šmahel:27.2.2019 22:26

Omlouvám se, zapomněl jsem klepnout na "Odpovědět". Psal jsem to trochu ve spěchu... :D

Odpovědět
27.2.2019 22:26
Nejdůležitější je motivace, ovšem musí být doprovázena činy.
Avatar
Matěj Bína
Člen
Avatar
Matěj Bína:5.3.2019 18:57

Výhodou je, že se s obrázkem lépe pracuje a lépe se pozicuje, když je na pozadí.

Myslím, že tenhle text by chtěl trochu rozvést. Až doteď byla tato série skvělá v tom, že říkala nejen "tohle je lepší," ale i proč. Tady jsem poprvé v rozpacích, protože nemám tušení, co je na tom DIVu tak zvláštního.

 
Odpovědět
5.3.2019 18:57
Avatar
Reaktivní uživatel:5.3.2019 20:52
  • upper-roman – Řecké číslice velkými písmeny

Řecké číslice sice existují, ale podle angličtiny to asi měly být římské :-)

Odpovědět
5.3.2019 20:52
Kdo je připraven, toho zaskočí něco jiného
Avatar
Veronika Školová:6.3.2019 11:00

Ahoj, to logo mi proste nereaguje na žádné úpravy (obrazek, barva.. nic), najdete kde mám chybu prosím ? Díky!

<!DOCTYPE html>

<html lang="cs-cz">
<head>
        <meta charset="utf-8" />
        <title>Portfolio</title>
        <link rel="stylesheet" href="styl.css" type="text/css" />
</head>

<body>

<header>
 <div id="logo">Veronika Školová Photo.Art</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> Můj web </h1>
        </header>

        <section>

             <p class="centrovany">
                <img src="obrazky/pic.jpg" alt="veronika" style="border-radius: 500px;" class="vlevo"/>
            </p>
             <p>Vítejte na mém prvním webu, zatím se teprve učím, ale myslím, že mi to jde. </p>
            <p> Tady je odkaz na moje portfolio <a href="http://www.veronikaskolovaphotoart.com" target="blank"!>Veronika Školová Photo.Art</a> </p>

            <h2>O mě</h2>

            <p>Jsem pražská fotografka. Fotografií se zabývám dva roky a bla bla bla bla</p>
            <p>Ráda cvičím, cestuju a fotím. </p>
            <p>A mým novým koníčkem je <strong>programování</strong>!</p>

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

    </article>
 <footer>
 Vytvořila &copy; Veronika Školová 2019 pro <a href="https://www.veronikaskolovaphotoart.com/">Veronika Školová Photo.Art </a>
 </footer>
</body>
</html>
body {
   font-family: Verdana 14px;
   background: url('obrazky/pozadi_sede.png') #262525;
   margin: 0px
   min-width: 960px;
}
h2, h3, h4 {
   text-align: center;
   color: #0a294b ;
   font-family: Arial;
   text-shadow: 3px 3px 7px #666666;
}
h2 {
   font-size: 1.7em;
}
h1 {
        font-size: 2em;
        font-weight: normal;
        color: white;
        text-align: center;
        text-shadow: 2px 2px 1px #0a294b;
}

.centrovany {
   text-align: center;
}
article {
 background: url('obrazky/pozadi.png') #ff669e ;
}
article header {
    width: 250px;
    float: left;
}
article section {
    width: 666 px;
    float: left;
    background: white;
    border: 10px solid #262525;
    box-shadow: 2px 2px 7px  #1c2228;
    padding: 20px;

}
.cistic  {
clear:both;
}
header  {
height: 100px;
}
#logo {
background: url ('obrazky/logo.png') no-repeat;
width: 250px;
height: 60px;
float: left;
margin: 7px 0px 0px 20px;
}
#logo h1  {
margin: 14px 0px 0px 10px;
}
nav ul  {
margin: 0px;
list-style-type: none;
}
nav ul li {
float: left;
padding: 0px 25px;
margin: 0px 5px;
font-size: 17px;
height: 73px;
line-height: 4.3em;
}
nav a  {
color: white;
text-decoration: none;
}
nav ul li:hover, .aktivni  {
background: #ff669e;
box-shadow: 0px 0px 5px black;
}
 
Odpovědět
6.3.2019 11:00
Avatar
Tomáš Novotný:6.3.2019 11:19

Ahoj Verčo,
id=logo tag h1 nikde v html kódu nevidím a ve stylech ho máš... patrně jeden důvod
lepší když pošleš odkaz na web ať se na to dá podívat v akci...třeba tam máš jen chybně cestu k obrázku...

Odpovědět
6.3.2019 11:19
∞ ... the exact amount of possibilities how to deal with the situation ... so by calm, your solution is one of many
Avatar
Odpovídá na Tomáš Novotný
Veronika Školová:6.3.2019 12:19

cesty k obrázku už jsem řešila, to by mělo být ok. Jak mám poslat odkaz na web ?

 
Odpovědět
6.3.2019 12:19
Avatar
Odpovídá na Tomáš Novotný
Veronika Školová:6.3.2019 12:21

btw logo h1 nevidím ani v ukázkovém příkladu a taky tam je. Dělám to jen podle toho.

 
Odpovědět
6.3.2019 12:21
Avatar
Odpovídá na Veronika Školová
Tomáš Novotný:6.3.2019 17:02

.. no já ho v příkladu vidím,, ale ve tvém kódu ne
HTML

<div id="logo"><h1>HoBi</h1></div>

CSS

#logo h1 {
        margin: 14px 0px 0px 10px;
}

no, někde ty stránky máš/budeš mít vystavené ne? tak sem do příspěvku vložit url adresu, aby se na ně dalo podívat a zjisti kde je chyba..

Editováno 6.3.2019 17:02
Odpovědět
6.3.2019 17:02
∞ ... the exact amount of possibilities how to deal with the situation ... so by calm, your solution is one of many
Avatar
Odpovídá na Tomáš Novotný
Veronika Školová:7.3.2019 8:24

stránky mít vystavené nebudu nikde. Učím se to abych dostala lepší práci. Jinak ani oprava tohoto nepomohla :(

 
Odpovědět
7.3.2019 8:24
Avatar
Odpovídá na Veronika Školová
Tomáš Novotný:7.3.2019 10:02

podle mě to funguje tj. reaguje na změnu <h1>, ač nemám všechny potřebné zdroje můžeš mrknout zde.... https://tomas-novotny.eu/itnet/66424/
problém možná bude v tom, že to má prohlížeč "nakešované" viz.. https://cs.wikipedia.org/…izovat_cache

Odpovědět
7.3.2019 10:02
∞ ... the exact amount of possibilities how to deal with the situation ... so by calm, your solution is one of many
Avatar
Tomáš Novotný:7.3.2019 10:18

joo a ještě maličkost za margin: 0px ti chybí ;

body {
   font-family: Verdana 14px;
   background: url('obrazky/pozadi_sede.png') #262525;
   margin: 0px
   min-width: 960px;
}
Editováno 7.3.2019 10:18
Odpovědět
7.3.2019 10:18
∞ ... the exact amount of possibilities how to deal with the situation ... so by calm, your solution is one of many
Avatar
Fanoušek Atletů:9.4.2019 20:07

Vyřešeno

 
Odpovědět
9.4.2019 20:07
Avatar
Odpovídá na Fanoušek Atletů
Reaktivní uživatel:10.4.2019 21:04

Předpokládám správně, že se to týká tvého dotazu o pár lekcí dřív? Mohl bys to, prosím tě, napsat radši tam, ať tu nepleteš dotazem bez odpovědi a odpovědí bez dotazu?

Odpovědět
10.4.2019 21:04
Kdo je připraven, toho zaskočí něco jiného
Avatar
Filip Růžička:14.8.2019 17:55

Dobrý den, chtěl bych se zeptat.
I když v kódu CSS mám

nav ul li a:hover, .aktivni {
  color: #ff0000;
}

tak mi funguje jen hover ale aktivní ne. Prosím o případné tipy.
Děkuji

 
Odpovědět
14.8.2019 17:55
Avatar
Odpovídá na Filip Růžička
Reaktivní uživatel:14.8.2019 18:26

Řekl bych, že buďto nemáš označenou .aktivni položku, nebo tam někde máš překlep.

Odpovědět
14.8.2019 18:26
Kdo je připraven, toho zaskočí něco jiného
Avatar
Ondřej Krmela:22.9.2019 15:41

Nemohl by mi někdo poradit? nemohu přidávat jakékoliv obrázky např.to logo a nebo to pozadí.
Pečlivě jsem si vše prošel, ale chybu jsem tam nemohl nikde najít a nevím jak dál.

 
Odpovědět
22.9.2019 15:41
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Ondřej Krmela
Jaroslav Smrž:22.9.2019 15:56

To je zas dotaz typu "Nejede mi auto, jak to opravit?" :-) Chtělo by to specifikovat problém, kde, co jak a přidat sem tvůj kód + adresářovou strukturu.

Odpovědět
22.9.2019 15:56
/* Life runs on code */
Avatar
Odpovídá na Jaroslav Smrž
Ondřej Krmela:22.9.2019 15:58

Toto je html:
<!DOCTYPE html>
<html lang="cs-cz">

<head>
<meta charset="utf-8">
<link rel="stylesheet" href="styl.css" type="text/css" />
<title>H3RMOSOVO portfolio</title>
</head>

<body>
<header>
<div id="logo"><h1>H3RM­OS</h1></div>
<nav>
<ul>
<li class="aktivni">Do­mů</li>
<li>O mně</li>
<li>Dovednosti</li>
<li>Reference</li>
<li>Kontakt</li>
</ul>
</nav>
</header>
<article>
<header>
<h1>O mně</h1>
</header>

<section>
<p>Vítejte na mé webové stránce.Psát weby se teprve učím, ale myslím, že mi to jde skvěle!</p>
<p class="centrovany">
<img src="Obrázky/a­vatar.png" alt="Programátor H3RMOS" />
</p>
<p>Jmenuji se <u>Ondřej Krmela a je mi 13 let</u>. Chodím na 1.Základní školu v Plzni. Kontaktovat mě můžete na Kontaktní stránce.</p>
<div class="cistic"></div>
<p>Mými koníčky jsou hraní her a mým dalším koníčkem (u kterého doufám že se stane i mou prací) je PROGRAMOVÁNÍ!</p>
</section>
<div class="cistic"></div>
</article>
<footer>
Vytvořil ©H3RMOS 2019 pro ITNETWORK.CZ
</footer>
</body>

</html>

 
Odpovědět
22.9.2019 15:58
Avatar
Odpovídá na Jaroslav Smrž
Ondřej Krmela:22.9.2019 15:59

Tohle CSS:

body {
background: url(obrazky/po­zadi_sede.png) #1c2228;
margin: 0px;
font: 14px Verdana;
min-width: 960px;
}
h1, h2, h3, h4, h5, h6 {
text-align: center;
color: #0a294b;
font-family: Arial;
text-shadow: 3px 3px 7px #666666;
}
.centrovany {
text-align: center;
}

h2 {
font-size: 1.7em;
}
h1{
font-size: 2em;
font-weight: normal;
color: white;
text-align: center;
text-shadow: 2px 2px 1px #0a294b;
}
article header{
width: 250px;
float: left;
}
article section{
width: 706px;
float: left;
background: white;
border: 2px solid #006797;
border-radius: 10px;
padding: 80px;
width: 900px;
box-shadow: 2px 2px 7px #1c2228;
}
.cistic{
clear: both;
}
.vlevo{
float: left;
}
article{
background: url(Obrázky/po­zadi.png) #009aca;
}
header{
height: 73px;
}
#logo {
background: url(Obrázky/Lo­go.png) no-repeat;
width: 60px;
height: 60px;
float: left;
margin: 7px 0px 0px 20px;
}
#logo h1 {
margin: 14px 0px 0px 10px;
}

 
Odpovědět
22.9.2019 15:59
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Ondřej Krmela
Jaroslav Smrž:22.9.2019 16:05
  1. Pro vkládání kódu sem použij symbol </> nad editorem
  2. Nevidím HTML kód
  3. Nevidím adresářovou strukturu

Nejprve zkus přejmenovat adresář na název bez diakritiky (Obrázky -> Obrazky)

Dejme tomu, že máš adresář web a v něm soubory index.html, style.css a adresář Obrazky.
Cesta pak bude skutečně Obrazky/obrazek1­.jpg, pokud máš ale adresářovou strukturu jinak, nebude to fungovat.

Odpovědět
22.9.2019 16:05
/* Life runs on code */
Avatar
Odpovídá na Jaroslav Smrž
Ondřej Krmela:22.9.2019 16:25

Děkuju vám za radu! opravdu stačilo změnit diakritiku z Obrázky na Obrazky
momentálně už vše funguje jak má.Přeji hezký zbytek dne :)

 
Odpovědět
22.9.2019 16:25
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Ondřej Krmela
Jaroslav Smrž:22.9.2019 16:29

Rád jsem pomohl. Přeji mnoho zdaru do budoucna.

Odpovědět
22.9.2019 16:29
/* Life runs on code */
Avatar
Daniel Manycz:24. ledna 21:10

Zdravím vás,
Chci se zeptat. Nešťastnou náhodou se mi to podařilo vše vymazat, tudíž musim začít od začatku, ale to mi nevadí. Aspoň si to vše připomenu. Ale zajímá mě, když stáhnu váše soubory a nahradím je do mě nové složky, tak mi vyskočí uplně něco jiného než je vaše finální verze. Jsem z toho jelen. Prosim může mi někdo říci jak je to možné? Děkuji předem za odpověď

 
Odpovědět
24. ledna 21:10
Avatar
TheN3xSK
Člen
Avatar
Odpovídá na Filip Růžička
TheN3xSK:24. února 22:16

Skús použiť toto

nav ul li:hover, .aktivni {
        background: #ffbb00;
        box-shadow: 0px 0px 5px black;
 
Odpovědět
24. února 22:16
Avatar
Odpovídá na Ondřej Krmela
frantisek spacek:27. března 22:15

pri url nechybaju apostrofy? a raz su obrazky a raz su Obrazky toto nerobí chybu?

 
Odpovědět
27. března 22:15
Avatar
Adam Svoboda
Člen
Avatar
Adam Svoboda:1. dubna 17:31

Zdravím. Mám jeden problém, nevěděli byste někdo co s tím? Potřebuji vytvořit sloupce. Použil jsem k tomu <div> a přidal k němu class. Zdroj z css se mi k tomu ale neaplikoval. Když jsem tam nedal class, ale jenom section div tak vše jelo v pořádku, jenom se mi to aplikovalo i na jiné div což já nechci. Nevíte jak na to?

<section>
                   <div class="pravidla"><h2>Nadpis</h2>
                      <p>Můj text</p></div>
</section>

css:

section div .pravidla {
width:400px;
margin:30px;
padding:20px;
background:#061024;
}
 
Odpovědět
1. dubna 17:31
Avatar
Adam Svoboda
Člen
Avatar
Odpovídá na Adam Svoboda
Adam Svoboda:1. dubna 19:34

Tak jsem to vyřešil tím že jsem tam nenapsal div, tudíž jen section .class {..}
Neví někdo proč to tak funguje?

 
Odpovědět
1. dubna 19:34
Avatar
Adam Tyrpak
Člen
Avatar
Adam Tyrpak:23. května 17:45

Super!

Odpovědět
23. května 17:45
Selhání není propast nebo překážka. Jsou to dveře k novým možnostem, které bychom bez ponaučení z chyb neměli šanci o...
Avatar
Jiří Burda
Člen
Avatar
Jiří Burda:19. srpna 13:57

Přiložený web je už od lekce 9 neaktualizovaný a furt ten stejný.

 
Odpovědět
19. srpna 13:57
Avatar
Jan Sebastián Kostlán :29. srpna 14:08

Dobrý den. Mám problém s rozložením stránky, když přídám:

nav ul li {
        float: left;
        padding: 0px 25px;
        margin: 0 5px;
        font-size: 17px;
        height: 73px;
        line-height: 4.3em;
}

tak se mi to celé posune. Nevíte, čím by to mohlo být?

Odpovědět
29. srpna 14:08
Logika a kreativita je nejlepší
Avatar
Odpovídá na Jan Sebastián Kostlán
Jan Sebastián Kostlán :30. srpna 13:18

Už jsem to vyřešil: Byla chyba ve formátu obrázku.

Odpovědět
30. srpna 13:18
Logika a kreativita je nejlepší
Avatar
Ondrej Zadrapa:20. září 17:12

Nefunguje mi žádné přidávání obrázku do pozadí, ale že vůbec. Co to může způsobovat? Nahrál jsem pozadí normálně ve formátu "background: url('slozkabla­bla\logo.png') no-repeat;" tak i "background: url('slozkabla­bla\logo.jpg') no-repeat;", tak i "background: url(slozkabla­bla\logo.png) no-repeat;" a stal se úplný kokot, poradí mi někdo, co s tím mám dělat? Používám PSPad. Díky

 
Odpovědět
20. září 17:12
Avatar
Odpovídá na Ondrej Zadrapa
Jiří Vrána:21. září 12:56

Zaprvé máš obráceně lomítka, tím bych začal.

Pokud to nepomůže, zkusil bych toto : "background: url(../slozka­blabla/logo.png)

 
Odpovědět
21. září 12:56
Avatar
Odpovídá na Jiří Vrána
Ondrej Zadrapa:21. září 12:58

Obrátil jsem lomítka i lomítka, zkusil bez uvozovek, nešlo, ale kdo ví, třeba byl editor unavený, zkusím to ještě dnes, třeba to půjde.

 
Odpovědět
21. září 12:58
Avatar
Odpovídá na Ondrej Zadrapa
Michal Stisek:30. září 16:56

Jiřímu jen chyběly jednoduché uvozovky v cestě k obrázku, jinak je to správný příklad.

background: url('../slozkablabla/logo.png');

-- pokud máš .html v kořenovém adresáři webu .css ve složce /styly a obrázky ve složce /img (např.)

background: url('slozkablabla/logo.png');

-- pokud máš .html i .css v kořenovém adresáři a obrázky ve složce /img (např.)

Odpovědět
30. září 16:56
Jít pořád dál má smysl
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 191 zpráv z 191.