BF Summer sales
Pouze tento týden sleva až 80 % na HTML & CSS a JavaScript
80 % bodů zdarma na online výuku díky naší Letní akci!

Lekce 14 - Fixní menu a pozicování v CSS

V předešlém cvičení, Řešené úlohy k 12.-13. lekci HTML a CSS, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

Dnešní HTML/CSS tutoriál věnujeme stylování a dokončíme layout (rozložení) webu.

Patička

Začněme stylováním patičky. Zde není moc co vymýšlet. Nastavíme výšku, barvu textu a levý a horní okraj:

footer {
    height: 40px;
    color: white;
    margin: 20px 0 0 30px;
}

Podobně jako odkaz v hlavičce nastylujeme i odkaz v patičce:

footer a {
    color:  #ffbb00;
    text-decoration: none;
}

To bylo jednoduché, že? Výsledek:

Patička v HTML a CSS

Pole s obsahem článku (section) je na article velmi namačkané, nastavme article svislý padding na 30px:

article {
    background: url('obrazky/pozadi.png') #009aca;
    padding: 30px 0px;
}

Lepší, ne?

Podpora různých rozlišení

Již jsme web navrhli tak, aby byl použitelný v rozlišení s šířkou 960 pixelů a větším. Podporujeme tedy rozlišení 1024x768 a vyšší. Typické rozlišení pro dnešní dobu je 1280x800 na noteboocích (tam náš web vypadá stále dobře) a full-hd (1920x1080) na desktopech. Podívejme se, jak náš web vypadá ve full-hd:

Web ve full-hd

Není to úplně ideální. Rozlišení by mohlo být ještě vyšší, měli bychom web navrhnout tak, aby vypadal solidně i v takovém případě. Zde je vidět, proč jsme nastavili šedé pozadí celému body a ne jen patičce. Je to z toho důvodu, aby se ve vysokém rozlišení patička takto protáhla a nevzniklo dole bílé místo. Většina stránek na webu má však delší obsah, takže tento úvodní článek je spíše extrémní případ, nicméně je dobré počítat i s ním.

Šířka pole s článkem

Někteří (hlavně učitelé a teoretikové) tvrdí, že by se mělo pole s obsahem webu přizpůsobovat velikosti okna prohlížeče. Je však nemožné ten samý článek naformátovat tak, aby vypadal dobře v rozlišení 1024x768 i ve full-hd. Ve full-hd se obvykle z odstavců textu stanou jen dlouhé nudle. Viděli jste někdy knihu napsanou vodorovně na roli papíru? Já tedy ne. Všimněte si, že drtivá většina webů (hlavně ty, co za něco stojí) mají pevně určenou velikost pole s článkem. Jako výjimku znám asi jen Wikipedii. Section tedy roztahovat nebudeme.

Co však můžeme zlepšit je stránku vycentrovat, aby si uživatel s širokým monitorem nevykloubil krk, až bude náš web číst.

Jelikož potřebujeme vycentrovat 2 elementy uvnitř article (header a section), obalíme je oba do elementu div s nějakým ID:

<article>
    <div id="centrovac">
        <header>
        ...
        </section>
        <div class="cistic"></div>
    </div>
</article>
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

Samotný blokový element uvnitř blokového jsme ještě necentrovali. Zatím jsme centrovali pouze obrázek (element řádkový), což šlo pomocí nastavení text-align elementu, ve kterém je obrázek vložený. Tato vlastnost však nemá na blokové elementy žádný vliv. Centrovač vystředíme tak, že mu nastavíme vodorovný vnější okraj (margin) na hodnotu auto. Aby to fungovalo, musíme elementu samozřejmě nastavit i šířku (jinak by se roztáhl přes celý article):

#centrovac {
    margin: 0px auto;
    width: 960px;
}

Výsledek:

Web ve full-hd

Tímto jsme náš layout v podstatě dokončili. Pokud máte chuť, přidáme si do něj ještě takovou vychytávku - fixní menu.

Fixní menu

Hlavička s navigačním menu je poměrně nízká, můžeme na ni aplikovat zajímavou vlastnost, kterou je fixní pozice. O pozicích jsme se ještě nezmiňovali, napravme to.

Pozici určitému elementu nastavujeme pomocí CSS vlastnosti position. V HTML máme 4 typy pozic:

Statická pozice (static)

Všechny elementy v HTML mají jako výchozí statickou pozici. Element je jednoduše zobrazen na té pozici, na které je definován a to s ohledem na ostatní elementy na stránce. Všechny naše elementy mají nyní fixní pozici, jednoduše řečeno zobrazují se tam, kde mají :)

Relativní pozice (relative)

Pokud nastavíme elementu relativní pozici, můžeme mu v CSS definovat vlastnosti left, right, up a down. Zde můžeme pomocí pixelů nebo procent nastavit o kolik má být element posunutý oproti své originální pozici. Pokud elementu např. nastavíme levou pozici na 20px, zobrazí se 20px napravo od svého původního místa. Pokud je vpravo od tohoto elementu jiný element, tak se tento jiný element neposune, ale bude elementem zleva překryt. Který element bude na popředí můžeme nastavit pomocí vlastnosti z-index. Elementy výše mají vyšší číselné hodnoty, elementy níže nižší.

Absolutní pozice (absolute)

Absolutní pozice zobrazí element na daných souřadnicích bez ohledu na jeho originální pozici v HTML obsahu. Pokud tedy nastavíme elementu left na 20px, zobrazí se element 20px od levého okraje okna. Pokud jsou pod ním jiné elementy, překryje je.

Fixní pozice (fixed)

Fixní pozice funguje podobně, jako pozice absolutní, ale souřadnice se počítají v oblasti, která je vidět. Rolování scrollbarem tedy nemá na takové prvky vliv, zůstávají na svém místě, i když se ostatní obsah posouvá.

Zkusme si hlavičce nastavit různé pozice, abychom pochopili, jak fungují. Jak vypadá s fixní pozicí víme, zkusme ji nyní nastavit pozici relativní a horní souřadnici na 50px:

header {
    height: 73px;
    position: relative;
    top: 50px;
}

Aby se změny neprojevily i u headeru článku, nastavíme mu position na static:

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

Výsledek:

Relativní pozice v CSS

Vidíme, že celý element se i se svým obsahem posunul o 50 pixelů dolů a překrývá ostatní elementy. Ostatní elementy se nijak neposunuly, web se chová tak, jako by element byl stále na původní pozici, jen se vykresluje kousek vedle.

Nyní změňme pozici na absolutní:

position: absolute;

Výsledek:

Absolutní pozice v CSS

Vidíme, že element ze stránky úplně zmizel a objevil se nad ostatním obsahem na pozici, kterou jsme mu dali. Na jaké pozici byl původně vůbec nahraje roli.

Zkusme si naposledy fixní pozici, u které zůstaneme. Zkuste si nyní stránkou rolovat (musíte zmenšit okno prohlížeče), hlavička zůstává na svém místě. Nyní nastavme pozici na fixní a top na 0px:

position: fixed;
top: 0px;

Hlavička vypadá stejně, jako u pozice absolutní. Když však stránkou rolujeme, zůstává 0px od horní hrany okna:

Fixní pozice v CSS

Jelikož element ze svého místa zmizel, dáme místo něj u body margin:

margin: 73px 0px 0px 0px;

Určitě jste si také všimli, že si element nezachoval svou původní šířku a také je třeba nastavit pozadí. Dodejme headeru vlastnost width s hodnotou 100% a obrázek na pozadí:

background: url('obrazky/pozadi_sede.png') #1c2228;
width: 100%;

Pozadí se nám nyní aplikuje i na header článku, tam ho tedy zrušíme:

background: none;

Výsledek:

Fixní navigační menu v HTML a CSS

Pozicování používejte jen v případě, že víte, co děláte. Zpravidla se používá jen velmi zřídka a je velkou chybou sestavovat web zadáváním desítek absolutních souřadnic.

