Diskuze: HTML5 elementy nefungují

Jan Lorenc

Člen

Jan Lorenc:6.2.2018 20:47

Zdravím, omlouvám se, jestli se to tu už řešilo, ale je tu toho už hodně, a přestože jsem hledal, nenašel sem odpověď.
Netuším proč, ale v CSS mně nejdou upravovat HTML5 elementy <header><nav><figcaption><footer> atd. Přitom deklaruji standardně: header{...styly...}. Nakonec jsem nucen je nahradit dřívějším postupem <div class="header">, který už funguje správně(nejedná se jen o rozvržení, což by vyřešilo display:block; ale celkově). Vůbec na ně editor nereaguje, jakoby vůbec nebyly v .html souboru napsány. Píši v PSPadu, nicméně typ editoru by neměl hrát roli. Nevím, ale možná to i souvisí s tím, že se tyto elementy nezobrazují fialově jako ostatní, ale červeně, stejně jako bych napsal třeba <ahoj>...alias jako neexistující element, to by to možná vysvětlovalo, ale nevím, proč to tak je a jak to zpravit.
Dále bych se chtěl zeptat, trochu bokem, ale když už sem píšu...u stylování seznamu kde <ul class="menu"> mně CSS nebere tuto deklaraci: .menu li{...styly...} ani .menu > li{} ...když dám třídu "menu" i elementům <li>, tak už v pořádku, nicméně to vypadá divně když mám class="menu" 10x za sebou v <li> elementech...proč to nechce dědit? Deklaruju selektory v tomto případě špatně?
Moc děkuji za vaše odpovědi

Odpovědět

6.2.2018 20:47

Petr Fiedler

Člen

Petr Fiedler:6.2.2018 21:09

k té druhé otázce: zkus napsat li.menu

Nahoru Odpovědět

6.2.2018 21:09

Petr Fiedler

Člen

Petr Fiedler:6.2.2018 21:12

A k té první otázce si moc nejsem jistý jak to vyřešit, ale jmenuješ elementy nově přidané v html5, jestli nějakým způsobem náhodou nepoužíváš starší verzi html.

Nahoru Odpovědět

6.2.2018 21:12

Aaa Aaa

Člen

Aaa Aaa:6.2.2018 21:20

Ahoj, ten problém s HTML5 elementy je zvláštní. V jakém prohlížeči otevíráš ten HTML soubor? Pokud by to bylo v prohlížeči, který je vestavěný v PSPadu, tak to by mohl být ten problém. Pokud používáš nějaký normální prohlížeč, tak nevím, můžeš zkusit poslat ukázku kódu. A co je špatně u toho druhého problému mě nenapadá, takže možná taky zkus poslat kód.

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

6.2.2018 21:20

Jan Lorenc

Člen

Jan Lorenc:6.2.2018 22:15

Výchozí prohlížeč mám Edge, ale zkoušel jsem i v opeře nebo chromu, každopádně už je to hezká řádka let, co HTML5 vzniklo, takže by to snad měly zvládat všechny prohlížeče, kromě jejich starších verzí.
Kód posílám jak index.html, tak .css ...některé elementy jsem ponechal, ale vesměs sem změnil na <div class=" "> nebo sem nechal oba, i když ten html5 nic nedělá třeba

