Do nového roku jako lepší programátoři? Znovu otevíráme večerní školu programování. Nette framework, návrhové vzory, testování nebo vůbec poprvé kurzy ASP.NET dostupné odkudkoli v republice.

Diskuze: Horizontální roztahování

HTML a CSS HTML a CSS Horizontální roztahování American English version English version

Avatar
Honza Bittner
Redaktor
Avatar
Honza Bittner:

Mám problém, chci aby se mi na stránce zarovnávaly prvky takto

[ ][ ][ ][ ][ ][ ][ ][ ][ ][ ]
      <---->scroll

namísto

[ ][ ][ ][ ]
[ ][ ][ ][ ]

Tzn. chci nastavit roztahování stránky na horizontální namísto vertikálního.
Nějaké nápady? :P

Odpovědět 2.2.2014 12:42
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Michal Doubek (HAPPY DAY):

buď dej:

width: auto; height: 200px;

nebo pokud chceš scrolovat

width: 100%; height: 200px; overflow: auto;

to by mělo udělat scrollování v tom elementu

Nahoru Odpovědět 2.2.2014 12:46
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Honza Bittner:

Pořád to scrolluje dolu, ale já potřebuji do stran... :P

Nahoru Odpovědět 2.2.2014 12:49
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Michal Doubek (HAPPY DAY):

zkus overflow-x

Nahoru Odpovědět 2.2.2014 12:51
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
done
Člen
Avatar
done:

Nastavil bych velikost tak aby to horizontálně přesahovalo, nastavil bych overflow-x: hidden aby uživatel nemohl scrollovat pomocí scrollbaru a pak bych využil metodu scrollLeft v jQuery. Ale nejsem si úplně jistý jestli by to šlo.

 
Nahoru Odpovědět 2.2.2014 12:54
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Michal Doubek (HAPPY DAY)
Honza Bittner:

To je úplně k ničemu, tyto overflow-x/y jen vpodstatě zobrazují lišty.

Nahoru Odpovědět 2.2.2014 12:54
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na done
Honza Bittner:

Nastavovat velikost staticky na třeba 10000px je blbé, může se stát někdy, že už to nebude stačit. A nastavovat šířku v JS také nebude moc výhodné.

Nahoru Odpovědět 2.2.2014 12:58
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
done
Člen
Avatar
Odpovídá na Honza Bittner
done:

Proč ne v JS ? Osobně nastavuji v JS výšku a někdy i šířku některých elementů.

 
Nahoru Odpovědět 2.2.2014 13:00
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na done
Honza Bittner:

Protože když to funguje v CSS tak proč to dělat v JS? :P

Nahoru Odpovědět 2.2.2014 13:03
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
done
Člen
Avatar
Odpovídá na Honza Bittner
done:

Výška se pomocí CSS nastavuje špatně, pokud to má být responzivní. Ale kdyby jsi tu šířku udělal "šikovně", nastavil oveflow-x: hidden, tak by uživatel ani nevěděl, že to přesahuje.

 
Nahoru Odpovědět 2.2.2014 13:05
Avatar
Odpovídá na Honza Bittner
Michal Doubek (HAPPY DAY):

tak testováno:

<div style="width:100%; height:200px; overflow-x:scroll;">
<div style="width:auto;">ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss</div></div>

zkus testoval jsem na w3schools

Nahoru Odpovědět  -1 2.2.2014 13:07
Svoboda tvé pěsti končí na špičce mého nosu
Avatar
Drahomír Hanák
Tým ITnetwork
Avatar
Odpovídá na Honza Bittner
Drahomír Hanák:

Nehledáš white-space: nowrap; ?

EDIT: viz. ukázka http://jsfiddle.net/8E4ZS/

Editováno 2.2.2014 13:09
 
Nahoru Odpovědět  +3 2.2.2014 13:08
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na Drahomír Hanák
Honza Bittner:

Jo! To je přesně ono, také jsem to zrovna objevil... :)

Nahoru Odpovědět 2.2.2014 13:10
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
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 13 zpráv z 13.