Menu zůstává na svém místě i když stránkou rolujeme. Gratuluji vám, pokud jste se dostali sami až sem, máte jednak hotový layout a jednat umíte slušně HTML a CSS. Dnešní kód je jako vždy ke stažení v příloze.

V příští lekci, Tvorba podstránek a kontaktní formulář, dokončíme jednotlivé podstránky našeho webu, abychom ho mohli nahrát na internet.


 

Stáhnout

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

 

Předchozí článek
Řešené úlohy k 12.-13. lekci HTML a CSS
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?
54 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 College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity (3)

 

 

Komentáře

Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:6.6.2013 17:46

ooo ... hezká šablona ... :D

Odpovědět
6.6.2013 17:46
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
David Čápka:6.6.2013 17:49

Jj, ten HoBi je fakt best :D

Odpovědět
6.6.2013 17:49
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
teeg
Člen
Avatar
teeg:6.6.2013 19:22

Ahoj, nebylo by dobré nastavit ještě hlavičce header minimální šířku na 960px? Já když totiž zmenším stránku, tak položky menu naskákají postupně pod sebe

 
Odpovědět
6.6.2013 19:22
Avatar
Salieri
Člen
Avatar
Salieri:6.7.2013 16:32

Ahoj dá se ten web přepracovat aby se zobrazoval ve FULHD normálně jako na nižších rozlišení?

Díky za odpověď.

Odpovědět
6.7.2013 16:32
Hlavní zlo? **Školství a Matematika**!
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Salieri
David Čápka:5.8.2013 17:29

Definuj normálně. Když ho roztáhneš, bude to jen nudle. Podívej se na internet, žádný web není roztažený přes celé fullhd kromě Wikipedie a tam to vypadá dost divně.

Odpovědět
5.8.2013 17:29
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
Salieri
Člen
Avatar
Odpovídá na David Čápka
Salieri:5.8.2013 17:54

Všechno už měsíc vyřešeno :)

Odpovědět
5.8.2013 17:54
Hlavní zlo? **Školství a Matematika**!
Avatar
WOťas
Člen
Avatar
WOťas:11.8.2013 10:40

Zajímavé

 
Odpovědět
11.8.2013 10:40
Avatar
domino.turak
Člen
Avatar
domino.turak:12.9.2013 21:23

Chcem sa opýtať, ak zmenším okno tak mi nevidno ostatné položky môjho menu. Nejaké riešenie?

Odpovědět
12.9.2013 21:23
"Never give up!"
Avatar
Duff.Beerman
Člen
Avatar
Duff.Beerman:20.9.2013 12:17

Neví někdo, proč mi to při zmenšení horizontálně udělá ta fixní lišta tohle: http://2i.cz/…c1eb38.f.jpg

 
Odpovědět
20.9.2013 12:17
Avatar
Duff.Beerman
Člen
Avatar
Duff.Beerman:20.9.2013 14:39

aha, tak na ukázkovém příkladě ke stažení je to stejné.

 
Odpovědět
20.9.2013 14:39
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Duff.Beerman
David Čápka:20.9.2013 14:46

Ten odkaz co jsi poslal nefunguje, takže takhle asi těžko poradíme.

Odpovědět
20.9.2013 14:46
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
Duff.Beerman
Člen
Avatar
Duff.Beerman:20.9.2013 22:10

sry

 
Odpovědět
20.9.2013 22:10
Avatar
p.baksa
Člen
Avatar
Odpovídá na Duff.Beerman
p.baksa:4.11.2013 22:43

Pro Duff. Beerman. Neboj jsme na tom stejne :D

 
Odpovědět
4.11.2013 22:43
Avatar
Bonnie
Neregistrovaný
Avatar
Bonnie:15.12.2013 11:19

Ahoj, chtěla bych se zeptat jestli lze pomocí css řešit i to, že mám takovéhle menu až pod záhlavím, které by se při scrollování stránky jakoby posunulo nahoru a tam zůstalo pak fixní jako je tady? Nenapadá mě totiž jak a ráda bych to řešila nejlépe pomocí css, pokud to tedy vůbec lze. Díky! :)

 
Odpovědět
15.12.2013 11:19
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Bonnie
David Čápka:15.12.2013 11:24

Obávám se, že na toto už bude potřeba JavaScript.

Odpovědět
15.12.2013 11:24
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
Bonnie
Člen
Avatar
Odpovídá na David Čápka
Bonnie:15.12.2013 11:34

Já jsem si to myslela, že to už nebude taková sranda.

 
Odpovědět
15.12.2013 11:34
Avatar
cmaja
Člen
Avatar
cmaja:27.12.2013 20:41

Taky se přimlouvám k tomu, jestli jde v HTML5 a CSS3 vytvořit menu a stránku, která se při zmenšení velikosti "nerozsype". Pravděpodobně to nejde, ale pokud by to bylo možné, mohli by jste prosím udělat ještě jeden díl tohoto seriálu navíc? A nebo nějaký postup jak na to?

Odpovědět
27.12.2013 20:41
"Jen dvě věci jsou nekonečné - vesmír a lidská hloupost. Tím prvním si ovšem nejsem tak jist" ALBERT EINSTEIN
Avatar
Odpovídá na cmaja
Michal Žůrek - misaz:27.12.2013 20:55

samozřejmě to lze, sloužík tomu media queries.

 
Odpovědět
27.12.2013 20:55
Avatar
cmaja
Člen
Avatar
cmaja:28.12.2013 0:59

Díky za odpověď, na "media queries" se podívám později, protože jsem v HTML a CSS začátečník bude mi to chvilku trvat než se k tomu dopracuji.

Odpovědět
28.12.2013 0:59
"Jen dvě věci jsou nekonečné - vesmír a lidská hloupost. Tím prvním si ovšem nejsem tak jist" ALBERT EINSTEIN
Avatar
cmaja
Člen
Avatar
cmaja:2.1.2014 12:22

Chtěl bych se zeptat, jestli by bylo možné vytvořit pomocí kostry, která se používá v tutoriálu webovou stránku s hlavním fixním menu (tak jak to tu máte), pak vlevo vedlejší postranní menu pro podkategorie z hlavního menu a vpravo sloupeček, kde by byli referenční odkazy na různé weby a samozřejmě uprostřed článek.
Určitě mně odkážete do sekce šablony pro vaše weby. Tam jsem našel jednu stránku od HoBiho, která by tomu odpovídala, ale ta je kompletně řešené přes tag <div>.

Odpovědět
2.1.2014 12:22
"Jen dvě věci jsou nekonečné - vesmír a lidská hloupost. Tím prvním si ovšem nejsem tak jist" ALBERT EINSTEIN
Avatar
done
Člen
Avatar
Odpovídá na cmaja
done:2.1.2014 12:26

Koukni se na kostru HTML5, potom uděláš fixní menu (nav) jako nečíslovaný seznam, nebo tabulku. Těm odkazům a dalším věcem nastavíš float: right atd.
Koukni se na zdejší tutoriály, a nebo si stáhni pár šablon a prohlédni si kód.

 
Odpovědět
2.1.2014 12:26
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na cmaja
David Čápka:9.1.2014 18:26

Můžeš nastavit minimální šířku webu pomocí CSS (vlastnost min-width), přestane se to potom rozsypávat.

Odpovědět
9.1.2014 18:26
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
cmaja
Člen
Avatar
cmaja:16.2.2014 17:31

Fixní pozice menu se mi libá, ale mám jeden malý problém, který nevím jak vyřešit. Když budu mít článek a na jeho začátku udělám obsah na jednotlivé nadpisy (např. druhé úrovně), tak díky fixnímu menu se mi to zobrazí špatně. Budu mít ten nadpis, ke kterému mně to mělo přemístit zakrytý (i kousek textu) právě uvedeným fixním menu.

Editováno 16.2.2014 17:32
Odpovědět
16.2.2014 17:31
"Jen dvě věci jsou nekonečné - vesmír a lidská hloupost. Tím prvním si ovšem nejsem tak jist" ALBERT EINSTEIN
Avatar
cmaja
Člen
Avatar
Odpovídá na cmaja
cmaja:17.2.2014 11:33

