Diskuze: Zjištění výšky

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity

mat.masar

Člen

mat.masar:12.3.2016 19:56

Ahoj, dá se přes css zjistit výška elementu a podle něj nastavit hodnotu height? Nebo je na to potřeba js?

Odpovědět

12.3.2016 19:56

Honza Bittner

Tvůrce

Honza Bittner:12.3.2016 20:45

Záleží na konkrétním problému, ale obecně v CSS pouze nastavuješ. Pravděpodobně budeš muset využít JS.

Nahoru Odpovědět

12.3.2016 20:45

FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.

mat.masar

Člen

mat.masar:12.3.2016 22:29

Ty to zrovna pochopíš asi nejlíp Mám pevně danou výšku elementu(header) a v tom je sticky menu. Jenže když je zařízení menší výška zůstává stejná, chtěl jsem nastavovat výšku podle výšky obrázku(ten má width 100% takže se mění) napřesno a ne to dělat přes media. Na to je asi potřeba js, že?

Nahoru Odpovědět

12.3.2016 22:29

Martin Štěpánek

Tvůrce

Martin Štěpánek :12.3.2016 23:19

Jo na to potřebuješ js :-)

Nahoru Odpovědět

12.3.2016 23:19

Všechno jde naprogramovat, chce to jen čas a chuť...

mat.masar

Člen

mat.masar:12.3.2016 23:25

Achjo, js nějak nechápu...i pres přečtení zakladu a zakladu jquery, ale diky

Nahoru Odpovědět

12.3.2016 23:25

Martin Štěpánek

Tvůrce

Martin Štěpánek :12.3.2016 23:31

window.onload = function() {
var vyska = document.getElementById("obrazek").style.height;
document.getElementById("menu").style.height = vyska;
} ;

Obrázku nastav id obrazek a menu nastav id menu.
Snad je to správně, i když ne zrovna elegantně (píšu to na mobilu) :-)

Nahoru Odpovědět

12.3.2016 23:31

Všechno jde naprogramovat, chce to jen čas a chuť...

Tomáš123

Člen

Tomáš123:13.3.2016 13:01

Ak by ti stačilo zachovávať proporcie prvku, využi percentuálnej hodnoty paddingu. Tá sa vždy počíta od šírky prvku.

