Diskuze: HTML 5 mi rozbil layout

tomekmichalhu

Člen

tomekmichalhu:8.4.2017 11:30

Zdravím, dělám layout webových stránek. Dokud jsem měl doctype html 4 tak všechno fungovalo (ale jak jsem záhy zjistil, nebylo to validní protože používám tagy article, header, atd...), když jsem tedy nahoru napsal <!doctype html>, začalo to sice být validní, ale také to přestalo číst šířky elementů. Už asi hodinu googlím a všem to funguje, jen mě ne, tak už se mě začíná zmocňovat zoufalství. Předem děkuji za odpověď

HTML:

<!doctype html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Beryho stránky</title>
  </head>
  <body>
    <div class="stranka">
    <!-- --------------------------------------------------------------------------------------------------------------------------------- -->
       <header>
        <div class="nadpis">
          <img src="webPics/logoWhiteSmall.png">
          Beryho elektrobastlírna
        </div>
        <ul class="menu">
          <li><a href="www.google.com">Domů</a></li>
          <li><a href="www.google.com">Vysoké napětí</a></li>
          <li><a href="www.google.com">Digitální technika</a></li>
          <li><a href="www.google.com">O webu</a></li>
        </ul>
        <div class="cistic"></div>
       </header>
       <!-- --------------------------------------------------------------------------------------------------------------------------------- -->
       <article>
        <header>
          <form method="post" action="search.html">
            <input type="text" placeholder="Hedat na webu">
            <input type="submit" value="Hledat">
          </form>
          <hr>
        </header>
        <!-- ------------------------------------------------------------------------------------------------- -->
        <section>
          <a href = "www.google.cz">
          <div class="clanek">
            <img src="pictures/pic1.jpg">
            <H3>článek 1</H3>
            <p>
              Toto je testovací článek o ničem a pro nikoho
            </p>
            <div class=cistic></div>
          </div>
          </a>

          <a href = "www.google.cz">
          <div class="clanek">
            <img src="pictures/pic2.png">
            <H3>článek 2</H3>
            <p>
              Toto je testovací článek o ničem a pro nikoho
            </p>
            <div class=cistic></div>
          </div>
          </a>
        </section>
        <!-- ------------------------------------------------------------------------------------------------- -->
        <div class="cistic"></div>
       </article>
       <!-- --------------------------------------------------------------------------------------------------------------------------------- -->
       <footer>
        Tento web spravuje mocný programátor Michal Tomek.
       </footer>
    </div>
  </body>
</html>

CSS

body{
        background: #121212;
        font-family: Verdana;
        min-width: 960px;
}

header{
        background: url(webPics/noiseBlue0.png);
        padding: 0px;
}
header a{
        text-decoration: none;
        color: white;
}

header .nadpis{
        color: White;
        font-size: 4em;
        text-align: center;
}

header img{
        margin: 10px;
        vertical-align: middle;
}

article{
        width: 960px;
        background: url(webPics/noiseBlue0.png);
        margin-top: 10px;
}

article header{
        float: right;
        width: 200;
        background: url(webPics/noiseBlue0.png);
        padding: 15px 10px;
}

article section{
        background: white;
        float: right;
        width: 700;
        border-radius: 10px;
        border: 1px solid #080839;
        margin: 10px 0px;
        padding: 10px;
        box-shadow: 2px 2px 5px #121212;
}

article section a{
        text-decoration: none;
        color: black;
}

footer{
        padding: 5px;
        color: white;
        font-size: x-small;
}


.stranka{
        margin: auto;
   width: 960px;
}

.menu{
        margin: 0px;
        padding: auto;
        list-style: none;
}



.menu li a{
        float: left;
        width: 20%;
        border: 1px solid #0A0A4F;
        padding: 10px;
        background: #0D0D7C;
        margin: 0px;
}

.menu li a:hover{
        background: #EDB200;
}

.cistic{
        clear: both;
}

.clanek{
        margin-top: 1px;
        border-top: 1px solid #0A0A4F;
        border-bottom: 1px solid #0A0A4F;
}

.clanek:hover{
        background: #0E0EA6;
}

