Avatar
mat.masar
Člen
Avatar
mat.masar:

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. března 19:56
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na mat.masar
Honza Bittner:

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. března 20:45
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
mat.masar
Člen
Avatar
Odpovídá na Honza Bittner
mat.masar:

Ty to zrovna pochopíš asi nejlíp :D 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. března 22:29
Avatar
Martin Štěpánek (Enormyk):

Jo na to potřebuješ js :-)

Nahoru Odpovědět 12. března 23:19
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
mat.masar
Člen
Avatar
Odpovídá na Martin Štěpánek (Enormyk)
mat.masar:

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

 
Nahoru Odpovědět 12. března 23:25
Avatar
Martin Štěpánek (Enormyk):
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. března 23:31
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na mat.masar
Tomáš123:

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. března 13:01
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
mat.masar
Člen
Avatar
Odpovídá na Tomáš123
mat.masar:

Š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. března 13:52
Avatar
Tomáš123
Člen
Avatar
Tomáš123:

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. března 14:35
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
mat.masar
Člen
Avatar
Odpovídá na Tomáš123
mat.masar:

Po delší pauze :D

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

 
Nahoru Odpovědět 15. března 17:40
Avatar
Tomáš123
Člen
Avatar
Odpovídá na mat.masar
Tomáš123:

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. března 18:53
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
Tomáš123
Člen
Avatar
Odpovídá na mat.masar
Tomáš123:

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. března 18:58
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
mat.masar
Člen
Avatar
Odpovídá na Tomáš123
mat.masar:

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. března 20:01
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na mat.masar
Jiří Gracík:

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. března 21:55
Creating websites is awesome till you see the result in another browser ...
Avatar
Jiří Gracík
Redaktor
Avatar
Odpovídá na mat.masar
Jiří Gracík:

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

Nahoru Odpovědět 15. března 21:56
Creating websites is awesome till you see the result in another browser ...
Avatar
Tomáš123
Člen
Avatar
Odpovídá na mat.masar
Tomáš123:

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. března 9:20
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
mat.masar
Člen
Avatar
Odpovídá na Tomáš123
mat.masar:

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. března 18:07
Avatar
Tomáš123
Člen
Avatar
Odpovídá na mat.masar
Tomáš123:

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 getElementsBy­TagName. Aj tak mi ale príde rozumnejšie využiť metódu getElementById().

Nahoru Odpovědět 16. března 18:31
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
mat.masar
Člen
Avatar
Odpovídá na Tomáš123
mat.masar:

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. března 14:42
Avatar
Martin Štěpánek (Enormyk):

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

Nahoru Odpovědět 18. března 14:58
Nesnáším, když někdo u if nepoužívá {}, byť se jedná o jeden řádek.
Avatar
mat.masar
Člen
Avatar
Odpovídá na Martin Štěpánek (Enormyk)
mat.masar:

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

 
Nahoru Odpovědět 18. března 16:29
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.