Tabuľka zo zoznamov za pomoci CSS
Dosť obtiažne sa abstrahuje tento problém bez zdôvodnení. Proste ich neuvediem nijako inak ako fakt, že NIEKEDY treba vytvoriť vizuálnu konštrukciu podobnú tabuľke ale bez pomoci príslušných HTML značiek (TABLE, TR, TD).
Mohli by sme špekulovať za pomoci DIV a SPAN s príslušnými zmenami vlastností týchto boxov.
Máme tu však značky pre zoznamy a využime radšej tie. Má to niekoľko dôvodov ale radšej uvediem hotové riešenie.
<html>
<head>
<style>
/* Pomocne */
body { color: white }
ul { border:1px dotted green }
li { border:1px dotted red }
/* Tabulka z UL */
#tabulka ul { list-style-type: none; display: inline;
margin:0;padding:0;
background:#009 /* Pozadie MODRE */
}
#tabulka ul li { clear:both;
margin:0;padding:0;
height: 50px; /* Vyska riadkov tabulky - najlepsie rovne vyske buniek */
}
#tabulka ul li ul { display:inline; }
#tabulka ul li ul li
{
/* display: inline; funkcne v IE */
display: run-in; /* A toto funguje aj vo Firefoxe :-) */
float:left; /* Spolu s tymto */
clear:none;
overflow: hidden;
width: 100px; /* sirka buniek */
height: 50px; /* vyska buniek */
line-height: 50px; /* musi byt rovne vyske buniek */
background: #900; /* Pozadie CERVENE */
}
</style>
</head>
<body>
<div id="tabulka">
<ul>
<li><ul><li>1</li><li>2 dfsdfsdfsdf sdfsd fsdf sdf dfdfsdfsd 333</li><li>3</li></ul></li>
<li><ul><li>1</li><li>2</li><li>3</li></ul></li>
</ul>
</div>
</body>
</html>
Tučne sú zvýraznené pomocné parametre (zobrazia pozadie buniek „tabuľky“ alebo parametre, ktoré si musíte prispôsobiť.
Princíp je v tom, že máme rodičovský zoznam a každá jeho položka je vnorený ďalší zoznam. Vnorený zoznam by normálne bol zvisle a preto ho pomocou CSS presunieme vodorovne.
Ďalšie parametre zrušili značky odrážiek a zrušili prednastavené okraje položiek tak, aby boli bunky tesne pri sebe.
Predpokladám, že riešenie je mierne ukecané alebo nepresné. Preto sú komentáre otvorené.
A to ti aj niekde funguje? Môžeš uviesť obrázok ako to má vyzerať?
alebo pouzit css3 table :-)
[1] uz je to idive vo firefoxe
No to uz mozes rovno pouzit tabulky. Nevidim logicky dovod preco ich nepouzit pre datove udaje, ktore si ich vyzaduju. Musis mat fakt zvlastne odovodnenia.
Fungovat to sice funguje, ale editovat by som to veru nechcel :)
No to uz mozes rovno pouzit tabulky. Nevidim logicky dovod preco ich nepouzit pre datove udaje, ktore si ich vyzaduju. Musis mat fakt zvlastne odovodnenia.
Fungovat to sice funguje, ale editovat by som to veru nechcel :)
[4] stlac Home a citaj prvy odstavec. Skus to ako akademicke cvicenie najst dovod.
[3] ten obrázok by mi fakt pomohol.
[7] http://www.madaj.net/temp/table.html
Nie je to nič svetoborné – pomocou zoznamov su riešené vodorovné menu s vnoreniami. Ja iba neskrývam druhý riadok :-)
Vyzerá to pekne, len to už musí byť ozaj špeciálny prípad užitia, najmä kvôli absencií zalomovania riadkov a takmer nemožnej flexibilite bunky v oboch smeroch. I keď s pomocou nejakého JS layeru by sa to vyriešiť dalo. Predpokladám ale, že toto sa už vymyká predmetu a úrovni nutnosti riešenia problému :-)
[10] nezalamovanie je v zadani, myslim, ze nie je problem urobit to tak, aby sa text zlomil.
Prva moznost vyuzitia je prave v tom, co som naznacil:
vnorene menu – prvy riadok je prva uroven a dalsie riadky su skryte a objavuju sa onmouseover nad bunkami prveho riadku
Dalsia moznost je ak sa snazis robit interaktivne presuvatelne riadky, tak mam pocit, ze s TABLE to moc dobre nejde (nie som si isty).
Ina moznost je proste byt pragmaticky – na malej obrazovke sa to rozbije do zvisleho usporiadania lahsie ako u tabulky :)
Moznosti je vela – ja som to dostal ako ulohu „bez TABLE“ a zaroven som si k tomu sam pridal BEZ DIV a SPAN. Pricom NECHCEM aby sa bunky roztiahli len preto, ze maju privela textu :)
Nasiel som rieseni na kvanta – vsetky striktne zacinali „ako spravim vodorovne menu“, pokracovali „menu urobime ako zoznam“. Ja som iba vynechal slovo „menu“ a vidite, ako je vam tazko pochopit PRECO robim TABULKU bez TABLE ;-) pritom to riesite dnes a denne – len to volate „menu“ :-)
[7] tak ešte raz a pomaly: OBRÁZOK! To je takéto dačo: http://tmp.tiso.sk/spravodaj-table.png (O 9.63, FF 3.0.3, IE 6)
[4],[10] napríklad kalendár?
[11][12] Argumenty „pro“ sú silnejšie, než „proti“ :-) A napadá mi ešte jedna implementácia, ktorú akurát riešim v práci – rozbaľovacia štrukturovaná ponuka s dynamickým ajaxovým načítavaním. Len asi tu to je trochu komplikovanejšie a je potrebné aj viacúrovňové UL-LI-UL-LI vnorovanie… Či nie?
[12] obrazky robim v absolutnom pohnuti mysle a dusevneho stavu :-)