Kispad

Kispad: közös blog
4230 cikk, 53904 hozzászólás
Szerzők | Tudnivalók | Feedek


CSS: arany középút, vagy bármilyen

Ervin cikke a Torokgeek rovatból, 2003. szeptember 11. csütörtök, 20:39 | 28 hozzászólás

Amint azt az új design beharangozásakor is említettük, a sesblog a modern webtervezési filozófia élharcosaként aposztrofálja önmagát. Többek között. Jó is az.

Ám a tartalom és megjelenítés filozófiailag mindenképpen helyeselhető elválasztása során - amiben egyébként nem mindig hiszünk - időnként fogós kérdésekbe ütközünk. Vegyük például a középre rendezés esetét.

Adva van egy doboz, benne valamilyen tartalommal, kép, szöveg, amelyet a böngészőablak közepén szeretnénk elhelyezni. Eleddig egy filozófiailag kevésbé helyeselhető, viszont működő eljárás szerint, táblázatok alkalmazásával oldottuk meg a dolgot, igen könnyedén. Most azonban itt a CSS, ahol minden középre rendezésért keményen meg kell küzdeni.

Igaz, ismerünk módszert a vízszintes, és függőleges centerezésre is. Ám a gond az, hogy míg az előbbi ismeretlen méretű doboz esetén is működik, utóbbi csak akkor, ha előre pontosan meg tudjuk mondani a doboz függőleges méretét.

Pályázati felhívásunk ennek megfelelően így szól: olyan eljárást keresünk, amelyik ismeretlen méretű dobozt függőlegesen is középre tud rendezni a böngészőablakban, kizárólag CSS használatával! A zseniális megoldásokat a beleszólások ablakba várjuk, a győztes jutalma a dicsőség és a sesblog általi halhatatlanná válás.

» Ugorj a hozzászóló ablakhoz

Megosztások Facebookon

Eddigi hozzászólások (28)

1

mikolaj, 2003. szeptember 12. péntek, 11:50 (#)

egy dolgot nem értek: hogy a css és a táblázatok miért zárják ki egymást? miért nem lehet css használata mellett táblázatokat használni?

2

eszpee, 2003. szeptember 12. péntek, 12:36 (#)

lehet, de nem szabad ;) az elv az, hogy táblázatokat csak ilyen adatokra használj (spreadsheet pl), a formázás legyen pure css, független minden tartalomtól. az előnyei ennek evidensek, mindenféle eszközre automatikusan portolódik a siteod anélkül, h hozzányúlnál, egyszerűen az ottani browser más csst használ, és kész. a hátrányok is egyértelműek: új technológia, össze-vissza (nem)támogatják a böngészők, és különböző gyermekbetegségeikre olyan durva hack-eket kell használni, hogy az egész az értelmét veszti. de vigasztaljon az a tudat, hogy ha te már ma ezzel szívsz, akkor 1-2év előnyben leszel azokhoz képest, akik akkor kezdik el tanulni, amikor már tényleg full használható is a cucc :)

3

