Diskuze: rozvržení webu

HTML a CSS HTML a CSS rozvržení webu American English version English version

Avatar
ahojecky.p
Člen
Avatar
ahojecky.p:

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
Avatar
Marek Z.
Redaktor
Avatar
Nahoru Odpovědět 30.12.2014 23:32
Chybami se člověk učí, běžte se učit jinam!
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na ahojecky.p
Honza Bittner:

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  +3 31.12.2014 0:27
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
ahojecky.p
Člen
Avatar
Odpovídá na Honza Bittner
ahojecky.p:

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  ±0 1.1.2015 20:28
Avatar
Samuel Illo
Redaktor
Avatar
Odpovídá na ahojecky.p
Samuel Illo :

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
www.samuelillo.com; lamka02sk(zavináč)samuelillo.com, www.point.samuelillo.com, www.csgorig.eu
Avatar
ahojecky.p
Člen
Avatar
ahojecky.p:
<!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  -5 1.1.2015 20:47
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na ahojecky.p
Jiří Gracík:

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
Creating websites is awesome till you see the result in another browser ...
Avatar
ahojecky.p
Člen
Avatar
Odpovídá na ahojecky.p
ahojecky.p:
<!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  +2 1.1.2015 21:07
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na ahojecky.p
Honza Bittner:

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  ±0 1.1.2015 21:39
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
ahojecky.p
Člen
Avatar
Odpovídá na Honza Bittner
ahojecky.p:

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
Avatar
Marek Z.
Redaktor
Avatar
Odpovídá na ahojecky.p
Marek Z.:

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!
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Marek Z.
Honza Bittner:

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  +2 1.1.2015 22:32
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na Marek Z.
Michal Žůrek (misaz):

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  +1 2.1.2015 10:31
Nesnáším {}, proto se jim vyhýbám.
Avatar
Marek Z.
Redaktor
Avatar
Odpovídá na Michal Žůrek (misaz)
Marek Z.:

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!
Avatar
Tonda Kozák
Člen
Avatar
Odpovídá na ahojecky.p
Tonda Kozák:

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
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 15 zpráv z 15.