NOVINKA: Začni v IT jako webmaster s komplexním akreditovaným online kurzem Tvůrce WWW stránek. Zjisti více:
NOVINKA: Staň se datovým analytikem od 0 Kč a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:

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
Nejnovější komentáře jsou na konci poslední stránky.
Avatar
Billy Jackson
Člen
Avatar
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..

Avatar
Petr Čech
Tvůrce
Avatar
Odpovídá na Billy Jackson
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
the cake is a lie
Avatar
adder
Člen
Avatar
Odpovídá na Billy Jackson
adder:7.1.2016 16:02

zkus přepsat ten

<div class="clear"> -> <div class="clear"></div>
Odpovědět
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Billy Jackson
Člen
Avatar
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>
Avatar
Billy Jackson
Člen
Avatar
Odpovídá na adder
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

Avatar
Billy Jackson
Člen
Avatar
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;}
Avatar
adder
Člen
Avatar
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
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na adder
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
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
adder
Člen
Avatar
Odpovídá na Tomáš123
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
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
lx
Člen
Avatar
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 :D

Nejnovější komentáře jsou na konci poslední stránky.
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.