Zarovnanie prkov na webe (CSS,jQuery)?

21. 3. 2014 01:35:09

Zdravim,

potreboval by som pomoct so zarovnanim prvkov na webe. Vid ukazka. Chcem dosiahnut to, aby dolny border spolu s tlacidlom kde je cena, boli v jednej rovine v ramci produktov. Problem je v tom ze vyska sa nastavuje na zaklade dlzky popisu, tj. dopredu to nikdy neviem. Druhy problem je v tom, ze ak vezmem velkost najvacsieho ktory je v 'body' a nastavim to vsetkym, tak je mozne ze to uplne spravne fungovat nebude. Nakolko by som to potreboval obmedzit len tak, aby som povedal nieco nasledovne "Vezmi najvacsiu dlzku z daneho riadku a nastav ju vsetkym v danom riadku". Ale to by som musel nejak oznacit, ktore produkty su v ktorom riadku. A nechcem sa pustat do nejakeho bastlenia kodu kde budem zbytocne IFovat alebo nastavovat nejake krolomne classy.

10546

So, je mozne to urobit nejak v CSS, alebo nejak pomerne "cisto" v jQuery?

(Snad je to zrozumitelne, predsa uz je pokrocila hodina).

Love and peace.

21. 3. 2014 01:35:09

https://webtrh.cz/diskuse/zarovnanie-prkov-na-webe-cssjquery/#reply1008006

bof

21. 3. 2014 02:16:13

Použij pevnou výšku a text ořezávej v případě že se nejedná o detail, tak není potřeba zobrazovat celou sloku textu, případně stanov max počet znaku a nastav to na pevno.

Nejednoduší řešeni.

---------- Příspěvek doplněn 21.03.2014 v 02:20 ----------

No a pokud to chceš řešit např. tím jquery a nastavovat ty výšky dynamicky.

tak např takhle:

21. 3. 2014 02:16:13

https://webtrh.cz/diskuse/zarovnanie-prkov-na-webe-cssjquery/#reply1008005

Macejko.sk

(5 hodnocení)

21. 3. 2014 02:33:30

No to prave neriesi moj druhy spominany problem. Nerad by som nastavil vsetkym produktom jednu vysku, na zaklade najdlhsieho produktu na stranke. Nakolko sa moze stat, ze najdlhsi produkt bude v poslednej rade a ja tuto velkost budem nastavovat aj produktom v prvom rade, pricom to vobec nebolo nutne. Chcelo by to nejak rozumne oddelit na riadky.

PS:

1. nic v zlom, ale pomenuvavaj nejak rozumne tie premenne, neda sa to citat.

(narazam na to key,value) v tomto pripade je to necitatelna hlupost

2. ide o velkost height() a nie o velkost width()

3. nemusis pretypuvavat vysledok z funkcie width() nakolko to vracia number a nie string (string vracia v pripade .css('height') )

21. 3. 2014 02:33:30

https://webtrh.cz/diskuse/zarovnanie-prkov-na-webe-cssjquery/#reply1008004

Aleš Trunda

(16 hodnocení)

21. 3. 2014 08:35:45

Ano, samozřejmě to jde přes css i jquery. Ale je potřeba tu strukturu předělat - mám jeden řádek, udělám 3 sloupce v každém bude obrázek + popis. Pod nimi následuje clear a další tři sloupce, kde je oddělovač a cena, konec řádku. Záleží jak to je udělané, ale myslím, že by nemusel být problém předělat do této podoby, jinak samozřejmě přes js to lze vyřešit také.

21. 3. 2014 08:35:45

https://webtrh.cz/diskuse/zarovnanie-prkov-na-webe-cssjquery/#reply1008003

Dominik Ther

(2 hodnocení)

21. 3. 2014 08:55:24

Na rychlo jsem napsal řešení pro modernější prohlížeče v CSS. Tak třeba můžeš použít alespoň to :)

CodePen - Pen

21. 3. 2014 08:55:24

https://webtrh.cz/diskuse/zarovnanie-prkov-na-webe-cssjquery/#reply1008002