<!DOCTYPE HTML>
<html lang="cs">
  <head>
  <meta charset="utf-8"/>
  <title> Bujinkan </title>
  <link rel="stylesheet" href="bujinkan.css" />
  </head>
  <body>
    <img src="kanji-bujinkan.png" id="obr-pozadi">
    <img src="kanji-bujinkan-side.png" id="obr-pozadi2" height="500">

    <div class="header">
      <nav role="navigation">
      <ul class="zahlavi-odkazy">
      <li> <a class="zahlavi-odkazy" href="index.html"> Hlavní stránka </a> </li>
      <li> <a class="zahlavi-odkazy" href="Bujinkan-v-CR/Bujinkan-v-CR.html"> Bujinkan v ČR </a> </li>
      <li> <a class="zahlavi-odkazy" href="Skoly/Skoly.html"> Školy </a> </li>
      <li> <a class="zahlavi-odkazy" href="Soke/Soke.html"> Sóke </a> </li>
      <li> <a class="zahlavi-odkazy" href="Valecnici/Valecnici.html"> Staří válečníci </a> </li>
      <li> <a class="zahlavi-odkazy" href="Zbrane/Zbrane.html"> Zbraně </a> </li>
      <li> <a class="zahlavi-odkazy" href="Stupne/Stupne.html"> Technické stupně </a> </li>
      <li> <a class="zahlavi-odkazy" href="Techniky/Techniky.html"> Techniky </a> </li>
      </ul>
      </nav>
    </div>

    <div class="stranka">
    <h1> <strong>Bujinkan Budo Taijutsu</strong> </h1>
    <div id="hlavni-obsah-v-index">

    <article>
    <p>Jedná se o bojové umění, pocházející z Japonska, jehož kořeny sahají o více
       než tisíc let zpět do historie. Toto bojové umění bylo používáno dvěma sortami
       bojovníků, jimiž jsou celosvětově známí ninjové a samurajové. Leč umění obsahující
       v Bujinkanu dosahuje značného stáří, uskupení škol tvořící Bujinkan dnes a jeho
       pojetí jako celku se uskutečnilo až v druhé polovině 20. století. </p>
    <p>Slovo <em>Bujinkan</em> v sobě významově zahrnuje tři části: BU - válka, boj, válečník;
       JIN - bůh, božstvo; KAN - společnost, svazek. Když se to spojí dohromady,
       dal by se Bujinkan volně přeložit jako společenství božích válečníků.
       Tento název vznikl před téměř třemi desítkami let, kdy sóke Masaaki Hatsumi
       poprvé předvedl trénink za hranicemi Japonska. Od té doby se začaly konat
       pravidelně několikrát do roka tréninky v Evropě a Americe, které dostaly název
       Tai Kai (velké setkání). Bujinkan jako takový je instituce skládající se z devíti škol,
       jež byly předány <em>Takamatsu Senseiem</em> Dr. <em>Masaaki Hatsumimu</em> s titulem sóke. </p>
    <p>V sedmdesátých letech minulého století se Bujinkan poprvé prezentoval světu díky
       technikám ninjutsu. Souviselo to především s ohromným nárůstem publicity všeho,
       co mělo nějakou souvislost s pojmem ninja. Bohužel z této doby také pramení mylné
       představy, které v lidech vyvolal tisk a filmový průmysl, neboť pochopení těchto
       bojových umění nespočívá v krkolomných kouscích předváděných na obrazovkách.
       Dr. Hatsumiho stálo velké úsilí udržet těmto školám s tisíciletou tradicí status,
       jaký si zasluhovaly, musel jít proti zkresleným a nesprávným představám filmových
       tvůrců a žurnalistů, kteří většinou ninji představovali pouze jako žoldáky či číhající
       zabijáky a ne jako lidi, kteří uměli žít v míru a být vážení a respektovaní.</p>
    <p>V roce 1995, po letech práce a šíření těchto bojových umění po celém světě, dal Dr. Hatsumi
       svému učení souhrnný název Budó Taijutsu, který poukazuje na fyzické a duševní techniky
       nezbytné ke studiu těchto bojových umění.</p>

      <figure><img src="Bujinkan-znak.png" heigth="250" width="250" alt="Znak Bujinkanu" title="Znak Bujinkanu">
            <figcaption><span class="popisek-obrazku">Znak Bujinkanu</span></figcaption>
      </figure>

      <figure><img src="Bujinkan-uvodni-stranka.jpg" heigth="250" width="500" alt="Fotka z tréninku">
            <figcaption><span class="popisek-obrazku">Sóke ukazující techniku</span> </figcaption>
      </figure>
    </article>

    </div>

    <div id="postranni-panel-index">
      <aside>
      <p id="postranni">Navštivte také oficiální stránky <abbr title="Bujinkan Czech Dojo"> BCD</abbr>:
      <a href="http://www.bujinkan.cz" rel="external" target="Bujinkan.cz"> Bujinkan.cz </a> nebo stránky
      <a href="http://www.bujinkanprague.com" rel="external" target="Bujinkan-Praha.cz"> Pražského <span title="Dojo - označení pro školu bojových umění"</span> doja </a> <br>
      <img src="ninja.png" class="obrazek-v-aside" width="210" alt="Ninja"></p>
      </aside>
    </div>
    </div>

    <div class="footer">
      <adress> Kontakt na autora stránek: <a href="[email protected]"> [email protected] </a>
    </div>

  </body>
