Diskuze – Lekce 17 - Stylování hlavičky HTML stránky a flexbox

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře

Billy Jackson

Člen

Billy Jackson:7.1.2016 14:22

ahoj mam problem.. moje stranka vypada takto

http://prntscr.com/9n4ze2

zde pises toto

http://prntscr.com/9n4znq

jenze ja uz u body tehle atribut mam neak nastaven z tvych predchozich tutorialu
http://prntscr.com/9n5050

takhle vypada html soubor
http://prntscr.com/9n50bf

muzes mi prosim vysvetlit kde mam chybu? sam na to asi neprijdu.. mozna je to tim ze je pred vyplatou a ja si nemoh dobit ten ucet abych si koupil ty procvicovaci lekce ale hned o vyplate to udelam.. prosim pomoz mi..

Odpovědět

7.1.2016 14:22

Petr Čech

Tvůrce

Petr Čech:7.1.2016 15:17

Tak to prostě přepiš, ne? Pokud to nebude fungovat, tak sem dej HTML a CSS kód jako text Máme tu na to tlačítko </>. Nikdy neposílej kód jako text, špatně se s tím pracuje.

Odpovědět

7.1.2016 15:17

the cake is a lie

adder

Člen

adder:7.1.2016 16:02

zkus přepsat ten

<div class="clear"> -> <div class="clear"></div>

Odpovědět

7.1.2016 16:02

I’m going to lay this brick as perfectly as a brick can be laid.

Billy Jackson

Člen

Billy Jackson:7.1.2016 16:50

prepsal jsem to a dela mi to to samy.. neco mi tam unika nebo nakou jedinou vec delam tak jak nemam a nevim o tom

poprve jsem si dost veci delal spis podle sebe ale tentokrat jsem se snazil vetsinu delat podle tutorialu.. takhle vypada kod kdyz sem ho prepsal a narazil na ten samy problem..

body
  {font-family: verdana; font-size: 14px; #1e0ffa; background:
  url('img/background/default.png'); min-width: 960px}