Miloslav Lešetický

(10 hodnocení)

21. 3. 2014 08:56:50

ivanbohatyr

nimi následuje clear a další tři sloupce, kde je oddělovač a cena, konec řádku.

To je ale z hlediska struktury dokumentu nevhodné řešení, protože cena se ocitne takříkajíc v ofsajdu - nebude tedy logicky součástí boxu s popisem, názverm a obrázkem.

21. 3. 2014 08:56:50

https://webtrh.cz/diskuse/zarovnanie-prkov-na-webe-cssjquery/#reply1008001

Smazaný účet m5u2DKRief

(48 hodnocení)

21. 3. 2014 09:09:14

všechny tři sloupce dát do jednoho kontejneru s position relative
prvku s borderem a tlačítkem nastavit position absolute s nějakou hodnotou bottom. Left/right nenastavovat. Nastavit šířku (sloupce) a přidat text-align: right.
samotným sloupcům nezapomenout nastavit dolní padding, aby text nepřetekl za absolutně pozicovaný prvek.

21. 3. 2014 09:09:14

https://webtrh.cz/diskuse/zarovnanie-prkov-na-webe-cssjquery/#reply1008000

Miloslav Lešetický

(10 hodnocení)

21. 3. 2014 09:12:49

Ondřej Veřtát

Mohu poprosit o konkrétní ukázku?

21. 3. 2014 09:12:49

https://webtrh.cz/diskuse/zarovnanie-prkov-na-webe-cssjquery/#reply1007999

Smazaný účet m5u2DKRief

(48 hodnocení)

21. 3. 2014 09:37:40

Napsal Plaváček;1070321
Ondřej Veřtát
Mohu poprosit o konkrétní ukázku?

Příklad

21. 3. 2014 09:37:40

https://webtrh.cz/diskuse/zarovnanie-prkov-na-webe-cssjquery/#reply1007998

Miloslav Lešetický

(10 hodnocení)

21. 3. 2014 09:42:28

Ondřej Veřtát

Aha, takhle jsi to myslel. Šikovné řešení. Dík.

P.S. Tak tady je konkrétní ukázka pro zakladatele tématu http://klient.plavacek.net/eshop.html. Hezky jsme si zakodéřili.

Mimochodem - existuje i řešení využívající table-row a table-cell s podobným principem, pokud potřebuješ vypisovat souvislý seznam položek. Tvé řešení totiž nebude fungovat, pokud každé tři výrobky nebudou umístěny v div class="container".

21. 3. 2014 09:42:28

https://webtrh.cz/diskuse/zarovnanie-prkov-na-webe-cssjquery/#reply1007997

Aleš Trunda

(16 hodnocení)

21. 3. 2014 12:53:52

Napsal Plaváček;1070317
ivanbohatyr

nimi následuje clear a další tři sloupce, kde je oddělovač a cena, konec řádku.

To je ale z hlediska struktury dokumentu nevhodné řešení, protože cena se ocitne takříkajíc v ofsajdu - nebude tedy logicky součástí boxu s popisem, názverm a obrázkem.

Ano máte pravdu, že mezi cenou produktu a jeho popisem by takto v kódu nebyla viditelná vazba. Přesto si ale myslím, že je to v praxi bez problémů použitelné, nicméně řešení, co tady někdo psal s tím absolutním pozicováním ceny dolů se zdá být pro tento případ nejvýhodnější.

21. 3. 2014 12:53:52

https://webtrh.cz/diskuse/zarovnanie-prkov-na-webe-cssjquery/#reply1007996

Macejko.sk

(5 hodnocení)

21. 3. 2014 14:22:23

Dakujem panom, Ondřej Veřtát a Plaváček. Mate tam po bode. Problem solved.

aaaa bez ziadneho jQuery bastlenia :) co som rad.

21. 3. 2014 14:22:23

https://webtrh.cz/diskuse/zarovnanie-prkov-na-webe-cssjquery/#reply1007995

Pro odpověď se přihlašte.

Přihlásit