</html>

CSS dokument:

@charset "UTF-8";

body {
      background: black;
      font: 1em "Times New Roman", Arial, sans-serif;
      color: white;
     }

/* -------- STYLY PÍSMA --------*/

h1,h2{
     color:rgb(220,220,220);
     text-align: center;
     }
h1,h2,h3,h4{margin-bottom: 3px;}
h1{
  font-size: 2em;
  }

h2{
  font-size: 1.5em;
  }

h3{
  font-size: 1.25em;
  color:rgb(220,220,220);
  }

h4{
  font-style: italic;
  font-weight: normal;
  text-decoration: underline;
  margin-top: 5px;
  }

em{font-style:normal;}
strong{font-weight: normal;}
abbr{text-decoration:none;}

p{
  text-indent: 1.1em;
  text-align: justify;
  margin-bottom: 0%;
  margin-top: 5px;
 }
.postranni-panel{text-align: justify;}
a{
 font-style:normal;
 color: rgb(240,255,128);
 }
a:focus, a:hover,a:active{font-style:normal;}
a.zahlavi-odkazy {
                font-size:1.25em;
                text-decoration: none;
                padding: 5px 1px 5px;
                color: rgb(24,24,24);
                }
a.zahlavi-odkazy:focus, a.zahlavi-odkazy:hover, a.zahlavi-odkazy:active
                 {
                 background: rgb(247,247,247);
                 padding: 5px 1px 5px;
                 }

a.odkazy-zbrane{
                font-size:1.15em;
                text-decoration: none;
                padding: 5px 2px 5px 2px;
                color: white;
                }
a.odkazy-zbrane:focus, a.odkazy-zbrane:hover, a.odkazy-zbrane:active
                {
                 background: rgb(37,37,37);
                 padding: 5px 2px 5px;
                 }

.popisek-obrazku{
                clear:both;
                font-style: italic;
                }


/* -------- ROZVRŽENÍ STRÁNKY --------*/

article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section,div
{display: block;}

.stranka{
        background:rgb(27,27,27);
        width:58%;
        margin: 0% 20%;
        padding: 16px;
        }
.header{
        height: 275px;
        width:58%;
        margin: 1% 20% 0%;
        padding: 0px 32px 0px 0px;
        background:url(zahlavi.jpg);
        }
.footer{
       background:rgb(16,16,16);
       width:58%;
       margin: 0% 20% 1%;
       clear:both;
       padding: 16px;
       }

#hlavni-obsah-v-index{
                    background:rgb(27,27,27);
                    float:left;
                    width: 75%;
                    padding: 16px;
                    }
#hlavni-obsah-v-cbd{
                    background:rgb(27,27,27);
                    float:left;
                    width: 75%;
                    }
#hlavni-obsah-s-masaakim{
                    background:rgb(27,27,27);
                    float:left;
                    width: 55%;
                    }

#postranni-panel-index{
                      background:rgb(34,34,34);
                      width:20%;
                      height:500px;
                      margin-left:78%;
                      padding:8px;
                      }
#postranni-panel-cbd{
                      background:rgb(34,34,34);
                      width:20%;
                      height:700px;
                      margin-left:78%;
                      padding:8px;
                      }
#postranni-panel-takamacu{
                          background:rgb(34,34,34);
                          width:40%;
                          height:850px;
                          margin-top:75px;
                          margin-left:58%;
                          padding:8px;
                          }

.footer,h1, h2, h3{clear:left}
.obrazek{
        float:left;
        margin: 5px 10px 3px 0px;
        }
.obrazek-v-aside{
                text-align:center;
                margin: 65% 2% 4%;
                }
#obr-pozadi{
            float: left;
            height: 11%;
            width: 11%;
            margin: 1% 4% 0% ;
           }
#obr-pozadi2{
            float: right;
            margin: 360px 120px 0px 0px;
           }
ul{
  list-style-type: none;
  margin:0px;
  }
.zahlavi-odkazy li{
                  background: rgb(199,199,199);
                  float:left;
                  padding: 5px 1px 5px;
                  margin: 240px 0px;
                  }
