css: mellőzni a táblázatokat... de hogyan pozicionáljak?
Sziasztok!
"Régebben" a pozicionálást táblázatokkal volt szokás megoldani, mostanában a CSS járja... Az igazság az, hogy nekem ez nagyon ködös (tény, hogy igen kezdő vagyok még a CSS-ben...)
Átolvastam a CSS cikk-sorozatot, de nem találtam benne erre vonatkozó információt...
Ha mondjuk úgy szeretném felosztani az oldalamat, mint azt a http://ejf.uw.hu/index.html oldalon látszik, de nem táblázattal megoldva, azt kb hogyan lehetne CSS-ben?
Esetleg valami hasonló oldal, vagy leírás linkjét ha valaki bepötyögné ide, azt nagyon megköszönném!
Üdv.: Aletta
■ "Régebben" a pozicionálást táblázatokkal volt szokás megoldani, mostanában a CSS járja... Az igazság az, hogy nekem ez nagyon ködös (tény, hogy igen kezdő vagyok még a CSS-ben...)
Átolvastam a CSS cikk-sorozatot, de nem találtam benne erre vonatkozó információt...
Ha mondjuk úgy szeretném felosztani az oldalamat, mint azt a http://ejf.uw.hu/index.html oldalon látszik, de nem táblázattal megoldva, azt kb hogyan lehetne CSS-ben?
Esetleg valami hasonló oldal, vagy leírás linkjét ha valaki bepötyögné ide, azt nagyon megköszönném!
Üdv.: Aletta
Hagyjad
oké, nem piszkálom :)
Mert megpróbáltam már hasonló felépítésű lapot, s azt a bizonyos 3 oszlopot div-be tettem, s azokat probáltam egymás mellé floatolni... Nem is mondom mi lett az eredmény... :(
Amúgy megnyugtattál. :)
Aletta
display, position, float
display: inline /*igy ha kifernek egymas mellé, odakerulnek */
position: absolute /*igy pedig oda teszed ahova akarod! akar egymasra is. left, top, bottom, és right szelektorokkal..*/
float: left; /*ez a tökéletes megoldás*/
thx!
Üdv.: Aletta
display:inline-t ne!
Az abszolút pozicionálás elsőre a legkönnyebnek tűnik, de ezzel jön leghamarabb is a probléma, amikor egy nem fix magasságú abszolút pozicionált elem után akarunk valamit megjeleníteni. Ez nem fog menni, mert az abszolút pozicionált elem úgymond nem hat a környezetére.
Float használatát kell megtanulni. Floatutorial
Még később esetleg majd használható lesz a display:table-cell. Egyelőre ezt IE nem támogatja.
Kellemes oldal. Szerintem
Szerintem ezeket érdemes elolvasnod:
http://www.maxdesign.com.au/about_russ.cfm
Az tényleg nem lenne baj, hogy a főoldalon a felépítést egy táblázat osztja három oszlopra, de a Tananyagok oldalon szerintem felesleges az a sok táblázat, ráadásul ugyanazzal az osztállyal. Próbáld meg kiváltani egy felsorolással, lásd Listamatic a felső linken, vagy Definition lists:
http://www.maxdesign.com.au/presentation/definition/
A linkek oldalon szerintem a sok span tag-et ki tudod váltani egy közvetlenül az "a" tag-re mutató CSS tulajdonsággal.
Az a.link {...}, vagy még egyszerűbb:
td.altcella a:link {...} elemkiválasztóval kiválthatod azt a sok sapn tag-et.
Ha a fenti tutorialok alapján nem boldogulsz, írj: segítek szívesen.
Tomek73
köszi mindenkinek...
A tananyagoknál tudom, hogy pocsékul van megoldva... (két vizsga közti kényszer- és sürgőségi megoldásként ezt volt legegyszerűbb). Javítani fogom, ha mást nem, minimum egy normális táblázatba rakom az egészet. mindenesetre elgondolkodtató a listás megoldás (eszembe nem jutott volna magamtól...)
Jano: akárhogy pakolásztam, nem jött össze-floatolni a három oszlopot egymás mellé... Példának megnéztem a zengardent... (inkább ne tettem volna).
Azt szeretném megkérdezni: érdemes-e egy ilyen oldalnál css-sel, s nem táblázattal megoldani? Mert mostmár kételkedek a CSS-ben...
(?)
Üdv.: Aletta
Re: Nem jött össze
Attila
Mivel nem jött sehogy
az első oszlop (div-ben) float: left-tel volt, illetve 200px szélesre lett állítva... De a második oszlopot sehogy se tudtam mellé illetszteni, mindig alatta jelent meg (hol középen, hogy jobbra-balra, de mellé nem tudtam navigálni)... Nem találtam hozzá semmit a pozicionálásról (a polyhisztoros CSS2 fordításban keresgéltem).
Azt hittem ez egy eléggé triviális dolog, s majd különböző "CSS kezdőknek" tipusú oldalakon majd találok rá megoldást... De még csak meg sem említette senki.
Lehet, hogy én vagyok még nagyon "kismókus" a témához...?
Üdv.: Aletta
Példa
http://blog.aid.hu/file/3-oszlopos-elrendezes.html
Fontos a megadott
DOCTYPEaz alkalmazott CSS megoldások miatt.Attila
Az alábbi oldalakon
http://www.glish.com/css/
http://www.maxdesign.com.au/presentation/process/index.cfm
http://www.maxdesign.com.au/presentation/wentworth/
http://www.bluerobot.com/web/layouts/
Ezeken az oldalakon találsz példát 2-3-4 oszlopos megoldásokat, csak nézd át a forrásokat, szerintem világos lesz a fix és a fluid kialakítás közti különbség.
A Jano és általam javasolt Floattutorial-hoz (http://css.maxdesign.com.au/floatutorial/) szerintem nem szükséges angol tudás, mivel a HTML és CSS forrásból megérthető a float használata.
Tényleg látni kellene a forráskódot, hogy segíteni tudjunk.
Tomek73
átnézem
Üdv, s minden jót.: Aletta
angolt meg tanulj
CSS Zen Garden
Ha CSS kódokra vágytok, itt van tömkelegével: http://www.csszengarden.com/ Minden ami szem-szájnak ingere. :)
ProClub
proclub##kukac##karinthy.hu