Už nemůžu editovat příspěvek výše, takže píšu ještě jeden další. V první větě má být menu se mi libí a ne libá :). Ale spíš jsem chtěl ještě napsat, že neumím nic v JavaScriptu, pokud by bylo řešení v čistém HTML5, byl bych raději.

Odpovědět
17.2.2014 11:33
"Jen dvě věci jsou nekonečné - vesmír a lidská hloupost. Tím prvním si ovšem nejsem tak jist" ALBERT EINSTEIN
Avatar
kilix
Člen
Avatar
kilix:6.3.2014 19:26

zdravím, potřeboval bych pomoct s jednou věcí. Stažený kód odsud a stránky které jsem dělal podle návodu se mi v IE zobrazují rozsypaně. V ostatních prohlížečích OK ale IE to je chaoz. Nevíte co s tím? Už to chvíli řeším ale UTF-8 ani změna !DOCTYPE nepomohla. Kdyby jste věděli co s tím tak dejte vědět pls.

 
Odpovědět
6.3.2014 19:26
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na kilix
David Čápka:21.3.2014 18:33

Web v IE funguje korektně a pokud ho spouštíš v nějaké staré verzi < 9, tak v té nefunguje již hodně webů.

Odpovědět
21.3.2014 18:33
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
Odpovídá na kilix
Jakub Vaněk (Bubavanek):21.3.2014 19:23

Všichni jsem velmi silní telepati, takže hned víme co ti nefunguje.o_O

 
Odpovědět
21.3.2014 19:23
Avatar
Odpovídá na David Čápka
Libor Šimo (libcosenior):21.3.2014 20:23

Ja mám bohužiaľ smolu. V práci máme možnosť max. IE8. :(
Takže keď mám trochu času, nemôžem sa baviť s css, ale môžem testovať javascript a jquery.

Odpovědět
21.3.2014 20:23
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
kilix
Člen
Avatar
Odpovídá na Jakub Vaněk (Bubavanek)
kilix:22.3.2014 21:16

Neumíš číst nebo co? Tak se do toho neser když nevíš o co jde. Problém je už stzejně vyřešen

 
Odpovědět
22.3.2014 21:16
Avatar
kilix
Člen
Avatar
Odpovídá na David Čápka
kilix:22.3.2014 21:19

jj spouštím v IE8. vyřešil jsem to tak že jsem tam vložil script co jsem našel někde na netu a už to jde i ve starším verzích. díky

 
Odpovědět
22.3.2014 21:19
Avatar
Daniel Vítek
Redaktor
Avatar
Daniel Vítek:22.3.2014 21:42

David Čápka srovnej si je tu trochu..

Odpovědět
22.3.2014 21:42
Na síti působím už pěknou řádku let. Pokud budeš něco potřebovat, písni mi, pokusím se ti poradit :)
Avatar
mkores.mk
Člen
Avatar
mkores.mk:18.4.2014 21:08

Ahoj,

když provedu toto

<article>
        <div id="centrovac">
                <header>
                ...
                </section>
                <div class="cistic"></div>
        </div>
</article>

tak se mi stránka absolutně rozhodí, nevíte, čím by to mohlo být způsobené?

Díky :)

 
Odpovědět
18.4.2014 21:08
Avatar
Odpovídá na mkores.mk
Michal Štěpánek:18.4.2014 21:14

máš ukončeno <header></header>?
uvnitř toho prvního <div> máš vložený

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

a pak teprve končí ten první div... Nemohlo by to třeba být tím?

Editováno 18.4.2014 21:16
Odpovědět
18.4.2014 21:14
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
mkores.mk
Člen
Avatar
Odpovídá na Michal Štěpánek
mkores.mk:18.4.2014 21:24

Jop, mám to přesně takto:

<article>
<div id="centrovac">
        <header>
    <h1>Web</h1>
        </header>
    <section>
    <p>TextTextTextTextTextText</p>
        <p class="centrovany"><img src="obrazky/avatar.png" alt="bbbb" /></p>

        <h2>O mně</h2>
        <p>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextT
    <p>TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText.</p>
    </section>
    <div class="cleaner"></div>
    </div>
</article>
 
Odpovědět
18.4.2014 21:24
Avatar
Odpovídá na mkores.mk
Michal Štěpánek:18.4.2014 21:26

zkus to ukončení divu dát takto :

</div>
<div class="cleaner"></div>
Odpovědět
18.4.2014 21:26
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
mkores.mk
Člen
Avatar
Odpovídá na Michal Štěpánek
mkores.mk:18.4.2014 21:44

Bohužel, beze změny

 
Odpovědět
18.4.2014 21:44
Avatar
Odpovídá na mkores.mk
Michal Štěpánek:18.4.2014 21:49

a v css máš pro ten "centrovac" co?

Odpovědět
18.4.2014 21:49
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
mkores.mk
Člen
Avatar
Odpovídá na Michal Štěpánek
mkores.mk:18.4.2014 22:13

To co je tady uvedeno -

#centrovac {
        margin: 0px auto;
        width: 960px;
}

A celková šířka té stránky (v headeru nastaveno 250px + v section 710px)

Ono i když v tom centrovači vymažu obsah (a tedy vůbec nic nedělá), tak to mám pořád takhle posunutý

 
Odpovědět
18.4.2014 22:13
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na mkores.mk
1Pupik1989:18.4.2014 22:34

Prvně bych uzavřel ten předposlední odstavec. Pak by to mohlo vypadat lépe.

 
Odpovědět
18.4.2014 22:34
Avatar
mkores.mk
Člen
Avatar
Odpovídá na 1Pupik1989
mkores.mk:18.4.2014 22:40

Ty odstavce mám v kódu všechny uzavřené, mám jich tam hodně a nechtěl jsem jich tady zbytečně dávat milion

 
Odpovědět
18.4.2014 22:40
Avatar
Odpovídá na mkores.mk
Michal Štěpánek:18.4.2014 22:47

a <h2> máš v css jak když jsou vycentrovaný správně?

Editováno 18.4.2014 22:48
Odpovědět
18.4.2014 22:47
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
mkores.mk
Člen
Avatar
Odpovídá na Michal Štěpánek
mkores.mk:18.4.2014 22:57
h2, h3, h4, h5, h6 {
        text-align: center;
        color: #0a294b;
        font-family: Arial;
        text-shadow: 3px 3px 7px #666666;
}
Editováno 18.4.2014 22:57
 
Odpovědět
18.4.2014 22:57
Avatar
Michal Štěpánek:18.4.2014 23:14

Zkusil bych zmenšit tu šířku a ten margin bych dal větší než 0, aby to nebylo až u okraje...

Odpovědět
18.4.2014 23:14
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
mkores.mk
Člen
Avatar
mkores.mk:18.4.2014 23:23

Myslíš u centrovače? Když nastavím šířku na 800px, tak se mi to posune směrem doprava, ale header se pořád řadí nad section, jako kdyby tam nebyl nastaven float: left...

 
Odpovědět
18.4.2014 23:23
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na mkores.mk
1Pupik1989:19.4.2014 8:13

Nejlepší bude živá ukázka. Vyřeší se to mnohem rychleji. Nebo soubory zabal a někam uploadni.

 
Odpovědět
19.4.2014 8:13
Avatar
mkores.mk
Člen
Avatar
Odpovídá na 1Pupik1989
mkores.mk:19.4.2014 10:29

Tady to je :)

http://1drv.ms/1jhmQcT

Editováno 19.4.2014 10:31
 
Odpovědět
19.4.2014 10:29
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na mkores.mk
1Pupik1989:21.4.2014 11:07

Sorry, chvíli mi to trvalo, než jsem si udělal čas.

article > header

Tak třeba zrovna tento css selektor neudělá nic. header není přímým potomkem article. To samé je

article > section

Pak ještě nějaké drobnosti jako

<img src="obrazky/avatar.png" alt="bbbb" />

konkrétně

/>

