NOVINKA: Začni v IT jako webmaster s komplexním akreditovaným online kurzem Tvůrce WWW stránek. Zjisti více:
NOVINKA: Staň se datovým analytikem od 0 Kč a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:

Diskuze – Layout (rozložení stránky) - Český HTML 5 manuál

Zpět

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

Komentáře
Nejnovější komentáře jsou na konci poslední stránky.
Avatar
valgard
Člen
Avatar
valgard:5.12.2012 13:34

Ahoj, mám otázku ohľadne tu uvedeného layoutu. Keď si vytvorím stránku s týmto layoutom, teda štruktúrou:
<html>
<head>
</head>
<body>
<header>
</header>
<nav>
</nav>
<section>
<article>
</article>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
tak to ešte nieje ostylované a všetko sa zoradí pod seba, tak ako som to tam vložil.

Ako mám postupovať ďalej ? Začať to stylovať cez css, alebo je nejaký iný sposob ? Ide mi hlavne u rozmiestenie jednotlivých častí dokumentu na stránke, teda aby to vyzeralo tak, ako je to uvedené na obrázku k článku.

Ja to skúšam stylovať cez css a posúvať to po stránke cez float, ale pripadá mi to trochu ako "núdzové" riešenie. Ide to nejako inak ?

Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na valgard
David Hartinger:5.12.2012 14:02

Co jsi uvedl jsou jen prázdné značky, které nemají definovanou žádnou pozici ani vzhled. Styluješ vždy přes CSS, v HTML se stylovat nedá. Jak by asi jinak prohlížeč sám od sebe poznal, jak si přeješ, aby layout vypadal?

Editováno 5.12.2012 14:03
Odpovědět
New kid back on the block with a R.I.P
Avatar
valgard
Člen
Avatar
Odpovídá na David Hartinger
valgard:5.12.2012 14:22

No, me ide práve o to, ako to stylovať. Skúšal som si tvoje tutoriály k rámcovému a tabuľkovému layoutu. Tam sa vytvorila nejaká "kostra" pomocou rámu (alebo tabuľky) a do toho sa vkladali ďalšie veci (text, zoznamy a pod.). Tá kostra už ale bola nadefinovaná v html a v css sa stylovali iné veci.

Keď som objavil tento nový layout, tak som si zo začiatku naivne myslel, že keď to obalím tými novými tagami, tak tá kostra stránky bude vyzerať tak ako je to na obrázku a ja tam potom budem vkladať už len obsah (text, zoznamy, ...).

No zistil som že to je inak :). Takže som chcel vedieť, akým sposobom urobím v novom layoute kostru stránky. Prechádzam si css manuál a skúšam rozne veci. Najviac sa mi zatiaľ pozdáva rozmiestnenie pomocou position: absolute, idem skúsiť aj iné veci. Tak chcem vedieť, či som na správnej ceste :).

Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na valgard
David Hartinger:5.12.2012 14:30

Podívej se na CSS vlastnosti float a na ukázkové šablony, uvidíš, jak se to řeší. Absolutní pozicování se zde nehodí.

K webu s takovýmto layoutem potřebuješ umět nějaký programovací jazyk, co ti do něj bude generovat obsah, s tím asi počítáš.

Odpovědět
New kid back on the block with a R.I.P
Avatar
valgard
Člen
Avatar
Odpovídá na David Hartinger
valgard:5.12.2012 14:53

Ok, díky, pozriem sa na ten float. Už som to podľa neho skúšal, ale moc mi to nešlo, holt budem skúšať ďalej :).

S programovacím jazykom počítam. Ale asi radšej založím na fóre téma ohľadne tohoto, pretože je to už asi mimo téma tohoto článku a nechcem tu rozvíjať dlhšie offtopic diskusie.

Avatar
Pavel Vosyka
Člen
Avatar
Pavel Vosyka:7.12.2012 19:34

Pěkný přehled... Co když mám dva "navigační oddíly" tedy jeden na nějaké kategorie a druhý, co zobrazí podkategorie... mám udělat 2x <nav> s jiným id? A stylovat je podle id?

Odpovědět
"nikdy nepiš nic 2x" (updated 10 years after: "Není nic špatného na tom napsat něco 2x")
Avatar
David Hartinger
Vlastník
Avatar
Odpovídá na Pavel Vosyka
David Hartinger:7.12.2012 20:03

Budeš mít nějaké 2 seznamy a ty obalíš do <nav>.

Odpovědět
New kid back on the block with a R.I.P
Avatar
Pavel Vosyka
Člen
Avatar
Pavel Vosyka:7.12.2012 20:08

No to jo, ale potřebuju je rozdílně stylovat a nenapadá mě jinak, než je označit rozdílným id.. takže nějak takhle?

<nav>
<ul id="kategorie">
<li>kat1</li>
<li>kat2</li>
<li>kat3</li>
<ul>
</nav>

<nav>
<ul id="podkategorie">
<li>podkat1</li>
<li>podkat2</li>
<li>podkat3</li>
<ul>
</nav>

Možná bych raději přiřadil identifáktor k těm <nav> tagům... ale asi je to jedno, co?

Odpovědět
"nikdy nepiš nic 2x" (updated 10 years after: "Není nic špatného na tom napsat něco 2x")
Avatar
Kit
Tvůrce
Avatar
Odpovídá na Pavel Vosyka
Kit:7.12.2012 20:19

A co kdybys zkusil

<nav id="kategorie">
<ul>
...

Dávat id k tagu ul mi přijde poněkud divné - chybí tomu logika. To je vlastně odpověď na tvou otázku: Jedno to není, id patří k nav.

Odpovědět
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
Avatar
Pavel Vosyka
Člen
Avatar
Pavel Vosyka:7.12.2012 20:22

Přesně tak jsem to původně chtěl :) .. tak díky za ujištění.. a dost rychlou odpověď :)

Odpovědět
"nikdy nepiš nic 2x" (updated 10 years after: "Není nic špatného na tom napsat něco 2x")
Nejnovější komentáře jsou na konci poslední stránky.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 19.