Diskuze – Lekce 14 - Obtékání v HTML - Float, Stín

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

Michal Martinec

Člen

Michal Martinec:1.5.2017 23:06

Ja to tiez nemam biele. Respektive nemusim pouzivat clear na to, aby to bolo spravne. Skusal som to aj v roznych prehliadacoch a vysledok, bol vsade rovnaky. Pouzivam SublimeText 3. Clanok je starsieho data a mozno sa odvtedy zmenil nejaky HTML 5 standard a uz nie je potrebne ukoncovat obtekanie. Tazko povedat.

Odpovědět

1.5.2017 23:06

Neporovnavaj sa s ostatnymi. Porovnavaj sa sam so sebou.

Fíla N.

Člen

Fíla N.:22.7.2017 23:05

Ahoj,
dotaz k <div class="cistic"></div> .
Není nic proti ničemu psát <div class="cistic" /> , nebo by se tam měl nacpat i ten druhý tag?
Je to sice párový tag, ale když tam nic není, tak jestli je to nutné tam psát z nějakého důvodu (protože je prostě párový, nebo něco...)
Díky

Editováno 22.7.2017 23:07

Odpovědět

22.7.2017 23:05

Martin Hudec

Člen

Martin Hudec:11.11.2017 20:05

Kde mám chybu ?
<!DOCTYPE html>
<html lang="cs-cz">

<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styl.css" type="text/css" />
<title>Hasiči osečná</title>

</head>

<body>
<article>
<header>
<h1> Hasiči osečná<h1>
<div id="logo">znak</div>
<nav>
<ul>
<li class="aktivni"><a href="#">akce</a></li>
<li><a href="#">není</a></li>
<li><a href="#">není</a></li>
<li><a href="#">není</a></li>
<li><a href="#">není</a></li>
</ul>
</nav>
</header>

</body>
</html>

h1 {
text-align: center;
color: green;
}
.logo {
text-align: center;
}
.znak {
text-aling: left;
}

article > header {
}
article header {
width: 250px;
float: left;
}
article section {
width: 666px;
float: left;
background: white;
border: 2px solid #006797;
box-shadow: 2px 2px 7px #1c2228;
padding: 20px;
}
.cistic {
clear: both;
.vlevo {
float: left;
}
}
body {
background: url('obrazky/pozadi_sede.png') #1c2228;
margin: 0px;
font: 14px Verdana;
min-width: 960px;
}

Odpovědět

11.11.2017 20:05

Štěpán Halíř

Člen

Štěpán Halíř:11.11.2017 23:45

Ahoj,
bylo by dobré pro příště alespoň trochu víc uvést, kde je problém, případně dodat screen obrazovky. Nezapomeň už příště vložit tvůj kód do patřičného kódu, který to tu naformátuje. Je to lépe čitelné.
Když takhle koukám, tak vidím, že styl "logo" máš použito pro class i id. ID je jedinečný prvek na stránce.
V CSS vidím dvě složené závorky za sebou (po třídě "cistic" nebyla ukončena).

Editováno 11.11.2017 23:47

Odpovědět

11.11.2017 23:45

Igor

Člen

Igor:19.11.2017 22:23

čaute, vedeli by ste mi poradiť prečo sa mi tretí riadok zarovnáva akoby na stred? prikladám zdrojový kód:

<!DOCTYPE html>

<html lang="cs-cz">
          <head>
                 <link rel="stylesheet" href="style.css" type="text/css" />
                 <meta charset="utf-8" />
                 <title>Opakovanie</title>
          </head>
  <body>
         <article>
                  <header>
                           <h1>O mne</h1>
                  </header>

                  <section>
                           <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 class="centrovany"><img src="avatar.png" alt="Programátor HoBi" class="vlavo" />Jmenuji se Honza Bittner a je mi 16 let.
                           Chodím na Střední průmyslovou školu v České Lípě na obor IT. Kontaktovat mě můžete na <a href="kontakt.html">kontaktní stránce</a>.</p>
                           <p>Rád čtu a někdy (hlavně v létě) i sportuju.</p>
                           <div class="cistic"></div>
                           <p>Mým hlavním koníčkem (a doufám že jednou i zaměstnáním) je <strong>programování</strong>!</p>
                  </section>
            <div class="cistic"></div>
  </body>
</html>

/* CSS Document */
h1 {
  text-align: center;
  text-shadow: 3px 3px 5px #FF100A;
  color: white;
  font-weight: normal;
  font-size: 2em;
}

.centrovany {
  text-align:center;
}

article {
  background: url('pozadi.png') #009aca;
}

article header {
  float: left;
  width: 250px;
}

article section {
  float: left;
  width: 710px;
  background: white;
}

.cistic {
  clear: both;
}

.vlavo {
  float: left;
}

Odpovědět

19.11.2017 22:23

Igor

Člen

Igor:20.11.2017 10:26

už som na to prišiel, mal som ho v classe s obrázkom ktorý som mal nastavený na stred.

Odpovědět

20.11.2017 10:26

Peter Butora

Člen

Peter Butora:23.1.2018 18:59

čau :/
Nevíte proč mi to dělá tohle (tu modrou čáru nad h1)

Odpovědět

23.1.2018 18:59

Důležité je se nevzdávat...

Peter Butora

Člen

Peter Butora:23.1.2018 19:04

A ještě taky nevím co je to <div>

Odpovědět

23.1.2018 19:04

Důležité je se nevzdávat...

Peter Butora

Člen

Peter Butora:23.1.2018 19:05

Jakmile jsem použil ten čistič co ukončil plovoucí obsah zmizlo to :)))

Odpovědět

23.1.2018 19:05

Důležité je se nevzdávat...

Peter Butora

Člen

Peter Butora:23.1.2018 19:16

Ahoj už mám další problém
tentokrát mi to nevykresluje pozadí za nádpisem...
přikládám kody + obrazek
CSS

article header {
width: 250px;
float: left;
background: white;
}

article section {
width: 710px;
float: left;
background: white;
}

.cistic {
clear: both;
}

article {
background: url('pozadi.png') #009aca;
}

h1 {
font-size: 2em;
font-weight: normal;
color: white;
text-align: center;
text-shadow: 2px 2px 1px #0a294b;
}

.centrovany {
text-align: center;
}

HTML

<!DOCTYPE html>
<html lang="cs-cz">
<head>
                <meta charset="utf-8">
                <link rel="stylesheet" href="styl.css" type="text/css" />
                <title>Petikovo portfolio</title>
</head>
<body>

<article>
    <header>
    <h1>Můj první web</h2>
    </header>

  <section>

  <p>Vítejte na mém prvním webu, myslím že psaní webu my docela jde :D</p>
  <p class="centrovany">
  <img src="photo.jpg" alt="petik" />
  </p>
  <h2>O mně</h2>
  <p>Moje přezdívka je Petik a je mi 13let. Chodím na základní školu ČSA v <strong>Bohumíně</strong>
  <a href="https://en.wikipedia.org/wiki/Bohum%C3%ADn">Info o Bohumíně</a></p>

  </section>
  <div class="cistic"></div>
</article>

</body>
</html>

Odpovědět

23.1.2018 19:16

Důležité je se nevzdávat...

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 250.

Nejčastěji vyhledáváné

Diskuze – Lekce 14 - Obtékání v HTML - Float, Stín