NET zápis se psal u XHTML. Čili lomeno můžeš klidně vynechat. To je jen taková drobná rada.

To byl soubor index.html.

Editováno 21.4.2014 11:08
 
Odpovědět
21.4.2014 11:07
Avatar
mkores.mk
Člen
Avatar
Odpovídá na 1Pupik1989
mkores.mk:23.4.2014 15:33

To neva :) Díky za info, myslel jsem si že section (i header) je přímým potomky article (stejně jako ul je přímým potomkem nav)

Nicméně nepodařilo se ti náhodou příjít spíše na tu náhodu s tou stránkou? Proč mi to pořád háže nad sebe, jako kdyby tam nebyl nastaven float?

 
Odpovědět
23.4.2014 15:33
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na mkores.mk
1Pupik1989:23.4.2014 16:24

Pokud chceš, aby byl header obtékán uvnitř article, tak u "article section" zruš obtékání. Navíc celý div s id "centrovac" je zbytečný. Můžeš šířku nastavit rovnou na article.

Ten header vnořený v articlu má být vedle section nebo uvnitř jako na obrázku co přidávám?

 
Odpovědět
23.4.2014 16:24
Avatar
mkores.mk
Člen
Avatar
Odpovídá na 1Pupik1989
mkores.mk:23.4.2014 16:37

Ten header má být vně articlu (chtěl bych nalevo z article header udělat další navigační menu, které by se ovšem otevřelo až po rozkliknutí nav1, nav2 nebo nav3)

Právě to je ten problém, i když article header má float:left, pořád je na articlem

Editováno 23.4.2014 16:37
 
Odpovědět
23.4.2014 16:37
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na mkores.mk
1Pupik1989:23.4.2014 16:50

On není nad articlem. On je za articlem. article musíš odsadit minimálně o šířku toho headeru.

article header {
  width: 250px;
  float: left;
}
article section {
  width: 666px;
  margin-left:250px;
}

Nebo další možnost je dát "article section" overflow:hidden místo levého marginu.

 
Odpovědět
23.4.2014 16:50
Avatar
mkores.mk
Člen
Avatar
Odpovídá na 1Pupik1989
mkores.mk:23.4.2014 17:08

Ok, nastavil jsem article section margin-left:250px.

Proč se mi to takto odsadí až skoro úplně doprava?

overflow:hidden - nereaguje, je to pořád stejné (minulý obrázek)

 
Odpovědět
23.4.2014 17:08
Avatar
1Pupik1989
Člen
Avatar
Odpovídá na mkores.mk
1Pupik1989:23.4.2014 17:41

Odsadí ti to, protože máš nadřazený element o velikosti 800px a vycentrovaný. Pokud chceš mít header vlevo, pak nesmí být uvnitř divu s id centrovac. Takto se vycentruje celý ten střed.

http://uloz.to/…/devbook-zip

Editováno 23.4.2014 17:42
 
Odpovědět
23.4.2014 17:41
Avatar
mkores.mk
Člen
Avatar
Odpovídá na 1Pupik1989
mkores.mk:23.4.2014 17:58

Díky moc! :)

Editováno 23.4.2014 17:59
 
Odpovědět
23.4.2014 17:58
Avatar

Člen
Avatar
:24.5.2014 22:32

Ahoj,
potřeboval bych poradit jak vycentrovat položky v horní černé liště. Dík

 
Odpovědět
24.5.2014 22:32
Avatar
nosekt
Člen
Avatar
Odpovídá na
nosekt:24.5.2014 22:41

Klidně můžeš bejt konkrétnější

 
Odpovědět
24.5.2014 22:41
Avatar

Člen
Avatar
Odpovídá na nosekt
:24.5.2014 22:55

Zkratka mam podibny web, kde je stejna horni navigacni lista jako zde, pouze v ni neni logo jako zde. Je take resena necislovanym seznamem. A chtel bych aby se ty polozky nezarovnavali k levemu okraji listy, ale byly na presnem stredu listy. Lista resp. Tag header ma nastavenou sirku 100%.

 
Odpovědět
24.5.2014 22:55
Avatar
nosekt
Člen
Avatar
nosekt:24.5.2014 23:18

Položkám seznamu, tzn. <li> smaž float: left; a nastav jim display: inline;.
Celému seznamu <ul> pak nastav text-align: center;

To by mělo fungovat

 
Odpovědět
24.5.2014 23:18
Avatar

Člen
Avatar
Odpovídá na nosekt
:25.5.2014 7:38

Dík moc! Problém byl v tom že jsem neznal display: inline;, takhle už vše funguje.

 
Odpovědět
25.5.2014 7:38
Avatar

Člen
Avatar
Odpovídá na nosekt
:25.5.2014 8:17

Tak mám ještě jeden problém, když obsah lišty vycentruju podle tvého návodu tak se oranžové zvýraznění po najetí myší zobrazuje pouze okolo textu, nikoliv na celou výšku lišty jako předtím.

 
Odpovědět
25.5.2014 8:17
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Odpovídá na
Vojtěch Mašek (Woyta):25.5.2014 10:41

Řekl bych, že musíš nastavit

li
{
  display: inline-block;
}
Odpovědět
25.5.2014 10:41
Výraz "to nejde" není v mém slovníku
Avatar
Vilém Koleček:6.6.2014 19:12

Mám malý problém: moje obrazovka má docela velké rozlišení, a proto na menších monitorech některé obrázky na mých stránkách zakrývají většinu té stránky. Potřeboval bych prostě, aby se obsah stránky zmenšil podle rozlišení. Jak to můžu udělat?

 
Odpovědět
6.6.2014 19:12
Avatar
Odpovídá na Vilém Koleček
Matěj Kripner:6.6.2014 19:32

Myslím, že by mohlo být řešením používání relativních jednotek (např. %)

 
Odpovědět
6.6.2014 19:32
Avatar
Odpovídá na Matěj Kripner
Vilém Koleček:6.6.2014 19:45

Zkoušel jsem to dát třeba do rámů, ale s těmi byl problém kvůli scrollování. A ten obrázek je totiž fixovaný na stránku, čili při scrollování je pořád na stejném místě. Nešlo by to třeba nějak dát do tabulky?

 
Odpovědět
6.6.2014 19:45
Avatar

Člen
Avatar
Odpovídá na Vilém Koleček
:6.6.2014 20:43

Do tabulky to rozhodně nedávej, musíš tomu obrázku nastavit rozměry v relativních jednotkách jako jsou %, em nebo rem. V nejposlednějším případě je to nutné udělat přes media-queries, což je pak způsob jak nastavíš určité css pro určité rozlišení obrazu zařízení.

 
Odpovědět
6.6.2014 20:43
Avatar
Odpovídá na
Vilém Koleček:6.6.2014 20:49

Nějak to zkusím :D

 
Odpovědět
6.6.2014 20:49
Avatar
kowax
Člen
Avatar
Odpovídá na teeg
kowax:6.7.2014 16:40

Ahoj, přikláním se k tomu, co psal teeg, u "header" bych změnil hodnotu width ze "100%" na "960px", tím se vyřeší problém při zmenšení okna, kdy se seskupí tlačítka horního panelu pod sebe, pak vše vypadá OK. Psalo tu o tom více lidí...

 
Odpovědět
6.7.2014 16:40
Avatar
kowax
Člen
Avatar
kowax:6.7.2014 16:43

ahh, tak beru zpět, když jsem to nahradil 960px, tak to vypadalo ok v malém okně, při velkém chyběl konec lišty, vyřešeno změnou z původních width: 100%; za width: 150%; a teď vše vypadá ok jak v malém, tak velkém okně :D

 
Odpovědět
6.7.2014 16:43
Avatar
kowax
Člen
Avatar
kowax:6.7.2014 16:45

V extrémně malém okně width: 300%;

já to tu snad zaspamuju :D

 
Odpovědět
6.7.2014 16:45
Avatar
Michal Krajčovič:11.7.2014 18:07

to s tým zoskupovaním tlačidiel pod seba som vyriešil tak, že som dal headeru v menu id aby to nemalo vplyv na header v article a v css dal min-width na 960px
html:

