Diskusia – 14. diel - Obtekanie v HTML - Float, Tieň

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

Komentáre

Posledné komentáre sú na spodnej časti poslednej stránky.

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.

Odpovedať

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

Editované

Odpovedať

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;
}

Odpovedať

Š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).

Editované

Odpovedať

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;
}

Odpovedať

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.

Odpovedať

Peter Butora

Člen

Peter Butora:23.1.2018 18:59

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

Odpovedať

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>

Odpovedať

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 :)))

Odpovedať

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>

Odpovedať

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

Posledné komentáre sú na spodnej časti poslednej stránky.

Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zobrazené 10 správy z 250.

Najčastejšie vyhľadávané

Diskusia – 14. diel - Obtekanie v HTML - Float, Tieň