IT rekvalifikácia. Seniorní programátori zarábajú až 6 000 €/mesiac a rekvalifikácia je prvým krokom. Zisti, ako na to!

Diskusia – Cvičenie na úvod do CSS preprocesora SASS

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
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:2.10.2014 17:53

Článek byl přepsán a upraven. :)

Odpovedať
2.10.2014 17:53
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
jan.klapuch
Člen
Avatar
jan.klapuch:18.1.2015 9:28

Ahoj,
zkoušel jsem cvičení jedna a selhal jsem hned na začátku s umístěním rámečku na střed stránky, když jsem si stáhl kód, tak vidím, že je to řešení pouze odsazením od shora. Je vůbec možné bez použití javascriptu umístit <div class="profil"> vertikálně na střed stránky? Zkoušel jsem i metody použité zde: http://stackoverflow.com/…lly/18618259#…

ale nic mi nefunguje. Rád bych, kdyby mi to mohl ukázat někdo na příkladu "cvičení 1". Díky :)

 
Odpovedať
18.1.2015 9:28
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovedá na jan.klapuch
Honza Bittner:18.1.2015 10:19

Mohlo by to jít, když si nastavíš 100% výšku body (a html):

body,
html {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

A pak jen na ten element ostyluješ jako inline-block a nastavíš vertikální centrování.

.element {
  display: inline-block;
  vertical-align: middle;
}

Nesmíš však zapomenout přidat aj pomocný div, který bude mít následující styly.

.pomocny{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

Případně ponastavuj box-sizing na border-box, kdyby ti to dělalo neplechu... ;)

Odpovedať
18.1.2015 10:19
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
jan.klapuch
Člen
Avatar
Odpovedá na Honza Bittner
jan.klapuch:18.1.2015 10:49

Dík za rady, ale bohužel mám element vlevo nahoře. Pomocný div má obalovat element? Když jej dám dovnitř nebo ven, výsledek je stejný a zarovnání se nekoná :(

<body>

<div class="pomocny">
    <div class="element">
        <p>I'm 18 years old</p>
    </div>
</div>

</body>
body,
html {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
div {
  .pomocny {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .element {
    display: inline-block;
    vertical-align: middle;
    border: 2px solid #000000;
  }
}
 
Odpovedať
18.1.2015 10:49
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovedá na jan.klapuch
Honza Bittner:18.1.2015 11:01
<body>

<div class="pomocny"></div>
<div class="element">
  <p>I'm 18 years old</p>
</div>

</body>

Takto - ten pomocný div ti určuje střed pro vertical-align...

Odpovedať
18.1.2015 11:01
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
jan.klapuch
Člen
Avatar
Odpovedá na Honza Bittner
jan.klapuch:18.1.2015 12:01

Asi na to kašlu, nejsem schopen to rozchodit. Zkusil jsem to dá i na net, kdyby ses chtěl podívat. http://jsfiddle.net/tf9ee2hq/

 
Odpovedať
18.1.2015 12:01
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovedá na jan.klapuch
Honza Bittner:18.1.2015 12:38

Měl jsi to zabalené ve zvláštním divu, což ti efekt samozřejmě vyrušilo...
http://jsfiddle.net/tf9ee2hq/1/

Odpovedať
18.1.2015 12:38
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
jan.klapuch
Člen
Avatar
Odpovedá na Honza Bittner
jan.klapuch:18.1.2015 14:49

Ten div element jsem tam původně neměl, pak jsem ho přidal kvůli tomu, že se mi neukazovalo ani ohraničení elementu. Když u mého fiddle odstraníš ten element, tak to nepomůže. Díky tvé verzi jsem ale mohl najít skutečný problém: Ve SCSS file sem udělal toto:

div {
  .pomocny {
    ...
  }
  .element {
    ...
  }
}

compilace vytvořila

div .pomocny

Důležitá je tam ta mezera, která způsobí, že to nefunguje. Díky moc ;)

 
Odpovedať
18.1.2015 14:49
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovedá na jan.klapuch
Honza Bittner:18.1.2015 15:29

Jojo - pokud chceš mít výsledek div.pomocny tak musíš použít zástupný znak &, což značí rodičovský element.

Odpovedať
18.1.2015 15:29
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
jan.klapuch
Člen
Avatar
Odpovedá na Honza Bittner
jan.klapuch:18.1.2015 15:36

Super, díky :)

 
Odpovedať
18.1.2015 15:36
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.

Zatiaľ nikto nevložil komentár - buď prvý!