<header id="menu">
        ...
</header>

css:

#menu {
        height: 73px;
        position: fixed;
        top: 0px;
        background: url('blablabla') #blabla;
        min-width: 960px;
}
Editováno 11.7.2014 18:07
 
Odpovědět
11.7.2014 18:07
Avatar
Tomáš123
Člen
Avatar
Odpovídá na David Čápka
Tomáš123:4.4.2015 13:02

Ahoj, v článku máš dve chyby:

  1. Vlastnosti up a dows neexistujú. Používajú sa tam top a bottom
  2. Vo vysvetľovaní statickej pozície si asi nechtiac spomenul fixnú vo vete: "Všechny naše elementy mají nyní fixní pozici".
Odpovědět
4.4.2015 13:02
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Marek Šimon
Člen
Avatar
Marek Šimon:7.12.2015 19:25

Ahojte, neviem kam som to mal dat, tak to pisem do casti s pozicovanim a menu.
Mam problem s tlacitkami. Vytvoril som si tlacitka pomocou "button" a dal som im :hover atp. Chcem aby boli (tak isto ako background img) pozicne FIXED, aby ked scrollujem na stranke sa mi obrazok a tie tlacitka nehybali.
Problem nastava v tom, ze neviem ako ich dat vedla seba, skusil som float: left; a nefunguje to. Iba v pripade, ze zmenim position na inu hodnotu ako fixed. Neviete mi s tym pomoct, prosim?

 
Odpovědět
7.12.2015 19:25
Avatar
Odpovídá na Marek Šimon
Jiří Jeřábek (thechorcheecz):7.12.2015 19:51

Zdravím, můžeš použít

display: inline-block;

například takto

nav ul li
{
display: inline-block;
}
 
Odpovědět
7.12.2015 19:51
Avatar
Marek Šimon
Člen
Avatar
Odpovídá na Jiří Jeřábek (thechorcheecz)
Marek Šimon:7.12.2015 20:04

v css to mam takto

.button {
    width: 200px;
    transition-duration: 0.5s;
    border: 1px solid black;
    font-size: 30px;
    border-radius: 130px;
    position: fixed;
    padding: 15px 25px;
    background-color: white;
    color: black;
    text-align: center;
    margin: 20px;
    display: inline-block;
}
.button:hover {
    background-color: black;
    color: white;
}

V html to mam takto

<button class="button">Galerie</button>
<button class="button">O mne</button>

A ani po pouziti toho inline-blocku to nefunguje.

 
Odpovědět
7.12.2015 20:04
Avatar
Marek Šimon
Člen
Avatar
Marek Šimon:7.12.2015 20:15

Teraz som skusal na w3schools ten online edit, kde maju tu aplikaciiu, kde si mozes kod vyskusat a menit ho a ked som pridal

position: fixed;

tak mi to tiez sa vsetko prekryvalo cez seba ako v mojom pripade. Takze to bude nieco s tym position.

 
Odpovědět
7.12.2015 20:15
Avatar
Marek Šimon
Člen
Avatar
Marek Šimon:7.12.2015 20:25

tak prepacte za treti post, ale uz som to vyriesil. Ked davam position: fixed; do .button, tak vlastne rusim akekolvek ine vlastnosti umiestnenie ake tam pridam.
Takze som vytvoril dalsie atributy .position1 a .position2 a 1 som pridal iba fixed poziciu a druhemu som dal hodnoty top: 100px a position: fixed;
Teraz sa to zobrazuje ako ma :)

 
Odpovědět
7.12.2015 20:25
Avatar
Odpovídá na Marek Šimon
Jiří Jeřábek (thechorcheecz):7.12.2015 20:26

Nevím, jestli to úplně chápu dobře, každopádně příště lepší založit novej příspěvěk na fórum
zde je to http://jsfiddle.net/pt0qv8oo/

 
Odpovědět
7.12.2015 20:26
Avatar
Marek Šimon
Člen
Avatar
Odpovídá na Jiří Jeřábek (thechorcheecz)
Marek Šimon:7.12.2015 21:19

O tolko jednoduchsie ako som to ja robil... dakujem :) Aj ked som sa potom nakoniec rozhodol to dat pod seba tie tlacitka, tak som to dal do div s atributom width: 200px a uz su pekne pod sebou :)

 
Odpovědět
7.12.2015 21:19
Avatar
Jakub Vanek
Člen
Avatar
Jakub Vanek:10.4.2016 12:50

Zdravím, chtěl jsem se zeptat, nevím proč, ale header se mi zobrazuje nad section ale né vedle ní tak jak je v příkladu, lámu si nad tím hlavu a nemůžu na to přijít proč. poradil by někdo?
HTML:

<article>
        <div id="center">
                <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">

                </p>

                        <p><img src="obrazky/avatar.png" alt="Programátor HoBi" class="vlevo" style="border-radius: 500px" />Jmenuji se Jakub Vanek a je mi 20 let. Chodím už do práce, jsem zaměstnaný jako kontrolor kvality v Treboplastu.</p>
                <p>Rád poslouchám hudbu a někdy (hlavně v létě) i sportuju.</p>
                <div class="clear"></div>
                <p>Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!</p>

                <p>Tato stránka je vytvořena podle HTML tutoriálů na <a href="http://www.devbook.cz" target="_blank">devbooku</a>.</p>
                </section>
                <div class="clear"></div>
        </div>
</article>

CSS:

header {
        height: 74px;
}
.centrovany {
        text-align: center
}
article {
        background: url('obrazky/bg.png');
        padding: 30px 0px;
}
article header {
        width: 250px;
        float: left;
}
article section {
        width: 706px;
        float: left;
        background: white;
        border: 2px solid #006797;
        border-radius: 10px;
        box-shadow: 2px 2px 5px #1c2228;
        padding: 20px;
}
.clear {
        clear: both
}
#center {
        margin: 0px auto;
        width: 960px;
}
.vlevo {
        float: left;
}

https://ctrlv.cz/Dc0v

Odpovědět
10.4.2016 12:50
<keep it simple />
Avatar
Jakub Vanek
Člen
Avatar
Jakub Vanek:10.4.2016 13:04

tak už jsem to vyřešil :)
míšto původního

#center {
        margin: 0px auto;
        width: 960px;
}

jsem použil možnost s paddingem

#center {
        margin: 0px auto;
        padding: 0px 0px 0px 250px
}
Odpovědět
10.4.2016 13:04
<keep it simple />
Avatar
Tomáš123
Člen
Avatar
Odpovídá na Jakub Vanek
Tomáš123:10.4.2016 16:51

Nemyslím, že uvedená časť kódu rieši tvoj problém. Skôr by pomohlo prvku #center nastaviť šírku 1000px...

Odpovědět
10.4.2016 16:51
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
torhanmichal
Člen
Avatar
torhanmichal:5.8.2016 15:55

Zdravím Vás mám menší problém.. mám fixní menu..problém je, když shodím okno, tak mi menu lítá i zleva do prava což nechci. Děkuji za tip. mějte se

 
Odpovědět
5.8.2016 15:55
Avatar
torhanmichal
Člen
Avatar
torhanmichal:5.8.2016 16:28

Špatně jsem se vyjádřil posouvá se mi jen obsah v article. menu zůstává na místě a nejde vidět pak celé.. Snad mi někdo rozumí :)

 
Odpovědět
5.8.2016 16:28
Avatar
NomisCode
Člen
Avatar
NomisCode:26.8.2016 23:07

Pokud nastavíme elementu relativní pozici, můžeme mu v CSS definovat vlastnosti left, right, up a down. Zde můžeme pomocí pixelů nebo procent nastavit o kolik má být element posunutý oproti své originální pozici.

Je zde menší chybička, místo up a down má být top a bottom :)

 
Odpovědět
26.8.2016 23:07
Avatar
Ondřej Rejmont:12.1.2017 21:05

Dobrý den, nevíte co mám dělat, když jsem si u toho odkazu v patičce

