Seznam do více sloupců

29. 7. 2013 17:40:11

Dobrý den všem,

prosím, nemám nápad, ani nikde nenohu najít jak z delšího seznamu - ul, li - udělat třeba dva, nebo více sloupců. Něco jsem našel. Bylo to spíše o manuálním pojmenování jednotlivých položek (li) a poté jejich řazení pomocí css.

Mám spíše namysli abych třeba navolil tři sloupce a seznam se do nich automaticky rozdělil. Nebo tomu klidně pomohu, ale potřebuji aby když zmizí třeba dvě položky z prvního sloupce, aby se ostatní položky posunuly - tedy v posledním sloupci bude o dvě méně. Aby se to řadilo odshora dolů, ne po řádcích.

konkrétní příklad: jde mi o to dosáhnout podobného efektu jako má seznam.cz hned nahoře - pod datem a svátkem, nebo po srolování výpis rubrik pro firmy.cz

Předem děkuji za každou radu a přeji hezký den!

Tomas

29. 7. 2013 17:40:11

https://webtrh.cz/diskuse/seznam-do-vice-sloupcu/#reply927926

FAKAM

(10 hodnocení)

29. 7. 2013 17:48:19

pomocou CSS http://jsfiddle.net/VCwL7/

29. 7. 2013 17:48:19

https://webtrh.cz/diskuse/seznam-do-vice-sloupcu/#reply927925

Tomasir

29. 7. 2013 17:54:09

Napsal FAKAM;979057
pomocou CSS http://jsfiddle.net/VCwL7/

Děkuji za odpověď, ale v příkladu vidím práve řazení po řádcích.

Potřeboval bych to po sloupcích:

A D

B E

C F

29. 7. 2013 17:54:09

https://webtrh.cz/diskuse/seznam-do-vice-sloupcu/#reply927924

Jan Stejskal

(7 hodnocení)

29. 7. 2013 17:59:14

Css column-count

29. 7. 2013 17:59:14

https://webtrh.cz/diskuse/seznam-do-vice-sloupcu/#reply927923

Martin Krejčí

(1 hodnocení)

29. 7. 2013 18:02:02

Myslím, že budete muset trošičku programovat, na druhou stranu to nebude nic složitého.

1) Projít seznam, spočítat kolik je položek - P

2) P vydělit S, kde S je požadovaný počet sloupců, zaokrouhlit nahoru a máte PPS = položek per sloupec

3) Znovu projít seznam, odebírat z něj položky a nasypat je do tří nových seznamů s tím, že nejdřív sypete do prvního, jakmile je v něm PPS záznamů, sypete do druhého, atd.

4) Výsledné seznamy naformátovat přes CSS, aby se zobrazovaly vedle sebe

Lepší to udělat už na straně serveru, ale jde to i v javascriptu, pokud byste s funkcí co ten prvotní seznam generuje nemohl/nechtěl hýbat.

29. 7. 2013 18:02:02

https://webtrh.cz/diskuse/seznam-do-vice-sloupcu/#reply927922

FAKAM

(10 hodnocení)

29. 7. 2013 18:04:34

najlepšie použiť PHP: http://stackoverflow.com/questions/13784137/how-to-display-a-list-in-three-columns-using-php

29. 7. 2013 18:04:34

https://webtrh.cz/diskuse/seznam-do-vice-sloupcu/#reply927921

Martin Krejčí

(1 hodnocení)

29. 7. 2013 18:05:58

Napsal Jan Stejskal;979060
Css column-count

nebo tak, pokud nemusíte řešit starší prohlížeče

29. 7. 2013 18:05:58

https://webtrh.cz/diskuse/seznam-do-vice-sloupcu/#reply927920

Jan Stejskal

(7 hodnocení)

29. 7. 2013 18:15:43

Napsal oham;979064
nebo tak, pokud nemusíte řešit starší prohlížeče

I pokud je řešit musíte, viz. http://web.archive.org/web/20130401113432/http://www.csscripting.com/css-multi-column/

29. 7. 2013 18:15:43

https://webtrh.cz/diskuse/seznam-do-vice-sloupcu/#reply927919

node

(5 hodnocení)

29. 7. 2013 18:19:22

li - display block, float left, width XY.

29. 7. 2013 18:19:22

https://webtrh.cz/diskuse/seznam-do-vice-sloupcu/#reply927918

Martin Krejčí

(1 hodnocení)

29. 7. 2013 18:24:58

@node - OP to chtěl seřazené do sloupců, ne do řádků

@Jan Stejskal - pod tím linkem vidím různé příklady ale vždy je to řešené buďto přes javascript, na straně serveru, nebo pomocí css3, s tím, že tato konkrétní funkcionalita ale není kompatibilní s IE9. Pokud něco nevidím, tak prosím o upřesnění.

29. 7. 2013 18:24:58

https://webtrh.cz/diskuse/seznam-do-vice-sloupcu/#reply927917

Jan Stejskal

(7 hodnocení)

29. 7. 2013 18:40:41

Napsal oham;979073
@node - OP to chtěl seřazené do sloupců, ne do řádků
@Jan Stejskal - pod tím linkem vidím různé příklady ale vždy je to řešené buďto přes javascript, na straně serveru, nebo pomocí css3, s tím, že tato konkrétní funkcionalita ale není kompatibilní s IE9. Pokud něco nevidím, tak prosím o upřesnění.

Použijete column-count z css3 a připojíte odkazovaný javascript pro starší prohlížeče.

29. 7. 2013 18:40:41

https://webtrh.cz/diskuse/seznam-do-vice-sloupcu/#reply927916

Martin Krejčí

(1 hodnocení)

29. 7. 2013 18:49:35

@Jan Stejskal - ... který dělá to, co jsem napsal já. Jinými slovy vy říkáte "stáhněte si hotové řešení", jinak mluvíme o tom samém.

29. 7. 2013 18:49:35

https://webtrh.cz/diskuse/seznam-do-vice-sloupcu/#reply927915

Jan Stejskal

(7 hodnocení)

29. 7. 2013 18:56:29

Napsal oham;979080
@Jan Stejskal - ... který dělá to, co jsem napsal já. Jinými slovy vy říkáte "stáhněte si hotové řešení", jinak mluvíme o tom samém.

Ne. Psal jsem použijte css column, pokud potřebujete řešit staré prohlížeče, řeste to javascriptem. Vy jste psal o řešení na straně serveru, což je zcela jiné řešení (výsledek je stejný jen graficky).

29. 7. 2013 18:56:29

https://webtrh.cz/diskuse/seznam-do-vice-sloupcu/#reply927914

Martin Krejčí

(1 hodnocení)

29. 7. 2013 18:59:31

Napsal Jan Stejskal;979083
Ne. Psal jsem použijte css column, pokud potřebujete řešit staré prohlížeče, řeste to javascriptem. Vy jste psal o řešení na straně serveru, což je zcela jiné řešení (výsledek je stejný jen graficky).

Já jsem nepsal řešení na straně serveru. Já jsem psal řešení a napsal jsem, že je vhodnější udělat ho na straně serveru, ale výslovně jsem napsal také to, že to lze udělat i u klienta v javascriptu. To je méně vhodné proto, že to bude na starých prohlížečích "poskakovat" nebo to bude zdržovat zobrazení. Připouštím, že vaše řešení je pohodlnější.

29. 7. 2013 18:59:31

https://webtrh.cz/diskuse/seznam-do-vice-sloupcu/#reply927913

Pro odpověď se přihlašte.

Přihlásit