div {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

vytvorí presný štvorec... Za height si môžeš dať aj inú hodnotu. Slúži ako akýsi modifikátor. Pohraj sa s tým a sám uvidíš.

Otázkou je, či toto je to, čo požaduješ. Podľa obrázku úplne inde v dokumente výšku nenastavíš. Ak by si poznal pomer jeho strán, týmto to môžeš simulovať.

Nahoru Odpovědět

13.3.2016 13:01

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

mat.masar

Člen

mat.masar:13.3.2016 13:52

Špatně jsem se vyjádřil. V hlavičce je fotka a menu. Je to v jednom,elementu a tomu potrebuju zmenšovat výšku.

Nahoru Odpovědět

13.3.2016 13:52

Tomáš123

Člen

Tomáš123:13.3.2016 14:35

A kde je problém? Ak je všetko v jednom prvku, na čo potrebuješ zisťovať a nastavovať výšku? Niečo sa tam napočíta: http://kod.djpw.cz/djvb... Skús si zmenšovať okno. Mení sa aj výška divu.obal bez toho, aby trebalo niečo počítať. Ak nechceš používať img, ale iný prvok, ktorému nastavíš pozadie v CSS, použi ten hack: http://kod.djpw.cz/ejvb.

Ak chceš vidieť ukážky na celej obrázovke, pridaj si za adresu mínusko.

Nahoru Odpovědět

13.3.2016 14:35

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

mat.masar

Člen

mat.masar:15.3.2016 17:40

Po delší pauze

No já asi nevím jak to popsat.. Snad pomůže když se podíváš na live verzi. www.matmasar.wz.cz
Když si zmenšíš okno tak je tam mezera, protože header má nastavenou výšku 225px, aby to při smooth scrollu( a sticky menu ) neškubal. Zkus si to v prvku vypnout, třeba poochopíš jak to myslím

Nahoru Odpovědět

15.3.2016 17:40

Tomáš123

Člen

Tomáš123:15.3.2016 18:53

Spôsobuje to fixne nastavená výška prvku #menu.

Ja by som to pozadie nastavil prvku #menu, vymazal odtiaľ <img> (na dekoračné účely slúži CSS) a navigáciu absolútne napozicioval naspod. Nejako takto: http://kod.djpw.cz/pkvb

Bohužiaľ, je nutné poznať proporcie a hodnotu nastavovať pre dva prvky (prípadne si spoj dva selektory, aby bolo pohodlnejšie hodnotu zmeniť).

Neviem, či v CSS existuje riešenie, ktoré by nevyžadovalo poznať rozmery obrázku a bolo všeobecne funkčné. Súčasné má aspoň dobrú podporu.

Nahoru Odpovědět

15.3.2016 18:53

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

Tomáš123

Člen

Tomáš123:15.3.2016 18:58

Pozerám, že navigáciu máš na spodnej hrane hlavičky. To by šlo takto: http://kod.djpw.cz/qkvb

Deklarácia top: 100% zariadi, že sa prvok napoziciuje presne na spodnú hranu (najbližšieho nadradeného) obmedzujúceho bloku (div.hlavicka).

Nahoru Odpovědět

15.3.2016 18:58

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

mat.masar

Člen

mat.masar:15.3.2016 20:01

No já vím. Samozřejmě, že by se to dalo předělat do css ale tím bych si stejně problém nevyřešil.

Nahoru Odpovědět

15.3.2016 20:01

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:15.3.2016 21:55

Jde to bez Javascriptu, obrázek můžeš nastavit jako pozadí a nastavit mu background-size na cover. To funguje fajn

Nahoru Odpovědět

15.3.2016 21:55

Neaktivní uživatelský účet

Neaktivní uživatel

Tvůrce

Neaktivní uživatel:15.3.2016 21:56

S tím ještě souvisí background position center center Možná funguje i jeden center, nechce se mi to teď hledat

Nahoru Odpovědět

15.3.2016 21:56

Neaktivní uživatelský účet

Tomáš123

Člen

Tomáš123:16.3.2016 9:20

Podľa mňa tu bolo nastienené funkčné riešenie bez JavaScriptu... Je taký problém poznať proporcie obrázku? V tvojom prípade, by si potreboval odsadiť o presne 16,625%...

Ak máš v pláne obrázok meniť, meraj si JavaScriptom výšku divu.hlavicka + výšku .nav a nastav to ako horný margin obsahovej časti.

Nahoru Odpovědět

16.3.2016 9:20

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

mat.masar

Člen

mat.masar:16.3.2016 18:07

Jestli si to myslel takhle

window.onload = function() {
var vyskaHeaderu = document.getElementByTagName("header");
var vyska = vyskaHeaderu.offsetHeight();
document.getElementById("Reference-weby").style.marginTop = vyska;
} ;

Tak to nefunguje, nevím jak jinak si to myslel.

Nahoru Odpovědět

16.3.2016 18:07

Tomáš123

Člen

Tomáš123:16.3.2016 18:31

V tvojom headeri je predsa obrázok poziciovaný. Musíš merať výšku obrázku. Myslel som, že budeme vychádzať z môjho kódu.

Inak, myslím, že existuje iba getElementsByTagName. Aj tak mi ale príde rozumnejšie využiť metódu getElementById().

Nahoru Odpovědět

16.3.2016 18:31

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

mat.masar

Člen

mat.masar:18.3.2016 14:42

Díky, výsledný fungující kód

window.onload = function() {
var vyskaHeaderu = document.getElementById("zahlavi");
var vyska = vyskaHeaderu.offsetHeight;
document.getElementById("menu").style.height = vyska;
} ;

Akorád, když měníš šířku okna, tak to nefunguje, protože se js neaktualizuje(to stejné s pozicí navu). Nedá se nějak při změně šířky aktualizovat js?

Nahoru Odpovědět

18.3.2016 14:42

Martin Štěpánek

Tvůrce

Martin Štěpánek :18.3.2016 14:58

Není to snad to samé, co jsem psal já? :-D

Nahoru Odpovědět

18.3.2016 14:58

Všechno jde naprogramovat, chce to jen čas a chuť...

mat.masar

Člen

mat.masar:18.3.2016 16:29

No asi jo, ale když jsem pozměnil ten tvůj, jak jsi psal, tak to nefungovalo tak nevím

Nahoru Odpovědět

18.3.2016 16:29

Naučíme tě pracovat na home-office.

Zjistit více...

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