<a>Vytvořil &copy;HoBi 2013 pro <a href="http://devbook.cz">DEVBOOK.CZ</a>

udělal toto

footer {
        height: 40px;
        color: white;
    margin: 20px 0 0 30px;
}

footer a {
        color:  #ffbb00;
        text-decoration: none;
}

Tak se mi celý ten text zbarvil na oranžovo místo pouze toho odkazu? Předem děkuji za odpověď.

 
Odpovědět
12.1.2017 21:05
Avatar
Odpovídá na Ondřej Rejmont
Ondřej Rejmont:12.1.2017 21:12

Už jsem to vyřešil. Bylo to tím, že jsem v

<a>Vytvořil &copy;HoBi 2013 pro <a href="http://devbook.cz">DEVBOOK.CZ</a>

Měl přidané to <a>. Správně to má vypadat takto

Vytvořil &copy;HoBi 2013 pro <a href="http://devbook.cz">DEVBOOK.CZ</a>
 
Odpovědět
12.1.2017 21:12
Avatar
Tomáš Kala
Člen
Avatar
Tomáš Kala:13.1.2017 19:04

Ahoj, mohl by mi někdo prosím poradit? Jak mohu udělat, aby se mi menu takhle nerozjelo po zmenšení okna?

 
Odpovědět
13.1.2017 19:04
Avatar
Matěj Kubíček:26.2.2017 20:55

Ahoj všem,
první bych chtěl moc poděkovat a hlavně pochválit všechny tutoriály na tomto webu. Nahlídl jsem již snad skoro do všech kategorií a vše je super.
Obracím se však na všechny s jedním problémem, resp. dvěma. Pokusil jsem se udělat web podle tutoriálu, ale s trochu jiným menu. Ikdyž jsem postupoval vcelku analogicky, tak se mi nepodařilo dostat pozadí střední části až do krajů a ještě se mi nepodařilo vycentrovat menu, které je až pod logem. Přikládám odkaz s celým webem (tedy s layoutem, textů si nevšímejte, nejsou podstatné). WEB
Požádám tedy někoho, kdo by se na to mohl mrknout, zda by se mi ozval a zároveň posoudil celý kód, jestli je tak nějak v pořádku.
Dík za jakoukoliv odpověď.
PS: Vím, že se moderní web asi teď dělá jinak, ale tohle jsou úplné základy, které bych měl asi ovládat, tak se je snažím nějak procvičit.

 
Odpovědět
26.2.2017 20:55
Avatar
Odpovídá na Matěj Kubíček
Filip Janhuba:5.3.2017 10:01

Pozadím střední části předpokládám myslíš tu tmavší část (background1.png)? V css je u #centrovac, kam patří ta střední část, nastavená pevná šířka 960px což u monitoru s vyšším rozlišením než 960x nebude až do krajů. Ono to menu patří taky do #centrovac a tak se řídí jen podle té pevné šířky.

Tak zkus použít u #centrovac třeba padding jak píše Jakub Vanek pár komentářů zpět. Můžeš také vyzkoušet v CSS vytvořit nový id jen pro menu a to si separátně vycentrovat :)

Pro vliv úpravy na výsledek v reálném čase (pokud již nepoužíváš) se hodí např. https://codepen.io

 
Odpovědět
5.3.2017 10:01
Avatar
Odpovídá na Filip Janhuba
Matěj Kubíček:5.3.2017 17:50

Díky za odpověď. Po dlouhém bádání se mi to nakonec podařilo vyřešit, myslím menu, právě tím obalením do dalšího elementu a jeho následným vycentrováním. Každopádně jsem během dalšího sebevzdělávání narazil na flexbox a jeho další funkce a musím říct, že s tím se mi pracuje o mnoho lépe. Ještě jednou díky. Jsem na úplném začátku a tak vím, že je toho ještě mnoho a mnoho, co se budu muset naučit. Myslím, že budu stále přicházet na další a další zlepšováky a usnadnění práce.

 
Odpovědět
5.3.2017 17:50
Avatar
Odpovídá na Jakub Vanek
Jan Harvalík:12.7.2017 23:27

Mám úplně stejný problém a nemohu ho vyřešit i zápis je téměř stejný. Prosím o radu děkuji.

 
Odpovědět
12.7.2017 23:27
Avatar
Jan Harvalík:12.7.2017 23:31

Header se mi zobrazuje nad section a ne vedle ní děkuji. Vím, že už se to tu řešilo ale dané rady sice pomohli, ale ne optimálně.

<article>
<div id="center">
<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">

</p>

<p><img src="obrazky/a­vatar.png" alt="Programátor HoBi" class="vlevo" style="border-radius: 500px" />Jmenuji se Jakub Vanek a je mi 20 let. Chodím už do práce, jsem zaměstnaný jako kontrolor kvality v Treboplastu.</p>
<p>Rád poslouchám hudbu a někdy (hlavně v létě) i sportuju.</p>
<div class="clear"></div>
<p>Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je programování!</p>

<p>Tato stránka je vytvořena podle HTML tutoriálů na devbooku.</p>
</section>
<div class="clear"></div>
</div>
</article>
CSS:

header {
height: 74px;
}
.centrovany {
text-align: center
}
article {
background: url('obrazky/bg­.png');
padding: 30px 0px;
}
article header {
width: 250px;
float: left;
}
article section {
width: 706px;
float: left;
background: white;
border: 2px solid #006797;
border-radius: 10px;
box-shadow: 2px 2px 5px #1c2228;
padding: 20px;
}
.clear {
clear: both
}
#center {
margin: 0px auto;
width: 960px;
}
.vlevo {
float: left;
}

 
Odpovědět
12.7.2017 23:31
Avatar
Ernest Kuki
Člen
Avatar
Ernest Kuki:29.9.2017 14:30

Ahoj,
nemohl by mi nekdo poradit s tou patickou?
Pochybuju o tom ze jsem footer nenapsal do toho css souboru spravne ..
Ale vubec mi nereaguje na prikazy.
Kdyz jsem ho zapsal poprve tak bylo vse bez problemu .. ale hned po restartovani PC mi prestal spolupracovat .. nechce menit barvu, pozici proste nic =X
(uz jsem byl tak zoufalej ze jsem ho jen prekopiroval .. ale ani tak se nehne)

Predem dekuji.

 
Odpovědět
29.9.2017 14:30
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Ernest Kuki
Honza Bittner:29.9.2017 14:46

No, mohl bys nám ukázat kód, abychom vůbec věděli, co děláš. Zkus to dát třeba na http://codepen.io nebo tak něco.

Odpovědět
29.9.2017 14:46
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Ernest Kuki
Člen
Avatar
Odpovídá na Honza Bittner
Ernest Kuki:29.9.2017 17:23

Omlouvam se za otravovani.. zmenil jsem editor a najednou jde vse zase tak jak ma =)

 
Odpovědět
29.9.2017 17:23
Avatar
Jiří Jirout:18.12.2017 16:36

Zdravím mohl by mi někdo poradit jak udělat třeba tu navigaci do sloupce a zarovnat doleva.Třeba jako na téhle stránce https://ctrlv.cz/NJdw .Vím že je to zastaralé ale zajímalo by mě jak by se to udělalo.

 
Odpovědět
18.12.2017 16:36
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na Jiří Jirout
Jan Lupčík:18.12.2017 16:46

Máš 2 možnosti:

  1. Tomu sloupci nastavit float: left; stejně jako tomu obsahu.
  2. Použít flexbox. Tohle je ta lepší varianta. Doporučuji si o tom něco přečíst, vždy se ti to bude hodit. :)
Odpovědět
18.12.2017 16:46
TruckersMP vývojář
Avatar
Odpovídá na Jan Lupčík
Jiří Jirout:18.12.2017 16:52

Díky ulehčil jsi mi práci už mě z toho bolela hlava jak sem na tom přemýšlel :D

 
Odpovědět
18.12.2017 16:52
Avatar
Odpovídá na 1Pupik1989
Martin Patočka:12.2.2018 12:16

