Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: HTML 5 mi rozbil layout

Aktivity
Avatar
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
Avatar
Odpovídá na tomekmichalhu
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á
Avatar
tomekmichalhu:9.4.2017 10:06

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

Akceptované řešení
+5 Zkušeností
Řešení problému
 
Nahoru Odpovědět
9.4.2017 10:06
Avatar
Odpovídá na tomekmichalhu
Matúš Petrofčík:9.4.2017 10:07

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

Nahoru Odpovědět
9.4.2017 10:07
obsah kocky = r^2 ... a preto vlak drnká
Avatar
Odpovídá na Matúš Petrofčík
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
Avatar
tomekmichalhu:9.4.2017 12:03

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

 
Nahoru Odpovědět
9.4.2017 12:03
Avatar
Odpovídá na Neaktivní uživatel
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á
Avatar
Odpovídá na tomekmichalhu
Neaktivní uživatel:9.4.2017 22:08

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

Nahoru Odpovědět
9.4.2017 22:08
Neaktivní uživatelský účet
Avatar
Odpovídá na Matúš Petrofčík
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
Avatar
Lava
Člen
Avatar
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
Avatar
Odpovídá na tomekmichalhu
Neaktivní uživatel:10.4.2017 10:03

Tento web spravuje mocný programátor Michal Tomek.

Ano, to vidím :D

Nahoru Odpovědět
10.4.2017 10:03
Neaktivní uživatelský účet
Avatar
Lava
Člen
Avatar
Odpovídá na Neaktivní uživatel
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
Avatar
Odpovídá na Neaktivní uživatel
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.
Avatar
Odpovídá na Patrik Valkovič
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
Avatar
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
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.