.clanek img{
        width: 100px;
        float: left;
        margin: 10px;
}

Odpovědět

8.4.2017 11:30

Matúš Petrofčík

Tvůrce

Matúš Petrofčík:8.4.2017 12:01

<div class=cistic></div>

Chýbajúce úvodzovky?

Editováno 8.4.2017 12:01

Nahoru Odpovědět

8.4.2017 12:01

obsah kocky = r^2 ... a preto vlak drnká

tomekmichalhu

Člen

tomekmichalhu:9.4.2017 10:06

už to mám já napsal width: 700 a mělo tam být width: 700px

Akceptované řešení
+5 Zkušeností

Nahoru Odpovědět

9.4.2017 10:06

Matúš Petrofčík

Tvůrce

Matúš Petrofčík:9.4.2017 10:07

No to tiež môže byť dôvod

Nahoru Odpovědět

9.4.2017 10:07

obsah kocky = r^2 ... a preto vlak drnká

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:9.4.2017 11:28

Html 5 je snad už ani nevyžaduje

Nahoru Odpovědět

9.4.2017 11:28

Neaktivní uživatelský účet

tomekmichalhu

Člen

tomekmichalhu:9.4.2017 12:03

očividně je vyžaduje víc než html 4

Nahoru Odpovědět

9.4.2017 12:03

Matúš Petrofčík

Tvůrce

Matúš Petrofčík:9.4.2017 12:08

Tak o tomto prístupe neviem.

Viem že v prípade vynechania označenia jednotky sa pri hodnotách (snáď) použije nejaká východzia (snáď px). Ale aby som tak schválne písal kód a spoliehal sa na to, či to prehliadač pochopí/nepochopí a či zvolí tú istú jednotku, na ktorú som mal na mysli aj ja, mi príde šialené.

Výnimkou je snáď len 0, kedy je jedno o akú jednotku sa jedná.

EDIT: Ahá, ty si odpovedal na úvodzovky. Tak o tom tiež neviem, ja ich všade píšem.

Editováno 9.4.2017 12:09

Nahoru Odpovědět

9.4.2017 12:08

obsah kocky = r^2 ... a preto vlak drnká

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:9.4.2017 22:08

To v každém případě

Nahoru Odpovědět

9.4.2017 22:08

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:9.4.2017 22:09

Tomu bych taky nevěřil. I kdyby to fungovalo, tak to asi není úplně good practice.

Nahoru Odpovědět

9.4.2017 22:09

Neaktivní uživatelský účet

Lava

Člen

Lava:10.4.2017 9:06

Podľa mojich informácií už dávno sa nevyžadujú úvodzovky ani v html, ani v CSS v mnohých prípadoch... v niektorých áno veru.

Nahoru Odpovědět

10.4.2017 9:06

Aspartám, sacharín, to je môj vitamín

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:10.4.2017 10:03

Tento web spravuje mocný programátor Michal Tomek.

Ano, to vidím

Nahoru Odpovědět

10.4.2017 10:03

Neaktivní uživatelský účet

Lava

Člen

Lava:10.4.2017 12:23

Teraz som si pozrel screenshoty...to fakt chce hentoto vypustiť do sveta ešte aj so "silným programátorom"?

Nahoru Odpovědět

10.4.2017 12:23

Aspartám, sacharín, to je môj vitamín

Patrik Valkovič

Tvůrce

Patrik Valkovič:10.4.2017 14:31

Ho nech, všichni jsme se nějak učili

Nahoru Odpovědět

10.4.2017 14:31

Nikdy neumíme dost na to, abychom se nemohli něco nového naučit.

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:11.4.2017 13:27

Však já na něj neútočím, jen jsem se nad tím pousmál

Nahoru Odpovědět

11.4.2017 13:27

Neaktivní uživatelský účet

tomekmichalhu

Člen

tomekmichalhu:11.4.2017 20:12

tohle tam nenechám, to jsem tam napsal jen tak dočasně for fun

Nahoru Odpovědět

11.4.2017 20:12

Nejčastěji vyhledáváné

Diskuze: HTML 5 mi rozbil layout