BiBi, 2003. szeptember 12. péntek, 14:00 (#)

tudom, hogy bennem van a hiba, de nem teljesen tiszta a kérdés sem a függőleges igazítással kapcsolatban. a probléma pusztán annyi, hogy egy tábla cellájában lévő tartalom legyen a cella közepén függőlegesen, vagy pedig konkrétan a böngészőablak aktuálisan látható területén legyen középen?

ha az első a kérdés, akkor a cellának kell a vertical-align: middle attribútum, ha a második, akkor kénytelenek lesztek megvárni a CSS2-t támogató böngészőket.

4

eszpee, 2003. szeptember 12. péntek, 14:21 (#)

utóbbi, és szeretettel várunk egy css2 megoldást is, tudtommal nem létezik.

a feladat egyszerűbb megfogalmazása: nézd meg az eredeti post függőleges igazítás példáját, és azt írd át úgy, hogy ne kelljen tudnunk előre a középső vörös box méretét. csak cssben. hajrá.

5

BiBi, 2003. szeptember 12. péntek, 17:43 (#)

még mindig nem értem:)
az eredeti post az, ami a cimoldalon/nyitooldalon van?
ja es a voros keret csak operan van?:)
en ie alatt nem latok keretet...
ennyire ertettem meg a feladatot:
http://aranylaz.mud.hu/ennyiotletemvancsak/

6

eszpee, 2003. szeptember 12. péntek, 18:04 (#)

Bibi, érted te, csak csináld meg mindezt HTML nélkül, 1 db mondjuk nyilván engedélyezett, de aztán kész.

(a vörös box itt van: http://www.wpdfd.com/editorial/thebox/deadcentre4.html , ezt kell pixel értékek megadása nélkül megoldani. )

7

ses, 2003. szeptember 12. péntek, 19:14 (#)

Bibi mester, nemá - a kiírás ennél biztosan egyértelműbb volt. A kódodban pl. rögtön két 'table' tag is figyel, ami pontosan kettővel több, mint amennyi engedélyezett. Újra húzhat. :)

8

BiBi, 2003. szeptember 12. péntek, 22:24 (#)

jaaaa, leesett a korong.
azt nemmontatok, hogy felesleges tablak nelkul:)
a css2-s megoldas majd az lesz hogy azzal lehet content-et is adni, tehat majd maga a stilusdefinicio fogja beleirni a table tageket;)

na de a hulyeseget felreteve, gondolkozom a probleman, bar szerintem maga a kerdes is rossz, mer mindenkeppen a kozepre igazitando taget magaba foglalo eggyel kulsobb tagnek kell megmondani, hogy a tartalma kozepre legyen igazitva, ez pedig mar minimum 2 egymasba agyazott taget kivan.
feladatnak kivalo, de gyakorlatilag ugyis valoszinuleg egy tabla cellajaban lesz elhelyezve ez a dolog, annak a cellanak meg mar nem luxus megadni egy classt...
na addig work in progress:)

9

ses, 2003. szeptember 13. szombat, 00:34 (#)

Bibi, attól még nem rossz egy kérdés, hogy te félreérted vagy nem tudod megoldani. :) Ne beszélj mellé, a feladat egyértelmű - inkább mutass valamit! :)

ui. Egyébként a legkevésbé sem elméleti problémának szánom, valóban szeretnék rá megoldást, és alkalmazni is fogom, ha kapok.

10

Boca, 2003. szeptember 13. szombat, 14:27 (#)

En nem tudomanyos alapossaggal, hanem munka melletti szokasos minimum eroforras bevetesevel gondolom (tehat nem allitom), hogy nincs megoldas.
Az 1-2 ev elonyrol meg annyit, hogy jarhatsz ugy is, hogy szivsz 1-2 evig a workaroundokkal, aztan 1-2 ev mulva kijonnek a korrekt CSS2 brozerek, a flipperezo csavok meg lenyomnak CSS-bol egy 21 napos tanfolyammal a hatuk mogott. :)
Mondjuk erre amiatt kicsi az esely, mert szabvanyt teljesen meg sose tamogatott bongeszo, ugy latszik ez mar elvi osszefugges.

11

