Responsive HTML/CSS a problém s výškou

9. 6. 2014 15:02:44

Zdravím,

vždy se trápím s jednou věcí u responsive kodování, a to s výškou prvků :(

všechny prvku koduji v %, na šířku je to OK, počítá to ze šířky monitoru a sedí to, na výšku už nikoliv, výška je také počítána se šířky monitoru, a tedy pokud se mění výška okna web zůstává stejný, má otázka tedy zní jak docílit toho, aby se měnila i výška :o

9. 6. 2014 15:02:44

https://webtrh.cz/diskuse/responsive-html-css-a-problem-s-vyskou#reply1030538

sqrt

9. 6. 2014 15:18:41

Proč by se měla měnit výška? Jako jediný důvod mě napadá nějaký hodně specifický layout. Tohle budeš muset nejdřív nějak upřesnit, nejlíp odkaz nebo aspoň obrázek.

9. 6. 2014 15:18:41

https://webtrh.cz/diskuse/responsive-html-css-a-problem-s-vyskou#reply1030537

node

(5 hodnocení)

9. 6. 2014 15:32:11

vyska vzdy zalezi od obsahu, preto su byvali dtp-ckary zli grafici :)

co sa responzivneho dizjanu a vysky tyka, tak na to tu mas prave tie brejkpojnty kedy sa ti jednotlive prvky zacnu radit pod seba.

9. 6. 2014 15:32:11

https://webtrh.cz/diskuse/responsive-html-css-a-problem-s-vyskou#reply1030536

Tomáš Lach

(1 hodnocení)

9. 6. 2014 16:01:11

Můžeš zkusit jednotky vh (výška) nebo vw (šířka). Ale podpora v prohlížečích asi nebude vysoká (nezkoumal jsem). Zkoušel jsem tyhle jednotky jen jednou u jedné specifické záležitosti, která se mi podařila nakonec vyřešit přes % šířku a výšku.

Ale jak už bylo psáno spíše zkus nastínit svůj konkrétní problém třeba se najde jiné řešení :)

9. 6. 2014 16:01:11

https://webtrh.cz/diskuse/responsive-html-css-a-problem-s-vyskou#reply1030535

rak.marius

(7 hodnocení)

9. 6. 2014 16:22:28

Niekde som sa dočítal, že ak je výška zadaná v % tak sa vypočítava zo šírky elementu. Aj keď je to úplná sprostosť, je to tak podľa špoecifikácie. Takže musíš si vymyslieť iný spôsob. Neručím, že je to 100% pravda, radšej si pozri nejaké články k tomu.

9. 6. 2014 16:22:28

https://webtrh.cz/diskuse/responsive-html-css-a-problem-s-vyskou#reply1030534

domju

(6 hodnocení)

9. 6. 2014 16:50:04

min-width: 100%; height: auto;

9. 6. 2014 16:50:04

https://webtrh.cz/diskuse/responsive-html-css-a-problem-s-vyskou#reply1030533

Fido123

(13 hodnocení)

9. 6. 2014 17:45:01

Taky moc nerozumím tomu, proč chceš měnit výšku prvků. Někde ten obsah přece nacpat musíš, čili když se zmenší šířka, musí se zvětšit výška a ta se zvětší automaticky. Já když dělám responzívní design, tak mě výška vůbec nezajímá.

9. 6. 2014 17:45:01

https://webtrh.cz/diskuse/responsive-html-css-a-problem-s-vyskou#reply1030532

Tomáš Lach

(1 hodnocení)

10. 6. 2014 08:09:18

Fido123: No jsou situace kdy člověk potřebuje hlídat i výšku. Nedávno jsem třeba potřeboval vyřešit fluidní klávesnici a potřeboval jsem aby klávesa byla vždycky stejně vysoká jako je její šířka :)

10. 6. 2014 08:09:18

https://webtrh.cz/diskuse/responsive-html-css-a-problem-s-vyskou#reply1030531

Fido123

(13 hodnocení)

10. 6. 2014 08:56:04

Napsal tomaslach;1096619
Fido123: No jsou situace kdy člověk potřebuje hlídat i výšku. Nedávno jsem třeba potřeboval vyřešit fluidní klávesnici a potřeboval jsem aby klávesa byla vždycky stejně vysoká jako je její šířka :)

No to je sice možné, ale nějaká klávesnice nemá nic společného s responzívním designem webu.

10. 6. 2014 08:56:04

https://webtrh.cz/diskuse/responsive-html-css-a-problem-s-vyskou#reply1030530

Tom

(7 hodnocení)

10. 6. 2014 09:10:15

Samozřejmě, že u responzivního webu potřebujete někdy řešit výšku. Kdykoli chcete zarovnávat vertikálně máte problém. Typicky například u tlačítek, které mají uživateli ukázat, že stejný prvke jaký byl předtím může přidat. pak uděláte řadu stejných obrázků, které se správně obalí divem, ale u tlačítka byste museli udělat obrázek taky, což je na text nesmysl.

10. 6. 2014 09:10:15

https://webtrh.cz/diskuse/responsive-html-css-a-problem-s-vyskou#reply1030529

Fido123

(13 hodnocení)

10. 6. 2014 09:38:18

Já se prostě nemůžu ubránit dojmu, že autor vlákna chce docílit něco jiného, než je responzívní design, nebo že v tom responzívním návrhu něco dělá špatně, viz.

Napsal troe;1096397
...a tedy pokud se mění výška okna web zůstává stejný, má otázka tedy zní jak docílit toho, aby se měnila i výška :o