ul.odkazy-zbrane{margin:0% 15%}
ul.odkazy-zbrane li{
                  background: black;
                  float:left;
                  padding: 5px 2px 5px 2px;
                  }
figure {
  display: table;
}
figcaption {
  display: table-caption;
  caption-side: top;
  text-align: center;
}

Nahoru Odpovědět

6.2.2018 22:15

Jan Lorenc

Člen

Jan Lorenc:6.2.2018 22:19

Petr Fiedler ...li.menu nepomohlo

Nahoru Odpovědět

6.2.2018 22:19

Aaa Aaa

Člen

Aaa Aaa:6.2.2018 22:37

Jo, klasické prohlížeče by s tím neměly mít problém. Myslel jsem jen konkrétně ten vestavěný v PSPadu, protože ten není zrovna nejlepší. Ale zkoušel jsem ten kód a i když v css dám aside místo .postranni-panel, tak to funguje a i další tagy fungují. A i u toho seznamu není problém smazat u těch odkazů class a funguje to. Takže bych asi zkusil hledat jiný problém, než jen v kódu, ale popravdě nic mě nenapadá.

Nahoru Odpovědět

6.2.2018 22:37

Petr Fiedler

Člen

Petr Fiedler:6.2.2018 22:57

To je zvláštní, že to nepomohlo... :/ tady mám odkaz, ve kterém to funguje:
https://codepen.io/anon/pen/aqmYww

Nahoru Odpovědět

6.2.2018 22:57

Petr Fiedler

Člen

Petr Fiedler:6.2.2018 23:29

Zkus založit novej dokument (klidně můžeš použít lepší editor) a zkontroluj si, jakou tam máš verzi html. Potom tam prostě překopíruj kódy.

Nahoru Odpovědět

6.2.2018 23:29

Jan Lorenc

Člen

Jan Lorenc:7.2.2018 15:39

Tož ty elementy skutečně byly chybou PSPadu a jeho prohlížečem, v Notepadu a jinde ty html5 tagy fungují v pořádku, nicméně ty záznamy furt nevím

<ul class="zahlavi-odkazy">
      <li> <a class="zahlavi-odkazy" href="index.html"> Hlavní stránka </a> </li>
      <li> <a class="zahlavi-odkazy" href="Bujinkan-v-CR/Bujinkan-v-CR.html"> Bujinkan v ČR </a> </li>
      <li> <a class="zahlavi-odkazy" href="Skoly/Skoly.html"> Školy </a> </li>
      <li> <a class="zahlavi-odkazy" href="Soke/Soke.html"> Sóke </a> </li>
      <li> <a class="zahlavi-odkazy" href="Valecnici/Valecnici.html"> Staří válečníci </a> </li>
      <li> <a class="zahlavi-odkazy" href="Zbrane/Zbrane.html"> Zbraně </a> </li>
      <li> <a class="zahlavi-odkazy" href="Stupne/Stupne.html"> Technické stupně </a> </li>
      <li> <a class="zahlavi-odkazy" href="Techniky/Techniky.html"> Techniky </a> </li>
      </ul>

CSS

.zahlavi-odkazy li{
                  background: rgb(199,199,199);
                  float:left;
                  padding: 5px 1px 5px;
                  margin: 240px 0px;
                  }

když oddělám od elementu <li> tu třídu, tak už to nefunguje, přitom by to mělo dědit tu třídu z <ul>
...petr fiedler - ani v jiným editoru mě to nefungovalo

Nahoru Odpovědět

7.2.2018 15:39

Aaa Aaa

Člen

Aaa Aaa:7.2.2018 16:22

Znovu jsem to zkoušel a, i když smažu ty třídy, tak mi to bez problému funguje. Můžeš se na to podívat i tady.

Nahoru Odpovědět

7.2.2018 16:22

Jan Lorenc

Člen

Jan Lorenc:7.2.2018 19:25

Vyřešeno, měl jsem špatně deklarovaný styl na odkazy, takže se to vzájemně rušilo, proto to vypadalo, že to nefunguje, ale ono to jen fungovalo špatně...díky moc všem za odpovědi

Nahoru Odpovědět

7.2.2018 19:25

Nejčastěji vyhledáváné

Diskuze: HTML5 elementy nefungují