mikolaj, 2003. szeptember 13. szombat, 16:55 (#)

akkor hogy pontosan értsem, eszerint az elv szerint melyek a 'megengedett' és melyek a 'tiltott' html tag-ek?

12

BiBi, 2003. szeptember 13. szombat, 17:32 (#)

Mikolaj, én már értem, úgyhogy lefordítom a a mi nyelvünk, tehát közönség számára: 1 html tagre engedélyezett a stílus, tehát a gyakorlatban használt táblaszerkezet pl. nem megengedett, a <table width=100% height=100%> <<td align=center valign=middle> kezdet nem jó, mert már 2 tagbe van beágyazva a tartalom.
valami ilyesmit várnak, hogy csak simán egy <div class=szupercsalafintastilus>blabla<div> tag legyen vízszintesen és függőlegesen is középre rendezett.

13

BiBi, 2003. szeptember 13. szombat, 17:37 (#)

bocs hogy én írok megint, csak ahogy nézem nem lettek túl korrektek az előző felírásomban a példák, úgyhogy mindenki értse jól őket (cserélje le a záró div taget /divre stb.).
css2-t tesztelni sajnos nem tudok, de ötletként annyi eszembe jutott, hogy ha div tagnek vertical-align: middle, valamint display: table-cell attribútumot adunk, talán a cellaként rendereléssel már figyelembe fogja venni a függőleges rendezést.
ja és továbbra is próbálkozok:)

14

ses, 2003. szeptember 13. szombat, 20:41 (#)

mikolaj, az a lényeg, hogy a példában a <table> tag használata tiltott (mert nem egy táblázatos tartalmat akarunk megjeleníteni, hanem mondjuk egy képet vagy szöveges idézetet).

15

mikolaj, 2003. szeptember 14. vasárnap, 01:26 (#)

de eszpee mintha egy általános elvet emlegetett volna a táblázatokkal kapcsolatban (miszerint táblázatot csak olyan megjelenítendő információra, ahol adekvát a táblázatos forma - tehát ne 'éljünk vissza' a taggel). én arra vagyok kíváncsi, hogy van-e vmi metaelv, amiből ez az elv levezethető, és ha igen (feltételezem), akkor az milyen tag-ek használatát 'engedélyezi' és hogyan. tényleg nem kötözködni akarok, sokkal inkább tanulni vmi újat :)

16

ses, 2003. szeptember 14. vasárnap, 09:59 (#)

Nem tudom, elegendően meta-e neked, de arról van szó, amit a beírásban is feszegettem: "válaszd el a tartalmat a megjelenítéstől". Tehát a kódban csak olyasmi legyen, aminek tartalmi jelentése van, és nem a prezentációt szolgálja. Ezen elv alapján kell eldönteni, hogy az adott helyzetben az egyes tagek milyen elemnek minősülnek, nincsen általános tiltólista.

A táblázat egy pénzügyi kimutatás esetében tartalmi elem, egy szöveges oldal elrendezésénél nem az. A spacer.gif meg sosem az.

Persze, a fenti vezérelv nem pusztán elméletieskedés, hanem alkalmazásának mindenféle gyakorlati előnyei vannak, amiket el is mondanék, de hát arra nem vonatkozott a kérdésed.

17

mikolaj, 2003. szeptember 14. vasárnap, 18:38 (#)

jó jó, gondoltam, hogy ez nem ilyen öncélú webdizájn filozófia, hanem gyakorlati jelentősége van. csak ezekre a gyakorlati hasznokra már magamtól is rá tudok jönni, ha értem az elvet...

18

ses, 2003. szeptember 14. vasárnap, 18:53 (#)

És most akkor érted? Ha nem, szívesen túrok neked linkeket, ahol nálam ékesszólóbban és hozzáértőbben hirdetik az igét. :)

19

ses, 2003. szeptember 17. szerda, 10:00 (#)

Felhozom a témát: van valakinek ötlete a feladványra?

20

mikolaj, 2003. szeptember 17. szerda, 11:03 (#)

hopp, elfelejtettem válaszolni egy kérdésre... szóval értem azt az elvet, hogy válasszuk külön a formát és a tartalmat. csak azt hittem, hogy egy részletesebben kidolgozott dologról van szó. (a feladványra nincs ötletem:))

21

BiBi, 2003. szeptember 17. szerda, 19:35 (#)

feladom én is.

22

Timberhohvandi, 2003. szeptember 24. szerda, 22:35 (#)

A tudomány mai állása szerint valószínűleg nem lehetséges. Elkezdtem keresni Google-ben a dolgot, és találtam is vagy egy tucat fórumot, ahol ez volt a téma, de mikor rábukkantak a fixméretes megoldásra, örültek, mint disznó a jégen, és nem léptek tovább. Ez van. Esetleg ha nagyon erős pozitív gondolatokat tápláltok a megoldás irányába, megvalósul a CSS következő verziójában... ;-)

23

eszpee, 2003. szeptember 25. csütörtök, 09:04 (#)

talan DOM-kepes bongeszokben vmi javascripttel le lehetne kerni a tartalom meretet, es dinamikusan modositani a css-t, velemeny?

24

ses, 2003. szeptember 26. péntek, 02:51 (#)

Ebből semmit nem értek, ergo hülyeség. 8-)

25

eszpee, 2003. szeptember 26. péntek, 08:46 (#)

...és így esett el a világ egy újabb hatalmas felfedezéstől... ;)

26

Árpi, 2005. március 17. csütörtök, 07:09 (#)

Na nizujs a témában? lassan letelik az a 2 év.. Árpi

27

Blackfire, 2007. december 3. hétfő, 22:42 (#)

http://www.student.oulu.fi/~laurirai/www/css/middle/

28

Author Profile Page ervin, 2007. december 3. hétfő, 22:57 (#)

Blackfire, köszi a linket! Küzd a finn kolléga becsületesen, de ilyen technikákra azért nem építenék komoly site-ot.


Hozzászólsz?

Igen

Hozzászólást csak névvel együtt fogadunk el. Ha linket írsz be, akkor előtte és utána hagyj egy szóközt, főleg akkor, ha zárójelbe teszed.


Az oldal tetejére | Szerzők, tudnivalók, feedek | sesblog és Kispad © 2003-2010 ervin, eszpee, stsmork