To je přece úplně normální chování responzívních webů, že se nic nemění, když se změní výška okna prohlížeče. Responzivita odráží změny v šířce prohlížeče, ne v jeho výšce.

10. 6. 2014 09:38:18

https://webtrh.cz/diskuse/responsive-html-css-a-problem-s-vyskou#reply1030528

domju

(6 hodnocení)

10. 6. 2014 10:05:53

pokud je čtvereček 100x100 při rozlišení 1200x800 tak při responzivním designu bude 10x10 při rozlišení 320x240, kde se mu musí nastavit ta minimální šířka width a height je auto, pokud těch čtverečku bude 24, tak při marginu 0, jich logicky má být na "řádku" 12 při normálním rozlišení a dva "řádky". Při zmenšení rozlišení se budou přizpůsobovat, takže při rozlišení 320x240 naskáčou vedle sebe na jeden řádek. Když jim nechám na ostro pevnou velikost 100x100 tak se ve finále budou rovnat pod sebe, čímž pádem se prodlouží délka stránky, takže pokud chce autor vlákna něco jiného, ať poskytne alespoň náhled ať víme vo co go :-)

PS pro kverulanty, ano vím že může být okraj prohlížeče.

10. 6. 2014 10:05:53

https://webtrh.cz/diskuse/responsive-html-css-a-problem-s-vyskou#reply1030527

Tomáš Lach

(1 hodnocení)

10. 6. 2014 12:04:10

Napsal Fido123;1096634
No to je sice možné, ale nějaká klávesnice nemá nic společného s responzívním designem webu.

To si dovolím nesouhlasit. Responziivní design není jen mobil a tablet. Na desktopu taky nemáš jen jednu šířku. Můžeš mít desktop o šířce 1024px a 1920px. Takže nějaka klávesnice pokud se má adaptovat na šířku prohlížeče chtě nechtě souvisí s reponzivitou...

Každopadně ja chtěl jen poukazat na to, že existují situace kdy človek potřebuje zachovat i stejnou výšku a to i na mobilech a tabletech :) Je jasné, že u běžného kodování standartních webu to potřeba není.

Podle toho co autor vlákna psal mám spíše pocit, že by potřeboval aby se mu layout adaptoval dle různé výšky prohlížeče. To mě napadá jen jedno využití a to v momentě kdy má několik informací u kteých chce za všech okolnosti aby byly vidět bez nutnosti scrollování. Ale dokud autor nenapíše konkretní případ tak těžko soudit :)

10. 6. 2014 12:04:10

https://webtrh.cz/diskuse/responsive-html-css-a-problem-s-vyskou#reply1030526

Fido123

(13 hodnocení)

10. 6. 2014 12:41:46

Napsal tomaslach;1096702
To si dovolím nesouhlasit. Responziivní design není jen mobil a tablet. Na desktopu taky nemáš jen jednu šířku. Můžeš mít desktop o šířce 1024px a 1920px. Takže nějaka klávesnice pokud se má adaptovat na šířku prohlížeče chtě nechtě souvisí s reponzivitou...
Každopadně ja chtěl jen poukazat na to, že existují situace kdy človek potřebuje zachovat i stejnou výšku a to i na mobilech a tabletech :) Je jasné, že u běžného kodování standartních webu to potřeba není.
Podle toho co autor vlákna psal mám spíše pocit, že by potřeboval aby se mu layout adaptoval dle různé výšky prohlížeče. To mě napadá jen jedno využití a to v momentě kdy má několik informací u kteých chce za všech okolnosti aby byly vidět bez nutnosti scrollování. Ale dokud autor nenapíše konkretní případ tak těžko soudit :)

No pominu, že nechápu, proč bych pro nějaký web dělal klávesnici, když každé zařízení či prohlížeč má svoji. Ale když už bych něco podobného dělal, nebyly by to webové stránky, ale HTML aplikace a tam samozřejmě platí jiné pravidla.

Skutečně budu velmi rád, když mi sem někdo vložíte odkaz na nějaký responzívní web, který nějak smysluplně pracuje s tou změnou výšky, páč já si z těch popisů výše mám problém si něco představit.

10. 6. 2014 12:41:46

https://webtrh.cz/diskuse/responsive-html-css-a-problem-s-vyskou#reply1030525

Tomáš Lach

(1 hodnocení)

10. 6. 2014 12:58:31

Napsal Fido123;1096711
No pominu, že nechápu, proč bych pro nějaký web dělal klávesnici, když každé zařízení či prohlížeč má svoji. Ale když už bych něco podobného dělal, nebyly by to webové stránky, ale HTML aplikace a tam samozřejmě platí jiné pravidla.
Skutečně budu velmi rád, když mi sem někdo vložíte odkaz na nějaký responzívní web, který nějak smysluplně pracuje s tou změnou výšky, páč já si z těch popisů výše mám problém si něco představit.

Jde o web / aplikaci která bude sloužit k výuce psaní všemi deseti :) Takže ano jde o aplikaci ale je to webová aplikace :) Podstata toho sdělení byla, že na webu ať už je to html aplikace nebo firemni prezentace jsou situace kdy se to s tou výškou může hodit nic víc nic míň :)

To co mám namysli ja je třeba tady: http://fluidsquares.com/ ale tady jde jen v principu o to ze vyska odpovida sirce. Coz podle me neni to co pozaduje autor (tzn kdyz menim vysku nic se samozrejme nemeni)

10. 6. 2014 12:58:31

https://webtrh.cz/diskuse/responsive-html-css-a-problem-s-vyskou#reply1030524