CSS keretrendszer nem csak négyszög területre

Internet: PHP, CGI, stb.

Szeretnék olyan CSS keretrendszert (mint pl Bootstrap) használni, amely le tud fedni különféle, egyébként négyszögekből összeállítható területet. Pl azonos számokkal jelölve az egy csoportba szánt elrendezést:
01 01 01 01 03 03 03 03
01 01 02 02 02 02 04 04
01 01 05 05 02 02 04 04

Az egész egy nagy form. Emberek iskolázottságát véve példának 01-ben lennének a személyes adatok mezői, 02-ben az általános iskolai, stb.

Lehetséges-e ezt CSS-el megoldani vagy marad a táblázat létrehozása?

  • 2064 megtekintés

Mert mi történik ha table-t használsz layoutra? Simán van az helyzet amikor a table az egyetlen értelmes megoldás. Mondjuk egy wireframe/mórickaábra jobb lenne ennél a mátrixnál amit a kérdező "lerajzolt", meglehet tényleg táblázatot akar ami a webdesign istenei szemében is megfelelő indokok a table elem használatára :D

Nincs olyan helyzet, ahol table elem volna a legjobb megoldás layoutra, ezt igazán bátran kijelenthetem. Mármint ha szemantikusan és szépen akarunk gondolkodni.
Ha a célközönség által használt böngészőpark engedi, akkor flexbox, ha nem akkor is max. divekkel, amik table display-jel rendelkeznek, de a legtöbb esetben ezt is el lehet kerülni.

Table taget arra használjunk, amire kitalálták: táblázatos adatok megjelenítésére.

( violapeter v | 2015. 10. 07., sze – 16:14 )

Nem igazán értem, hogy mi értesz az alatt, hogy lefedni?

Van egy négyzetekből álló "táblázatod" és annak a celláit szeretnéd pl. beszínezni?

( Robika88 | 2015. 10. 07., sze – 21:14 )

ezek az elendezéseket én valamilyen elembe tenném b,div,stb, csinálnék osztályokat amibe relative irnám a poziciot balrol, a többit programozva irnám, pl fentröl, mennyi a padding vagy hasonlok

( uid_17626 | 2015. 10. 07., sze – 21:24 )

Ha azonos számok egy-egy halmazt (egyesített cellát) jelentenek, akkor ezt table segítségével szerintem nem lehetséges megcsinálni a 01 és a 02 miatt, mert így nem lehet cellákat egyesíteni.

( raavi | 2015. 10. 07., sze – 23:17 )

Eslő olvasásra a z-index+offset lehet a kulcs. Létrehozol egy 01 es teljes téglalapot. Arra ráteszed a 02-es téglalapot, majd rá a 05.
Botstrap grid-system tudja az offset-elgetést. z-indexel kapcsolatban meg a "less" -nek néznék jobban utána.
Nincs túl sok tapasztalatom de én megnézném jobban a Bootstrap-et hátha tudja az is.

( vilmos.nagy | 2015. 10. 08., cs – 11:17 )

Ha nem kötelező, hogy az egybe tartozó dolgok tényleg egy tagből álljanak, akkor tényleg sokkal egyszerűbb egy ilyet összedobni.
--
blogom

( violapeter v | 2015. 10. 08., cs – 11:42 )

Bevallom őszintén, hogy még mindig nem értem, hogy mit kéne megcsinálni, pedig igazán, tényleg szeretnék segíteni. Nem tudnál esetleg valami ábrát mellékelni, vagy óvodás szinten leírni? Csak mert mostanság sokat foglalkoztam gridekkel és amúgy is elég jól ismerem a CSS-t.

De hogy ne csak értetlenkedjek, ez egy baromi jó tool:

http://gridle.org/

( uid_17720 | 2015. 10. 08., cs – 18:19 )

Ezt táblázattal SEM fogod tudni megcsinálni. Marad az, hogy szétvágod a 01 tartalmát egy 2x3 és egy 2x1-es részre és egymás mellé pozícionálod (feltéve, hogy a 01 első "sorában" lévő tartalom szétvágható).
És ha megengedsz egy személyes véleményt: ez teljesen átláthatatlan eredményt fog szülni SZVSZ.