Diskuze: rozvržení webu

ahojecky.p

Člen

ahojecky.p:30.12.2014 23:29

Ahoj,prosím vás jak má vypadat tělo webu plus css? Ptám se proto,že na každém internetovém foru to je jinak.A netuším co je ok Děkuji

Odpovědět

30.12.2014 23:29

Uživatel sítě

Tvůrce

Uživatel sítě :30.12.2014 23:32

http://www.itnetwork.cz/…cesky-manual

Nahoru Odpovědět

30.12.2014 23:32

Chybami se člověk učí, běžte se učit jinam!

Honza Bittner

Tvůrce

Honza Bittner:31.12.2014 0:27

Ono také záleží jaký typ webu děláš atd.

Nejběžněji se však setkáš s rozložením jako je na obrázku co poslal kolega výše, avšak přidal bych aj obalový element:

<main> (nebo <div class="content">)
 ... to co je na obrázku
</main>

Hlavně nezapomínej vytvářet rozložení tak, jako by jsi neměl žádné styly. Má to své důvody a lépe se s tím aj pracuje...

Editováno 31.12.2014 0:29

Nahoru Odpovědět

31.12.2014 0:27

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

ahojecky.p

Člen

ahojecky.p:1.1.2015 20:28

Takže to má vypadat takto :

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

<header>
        <meta charset="utf-8" />
        <title></title>
</header>

<body>
        <section>
                <article>
                clanek 1
                </article>

                <article>
                clanek 2
                </article>
                </section>

                <footer>
                </footer>
</body>

</html>

Nahoru Odpovědět

1.1.2015 20:28

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:1.1.2015 20:35

Máš tam závažnú chybu. Tag header je hlavička webu a má byť v body. Dáva sa doneho nadpis a tak podobne. To čo si tam mal mať namiesto toho je head. Do head sa vkladajú napr. skripty a štýly a nie do header.

Nahoru Odpovědět

1.1.2015 20:35

Neaktivní uživatelský účet

ahojecky.p

Člen

ahojecky.p:1.1.2015 20:47

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

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

<body>
        <section>
        <article>
        članek 1
        </article>

        <article>
        članek 2
        </article>

        </section>
</body>

</html>

tak doufám, že je to opraveno.Ale podle toho http://www.itnetwork.cz/…cesky-manual je tam napsano header.

Nahoru Odpovědět

1.1.2015 20:47

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:1.1.2015 21:07

Ale je tam také napsáno (sice ne nijak extra srozumitelně, ale je), že je to obsah těla stránky (elementu body).

Nahoru Odpovědět

1.1.2015 21:07

Neaktivní uživatelský účet

ahojecky.p

Člen

ahojecky.p:1.1.2015 21:07

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

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

 <body>
         <header>
         <h1>  </h1>
        </header>

        <section>

        <article>
        članek 1
        </article>

        <article>
        članek 2
        </article>

        </section>
 </body>

 </html>

Tak po důkladném přečtení od lamka02sk by to mělo být ok?

Nahoru Odpovědět

1.1.2015 21:07

Honza Bittner

Tvůrce

Honza Bittner:1.1.2015 21:39

Ano, tak nějak by to mohlo býti. Avšak jak jsem psal, doporučuji vždy ještě zabalit vše do nějakého zabalovacího elementu.

Například

<div class="content">

nebo

<main>

Či tak něco.

Lépe se s tím pak pracuje, hlavně pokud začneš využívat nějaké odsouvání atd.

Nahoru Odpovědět

1.1.2015 21:39

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

ahojecky.p

Člen

ahojecky.p:1.1.2015 21:49

A co je lepší použít, nebo je to jedno

<div class="content"> nebo <main>

jinak u toho

<main>

se pro stylovani taky používá <main calss nebo id="">? Ptám se proto, že jsem vyděl napsany samoatatny

<main>

Editováno 1.1.2015 21:50

Nahoru Odpovědět

1.1.2015 21:49

Uživatel sítě

Tvůrce

Uživatel sítě :1.1.2015 22:21

Dle standartů html5 by měl tag main obsahovat hlavní obsah. Tedy část s obsahem (section) a ještě panely, jsou-li (aside).

Převezmu tvůj kód:

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

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

  <body>
          <header>
          <h1>  </h1>
         </header>
<main>
         <section>

         <article>
         članek 1
         </article>

         <article>
         članek 2
         </article>

         </section>
</main>
<footer>
copy, apod..
</footer>
  </body>

  </html>

Nahoru Odpovědět

1.1.2015 22:21

Chybami se člověk učí, běžte se učit jinam!

Honza Bittner

Tvůrce

Honza Bittner:1.1.2015 22:32

On main je definován jako

Defines the main content of a document

A já jen využívám jako obalový element, jelikož je to moje hlavní část dokumentu a při odsouvání kvůli menu či podobným efektům to mám hezky zabaleno.

Ale použití, které ukazuješ ty se také velmi používá a viděl jsem obě varianty na "profi" tutoriálech...

Nahoru Odpovědět

1.1.2015 22:32

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

Michal Žůrek - misaz

Tvůrce

Michal Žůrek - misaz:2.1.2015 10:31

toto už se blíží představě, kterou používám, ale H1 bych nedával do hlavičky, ale do obsahu, předci jen ten nadpis patří jemu. Do header dávám nějaký titulek webu (logo) a menu.

Nahoru Odpovědět

2.1.2015 10:31

Uživatel sítě

Tvůrce

Uživatel sítě :2.1.2015 11:10

Já bych to viděl takto, že bych k headeru přidal H1 a H2. Nadpisům článků, či názvů panelů H3, zbytek do podpisů apod.

Aby se zachovalo to, že mají jít pěkně po sobě velikostně. Myslím si, že to je tak i logické avšak každý má svůj názor a mohu se třeba mýlit.

Editováno 2.1.2015 11:11

Nahoru Odpovědět

2.1.2015 11:10

Chybami se člověk učí, běžte se učit jinam!

Tonda Kozák

Člen

Tonda Kozák:2.1.2015 12:24

Ono je v zásadě jedno, jakou to má strukturu. Pokud tam ovšem neuděláš takovou chybu, že vyměníš header za head.

Každý web bude vyžadovat jinou strukturu (pokud je nebudeš dělat stále stejné).

Jen dej bacha, že když používáš nové elementy (header, article, nav,...), musíš dodělat podporu pro starší IE.

Nahoru Odpovědět

2.1.2015 12:24