h1
  {text-align: center; color: #0a294b; font-family:Arial; font-size: 1.7em;
  text-shadow: 3px 3px 7px #666666}
h2
  {text-align: center; color: #0a294b; font-family:Arial; font-size: 1.4em;
  text-shadow: 3px 3px 7px #666666}
.center
  {text-align: center;}
.clear
  {clear: both;}
.left
  {float: left;}
article header
  {width: 250px; float: left; background: }
article section
  {width: 666px; float: left; border-radius: 8px;
  box-shadow: 2px 2px 7px #1c2228; background: white; padding: 20px;}

stranka ma cele pozadi zbarveno na svetle modrou s tim sumem tak jak to melo byt jenze kdyz udelam to co se pise v tomto clanku a zmenim v body background na tu tmavsi modrofialovou ci co to je za barvu tak se mi to do fialove zmeni cele ne? zkusil sem to a logicky se to stalo

dale sem zkousel v css udelat novou tridu s timto pozadim a pripojit k ni tag

<nav>

ale to vypadalo uplne jinak nez na obrazku v tutorialu a bylo to opravdu osklive.. pozadi bylo jen pod pismem..

nic dalsiho me nenapadlo

to je moje prepsane html

<!DOCTYPE html>
<html lang="cs-CZ">
  <Head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="index.css" type="text/css" />
    <title>Můj první web</title>
  </head>
  <body>
    <nav>
      <ol>
        <li><a href="index.html" class="active">Hlavní stránka</a>
        <li><a href="dovednosti.html">Dovednosti</a>
        <li><a href="kontakt.html">Kontakt</a>
      </ol>
    </nav>
    <h1 class="center">Můj první web</h1>
    <article>
      <header>
        <h2>O mě</h2>
      </header>
      <section>
        <img src="img/index/avatar.png">
        <p>Vítejte na mém prvním webu, psát weby se teprve učím, ale myslím, že mi to docela jde..</p>
        <p>Jmenuji se Billy Jackson, je mi 24let a zajímám se o IT a informatiku a proto se snažím naučit psát html..</p>
        <p>Časem bych se chtěl naučit i programovat..</p>
        <p>Mám rád hudbu a vše okolo počítačů.. zejména mě láká programování.. nepohrdnu ale ani hraním PC her..</p>
      </section>
    </article>
  </body>
</html>

Odpovědět

7.1.2016 16:50

Billy Jackson

Člen

Billy Jackson:7.1.2016 16:55

addere to je jen ukonceni obtekani textu ne? nemelo by to mit co delat s pozadim.. ale dopisu to tam asi to tam ma byt

Odpovědět

7.1.2016 16:55

Billy Jackson

Člen

Billy Jackson:7.1.2016 17:14

omlouvam se uploadoval jsem stare css.. toto je prepsane

body
  {font-family: Verdana; font-size: 14px; #1e0ffa; background:
  url('img/background/default.png'); min-width: 960px;
  text-shadow: 3px 3px 7px #1e0ffa}
h1
  {text-align: center; color: #0a294b; font-family:Arial; font-size: 1.7em;
  text-shadow: 3px 3px 7px #666666}
h2
  {text-align: center; color: #0a294b; font-family:Arial; font-size: 1.4em;
  text-shadow: 3px 3px 7px #666666}
.center
  {text-align: center;}
.clear
  {clear: both;}
article header
  {width: 250px; float: left;}
article section
  {width: 666px; float: left; border-radius: 8px;
  box-shadow: 2px 2px 7px #1c2228; background: white; padding: 18px;}

Odpovědět

7.1.2016 17:14

adder

Člen

adder:7.1.2016 19:30

No stím už se dá pracovat lépe. Jasně. Nejde ti to, protože ten obsah, ve kterém to je, nemá nastavený background. Takže article, nebo to celý obal do nějakého div a nastav tomu barvu.

A ten

<div class="clear"></div>

tam je velice důležitý, jelikož když floatuje (tzv. poživáš float: left, right;), tak se rodivčovskému se vynuluje výška. To se nesmí stát, jelikož to narušuje layout, takže bezprostředně za elementama, které mají atribut float, přidáš asi nejhorší, ale dostačujicí řešení clear. Sám mám taky trochu meze v znalostech, proč to tak vůbec je.

A jen pro příště, ukončuj každou specifikaci ve stylech středníkem a nenechávej prázdné vlasnosti a ještě k tomu bez středníku viz.

background:

Snad by mě stačit tohle řešení: https://jsfiddle.net/svakaLw4/1/

Odpovědět

7.1.2016 19:30

I’m going to lay this brick as perfectly as a brick can be laid.

Tomáš123

Člen

Tomáš123:8.1.2016 13:09

Hodnoty výšky nie sú vlastnosťou float priamo ovplyvnené. Dochádza k tomu iba následkom vyňatia floatovaného prvku z toku dokumentu. Teda po floatovaní bez explicitnej zmeny ostane u rodičovského prvku height: auto, nie height: 0.

Prázdny prvok by som nenazýval najhorším, ale najmenej elegantným riešením. Sčasti prekračuje stanovenú hranicu medzi HTML a CSS. Hoci by ostatné riešenia (teraz mi napadá iba zmena hodnoty overflowu a clearfix cez :after) vo väčšine prípadov nerobili problémy, prázdny prvok považujem za najspoľahlivejší. Nepamätám si presne, v čom malo riešenie s overflowom nedostatky, ale zdá sa mi, že to malo čosi so staršími Explorermi. Určite na to bol nejaký hack.

Odpovědět

8.1.2016 13:09

Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.

adder

Člen

adder:8.1.2016 14:38

Děkuji za objasnění. Ano, máš pravdu, nejméně elegantní. Jen pro info používám tenhle clerfix - http://nicolasgallagher.com/…earfix-hack/.

Měj se, ještě jednou děkuji.

Odpovědět

8.1.2016 14:38

I’m going to lay this brick as perfectly as a brick can be laid.

Člen

lx:22.1.2016 23:02

Jak udělat aby fungoval jako odkaz celý obdélník (v menu) a nemusel jsem se trefovat přímo na ten text? Díky

Odpovědět

22.1.2016 23:02

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

Nejčastěji vyhledáváné

Diskuze – Lekce 17 - Stylování hlavičky HTML stránky a flexbox