Pomohlo mi to také, děkuji :)

 
Odpovědět
12.2.2018 12:16
Avatar
Reaktivní uživatel:15.7.2018 17:15

Nevím jestli jsem to špatně pochopil nebo to je opravdu špatně

Statická poz… …Všechny naše elementy mají nyní fixní pozici,

Jak vypadá s fixní pozicí víme, zkusme ji nyní nastavit pozici relativní…

nemá tam být statická?
Ale tohle je špatně určitě

Dodejmě headeru vlastnost width…

Odpovědět
15.7.2018 17:15
Kdo je připraven, toho zaskočí něco jiného
Avatar
Patrik Pastor:25.2.2019 21:44

Může mi ptosím někdo 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:44
Avatar
Matěj Bína
Člen
Avatar
Odpovídá na Patrik Pastor
Matěj Bína:5.3.2019 19:20

Tohle je hlavička článku a její šířka spolu s šířkou <section> dává těch magických doporučených 960 px. Stačí pixelík navíc a už se to nevejde do centrovače (když zvýšíš pixely tam, všechno funguje).

Nadpis je blokový element a defaultně se roztáhne na celou šířku rodiče (proto na něm solidně funguje centrování textu). A i kdyby nebyl, šířku 250 nastavujeme headeru, což je takový nový div se sémantickým významem, pokud jsem to správně pochopil.

To s float: right nějako nepobírám. Zkoušel jsem si s ním hrát úplně na začátku tutoriálu, ale to už bylo moc dávno, abych si pamatoval, jak se ty bloky chovaly.

Editováno 5.3.2019 19:20
 
Odpovědět
5.3.2019 19:20
Avatar
Marek Šebek
Redaktor
Avatar
Marek Šebek:26.6.2019 14:19

Ahoj, mám menší problém.
Po "obalení" headeru i section do centrovace se header posune do středu nahoru nad section. Je zde nějaké řešení aby se přizpůsobil header rozlišení a zároveň se necpal nad section?

 
Odpovědět
26.6.2019 14:19
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Marek Šebek
Jaroslav Smrž:26.6.2019 17:31
  • Jak se má header přizpůsobit rozlišení??? Nechápu otázku. V header máš pouze nadpis.
  • Jak vypadá CSS třída pro centrovac?
  • Header se nikam necpe. Je logické, že když ho máš v jednom divu nad section, tak že bude nad ní, když nemáš nastavený float
Odpovědět
26.6.2019 17:31
/* Life runs on code */
Avatar
Marek Šebek
Redaktor
Avatar
Odpovídá na Jaroslav Smrž
Marek Šebek:26.6.2019 18:38

Špatně jsem položil otázku. Myslel jsem aby při zoom apod. se stále centroval a nezůstával na jednom místě. Na fotce jde vidět bez centrovac
třída pro centrovac:

#centrovac {
    margin: 0px auto;
    width: 960px;
}
body {
        font: 14px verdana;
        margin: 0px;
        background: url('pozadi_sede.png') #1c2228;
        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
}
h1{
    font-size: 2em;
    font-weight: normal;
    text-align: center;
    text-shadow: 2px 2px 1px #0a294b;
    color: white;
}
#centrovac {
    margin: 0px auto;
    width: 960px;
}
#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 ul li:hover, .aktivni {
    background: #ffbb00;
    box-shadow: 0px 0px 5px black;
}
nav a {
    color: white;
    text-decoration: none;
}

.centrovany {
    text-align: center;
}
header {
    height: 73px;
}
article {
    background: url("noisy_texture.png") #4366f2;
    padding: 30px 0px;
}
article header {
    width: 250px;
    float: left;
}
article section {
    width: 666px;
    float: left;
    background: white;
    border: 10px inset #006797;
    box-shadow: 2px 2px 7px #1c2228;
    padding: 20px;
}
.cistic {
    clear: both;
}
.vlevo {
    float: left;
}
footer {
    height: 40px;
    color: white;
    margin: 20px 0 0 30px
}
footer a {
    color: #ffbb00;
    text-decoration: none;
}
 
Odpovědět
26.6.2019 18:38
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Marek Šebek
Jaroslav Smrž:26.6.2019 19:11

Pořád nechápu, co myslíš. Pokud myslíš chování při zmenšení okna nebo při prohlížení na mobilu, tak tomu se říká responsivita. Je třeba nastavit pozicování elementů při různých šířkách displaye - tzv breakpointy. Ty se nastavují v CSS pomocí @media. Další a mnohem schůdnější možností je použití Bootstrap frameworku, který už vše obsahuje. Více na https://getbootstrap.com/…ntroduction/

Editováno 26.6.2019 19:11
Odpovědět
26.6.2019 19:11
/* Life runs on code */
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Marek Šebek
Jaroslav Smrž:26.6.2019 19:20

Obsah tvá stránky by se pak dal s pomocí Bootstrap napsat nějak takto:

<div class="pozadi-modre">
        <div class="container">
                <div class="row">
                        <div class="col-md-4">
                                <h1 class="text-center">>O mne</h1>
                        </div>

                        <div class="col-md-8">
                                <div class="pozadi-bile">
                                        <p>Zde bude samotný obsah</p>
                                </div>
                        </div>
                </div>
        </div>
</div>
Odpovědět
26.6.2019 19:20
/* Life runs on code */
Avatar
Marek Šebek
Redaktor
Avatar
Odpovídá na Jaroslav Smrž
Marek Šebek:26.6.2019 19:42

Zjednodušeně bych chtěl dosáhnout toho, co je v této lekci v: "Šířka pole pod článkem".
Jenže když přidám centrovac tak se mi stránka rozhodí z původní pozice, jak je vidět na fotkách výše. Ještě přidávám celý html kód, protože opravdu nevím v čem je chyba. Omlouvám se, jsem začátečník a bohužel nevidím, kde je chyba, protože jsme porovnával html a css moje s tím, co je zde ke stažení a zdají se mi totožné (samozřejmě kromě obrázků apod.).

HTML s použitým centrovac zde:

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


<head>
        <meta charset="utf-8"/>
    <link rel="stylesheet" href="zaklady.css" type="text/css" />
    <title>Markovo Portfolio</title>
</head>
<body>

    <header>
        <div id="logo"><h1>Marek</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>
   <div id="centrovac">
    <header>
        <h1>O mně</h1>
    </header>

    <section>
            <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>

            <p class="centrovany"><img src="nb1.png" alt="notebook" /></p>
            <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
            <p>TEXT TEXT TEXT</p>
                <div class="cistic"></div>

        <h2><p>Dovednosti</p></h2>
            <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p>
    </section>

    <div class="cistic"></div>
</div>
</article>
<footer>
    Vytvořil &copy;Marek pro sebe
</footer>
</body>
</html>
Editováno 26.6.2019 19:44
 
Odpovědět
26.6.2019 19:42
Avatar
Marek Šebek
Redaktor
Avatar
Odpovídá na Jaroslav Smrž
Marek Šebek:28.6.2019 14:52

Nakonec tedy vyřešeno. Problém byl v tloušťce borderu.
Díky za snahu pomoct mi :-)

 
Odpovědět
28.6.2019 14:52
Avatar
Anna Ove Bahulíková:13.9.2019 18:52

Ahoj, mám takový problém. Myslím, že s tím tutoriál úplně nepočítá. Když mám fixí pozoci navigace a okno fakt jako hodně zúžím, tak se mi hodí navigace na dva řádky, ale už bohužel v tom případě za sebou nemá to tmavé pozadí a zasahuje do article section, tudíž bílé na bílém není vidět. Pokud okno prohlížeče zúžím jen trochu, všechno zůstává hezky na místě a v barvě. Mám obavu, aby to nedělalo problémy. Je to nějak jednoduše řešitelné?

 
Odpovědět
13.9.2019 18:52
Avatar
Odpovídá na Anna Ove Bahulíková
Jakub Podskalský:13.9.2019 19:38

Ahoj, jde o to, že jednotlivé elementy v headeru jsou nastaveny staticky, tudíž když se jejich nastavené délky nevejdou danou šířkou do šířky okna, tak se zalomí. Nějakou délku zabírá samozřejmě i padding a margin.
Dalo by se tomu zabránit např. tím, že použiješ relativní jednotky. Procenta, em, rem...

 
Odpovědět
13.9.2019 19:38
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Anna Ove Bahulíková
Jaroslav Smrž:14.9.2019 6:54

Ahoj, pokud chceš použít fixní navbar, je jasné, že mu musíš přizpůsobit i obsah stránky pod ním, tzn aby navbar měl stále stejnou výšku a nevytékal ti do obsahu kvůli zalamování položek menu. Opět doporučím použití Bootstrap responsivního navbaru.
Nejprve přidej responsivní meta tag a bootstrap CSS mezi tagy <head></head>

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <!-- Bootstrap CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Samotný kód fixního menu bude vypadat následovně:

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">Logo</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">Dashboard</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" asp-area="" asp-controller="Employees" asp-action="Index">Zaměstnanci</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

Navbar a položky menu si pak můžeš nastylovat ve vlastním CSS souboru s použitím !important za definicí. Např:

.navbar {
    border-bottom: 1px solid #cccccc !important;
}

Fixní navbar má nastavenou výšku 50px, proto musíš ještě v CSS nastavit body padding-top na 50px.
Výsledek uvidíš na přiloženém obrázku.

Odpovědět
14.9.2019 6:54
/* Life runs on code */
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Anna Ove Bahulíková
Jaroslav Smrž:14.9.2019 6:58

Značky začínající asp vymaž, kopíroval jsem to z .net core projektu. Místo nich použiješ href="soubor.html"

Odpovědět
14.9.2019 6:58
/* Life runs on code */
Avatar
Mirek Matějka:6. února 11:41

Ahoj, sice je o této asi chybě již zmínka v předchozí diskusi, ale bez reakce, tak to zkusím přidat také: Ve výkladu o "statické pozici" se objevuje věta: "Všechny naše elementy mají nyní fixní pozici". Asi by tam správně mělo být napsáno: "... mají nyní statickou pozici." Nebo tomu špatně rozumím?

 
Odpovědět
6. února 11:41
Avatar
Freezy
Člen
Avatar
Freezy:8. března 11:02

Ahoj, nejspíš jsem našel překlep: *Relativní pozice (relative)
Pokud nastavíme elementu relativní pozici, můžeme mu v CSS definovat vlastnosti left, right, up a **down.

Vlastnost down má být nahrazena vlastností bottom.
Aspoň teď mi to tak funguje. Nevím, jestli to bylo dřív třeba jinak.
Pokud se pletu, klidně mě opravte. ;-)

Odpovědět
8. března 11:02
Ztrácej svůj čas a čekej na zázrak
Avatar
Odpovídá na Freezy
Jakub Podskalský:8. března 14:34

Ano, překlep. Stejně jako up by mělo být top. Snad bude opraveno. :)

 
Odpovědět
8. března 14:34
Avatar
Jan Hraško
Člen
Avatar
Jan Hraško:1. května 21:09

Pekne krok za krokom ide tento seriál. Najlepšie ak niečo nefunguje... vtedy treba skúmať a premýšľať, vtedy je to najproduktívnejšie učenie. Strávil som 2 hodiny, kým som zisltil, že mi chýba < pre ukončenie <p>.
;-)
Ja používam editor Blaufish. Pekne zvýrazňuje, má predpirpavené funkcie...... tak je efektívny pri hľadaní chýb.

 
Odpovědět
1. května 21:09
Avatar
Adam Tyrpak
Člen
Avatar
Adam Tyrpak:29. května 13:05

Výše v komentářích se viděl, že měl někdo problém s navigací a jejím "smrsknutím" na dva řádky, pokud je stránka příliš "úzká"

Já jsem jednoduše nastavil navigaci fixní šířku, tudíž stejně jako článek se pouze vytvoří scroll a nebude se smrskávat na dva řádky a přizbůsobovat se velikosti stránky

CSS:

.fix {
        min-width: 960px;
}

HTML:

<header>
    <div id="logo"><h1>pabienko</h1></div>
    <nav class="fix">
        <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>
Odpovědět
29. května 13:05
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
Adam Tyrpak
Člen
Avatar
Adam Tyrpak:29. května 13:06

Tedy alespoň doufám, že je to správně :D

Odpovědět
29. května 13:06
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
Onderjepán
Člen
Avatar
Onderjepán:4. června 20:52

Ja se priznam, ze jsem to taky trochu obešel jako Adam. Znasobil jsem procentní hodnotu u headeru (u me na 300%) a to fungovalo to, kdyz jsem zuzil okno.
Taky bych se chtel zeptat jestli je to chyba nebo ne?

Dekuju

 
Odpovědět
4. června 20:52
Avatar
Dominik Marášek:12. června 16:57

Ahoj, borci a borkyně, mám otázku nad kterou dumám už pár dní a nejsem schopnej si odpovědět. Po vložení id=centrovac do kodu mi jakoby přestane fungovat float u article header a section, zkrátka se mu nadpis článku zobrazuje nad článkem samotným. Prosím dokáže mě někdo navést proč tomu tak je ?
HTML:

<!DOCTYPE html>
<html lang="cs-cz">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="styl.css" type="text/css" />
        <title>Stránka</title>
    </head>
    <body>
        <header>
            <div id="logo"><h1>Nášweb</h1></div>
            <nav>
                <ul>
                    <li><a href="rozlozeni.html">Domů</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="kontakt.html">Kontakt</a></li>
                </ul>
            </nav>
        </header>
        <article>
            <div id="centrovac">
            <header>
                <h1>O nás</h1>
            </header>
            <section>
                <p>Úvod co bude na těchto stránkách</p>
                <p>Proč jsme si stránky vlastně založili hmm</p>
                <p>Nvm další bláboly, ELi co tu chceš?!</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
                <p>Textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</p>
            </section>
            </div>
            <div class="cistka"></div>
        </article>
        <footer>
            <p>Tohle sem si napsal sám</p>
        </footer>
    </body>
</html>

CSS:

article{
background: #6495ED;
padding: 30px 30px;
}
.centr{
    text-align: center;
}
body article h1, h2, h3{
    text-align: center;
    color:      #800080;
    font-size: 2.5em;
    text-shadow: 2px 2px 1px #000000;
    color: white;
}
body{
    background: url('pics/cerna.png') #000000;
    font-size: 1.3em;
    margin: 50px 0px 0px 0px;
    min-width: 960px;
}
article header{
    margin: 0px;
    float: left;
}
article section{
    float: right;
    background: white;
    border-radius: 10px;
    box-shadow: 2px 2px 7px #1c2228;
    padding: 20px;
}
.cistka{
    clear: both;
}
.cistkal{
    clear: right;
}
body > header{
    position: fixed;
    top: 0px;
}
#logo{
    background: url('pics/pisk.png') no-repeat;
    background-size: 100%;
    float: left;
    width: 50px;
    height: 64px;
    margin: 0px 0px 0px 10px;
}
#logo h1{
    margin: 0px 0px 0px 55px;
    color: white;
    float: left;
}
nav{
    float: left;
}
nav ul{
    list-style-type: none;
    max-width: 500px;
    margin: 0px 0px 0px 100px;
}
nav ul li{
    float: left;
    padding: 20px 25px 27px 25px;
    margin: 0px 20px;
    line-height: 160%;
}
nav ul li a {
    color: white;
    text-decoration: none;
}
nav ul li:hover, .aktivni{
    background: #DAA520;
}
footer{
    color: white;
    font-size: 0.5em;
}
#centrovac{
    margin: 0px auto;
    width: 960px;
}

Vim že tady s tim budu zbytečně někoho otravovat, ale budu moc vděčnej za radu.
Omluvte prosím jestli jsem něco napsal nesrozumitelně nebo špatně přidal kod či cokoliv.

 
Odpovědět
12. června 16:57
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 122 zpráv z 122.