ugrás a tartalomhoz

Három hasábos oldalszerkezet (div)

Anonymous · 2006. Jan. 16. (H), 17.23
Dinamikusan generálom az XHTML kimenetet. Lehetőség van modulonként ki/be kapcsolgatni a jobb/bal oldali hasábokat, ezért a középső hasábom nem lehet fix, hogy kompenzálni tudja az egyik vagy akár mindkét oldal hely foglalását. Nem találtam megoldást arra, hogyan lehetne ezt megoldani táblázatok nélkül. Ebben kérnék egy kis segítséget.

<div style="width: 150px; float: left; border-color: #000000; border-style: solid; border-width: 1px;">Bal</div>
<div style="width: 100%; float: left; border-color: #000000; border-style: solid; border-width: 1px;">Közép</div>
<div style="width: 150px; float: left; border-color: #000000; border-style: solid; border-width: 1px;">Jobb</div>
Tehát a fenti példa alapján, arra lenne szükségem, hogy a középső div mindig 100% legyen (akár egy fix kereten belül is, ami mindhárom hasábot magában foglalja). Nyílván volt már ilyen kérdés, de sajnos nem találtam a megfelelő keresőszavakat, hogy rátaláljak a topicra...
‹ IE táblázat height="100%" divek egymáson ›
 ■
1

google

akosbacsi · 2006. Jan. 16. (H), 17.41
http://www.google.co.hu/search?q=3+column+css+layout
2

Egy megoldás

tiny · 2006. Jan. 16. (H), 17.49
A legegyszerűbb szerintem, ha már úgyis dinamikus generálod az az, hogy mindhárom szélességét %-ban adod meg és akkor lesz 3 eset. Az első, hogy csak a középső div van, akkor értelemszerűen width: 99% (keret miatt IE-ben 100-nál csúnya), ha 1 db van (bal/jobb), akkor 89%, a másikaknak meg mondjuk 10%, ha meg mindkettőt megjeleníted, akkor ugyanúgy 10-10% esetén 79%.

Ez xhtml-lel:

<div id="bal">Bal</div>
<div id="kozep">Közép</div>
<div id="jobb">Jobb</div>
Hozzá meg javascriptre bocs már nem jut időm, ott meg csinálsz egy függvényt egy divid bemenettel és ha display=none akkor display-t block-ra váltod, ha fordítva, akkor none-ra és a függvény 2. felében meg csinálsz hozzá egy olyat, hogy ha bal és jobb id-jű div is meg van jelenítve akkor 79%, es igy tovabb, ahogy ezelott leirtam. Remélem segítettem :)
Mr.Tiny [http://tiny.uw.hu]
3

<Nincs cím>

Anonymous · 2006. Jan. 16. (H), 18.15
Sajnos ez nem jó, mert a két szélső hasábomnak mindenképpen fixnek kell lennie. A másik, hogy a JS sajnos nem igazán a barátom. Kerülöm, amennyire lehet (eddig jól ment), mert egyrészt nem értek hozzá, másrészt sajnos túlságosan kliensfüggő (apróságokra lehet és sajnos néha kell is használni, de pont az oldal szerkezet kialakítására...?). Azért köszönöm az eddigieket, és ha esetleg lenne más ötleted... :)
4

Js vs. php?

tiny · 2006. Jan. 16. (H), 18.45
Hát a témakörből gondoltam, hogy js-t használsz. Akkor php a te barátod? Egyébként attól, hogy kliensfüggő, attól nem kell mellőzni. Nagyon jó, hogy anélkül is megy az oldalad, de akinek be van kapcsolva, azoknak meg lehetne könnyíteni az életét. Megkérdezhetem miért kell fixnek lennie? Mert ha azért csinálod fixre, hogy annál kisebb ne lehessen, akkor még mindig be lehet sztem tenni egy min-width értéket, a többit meg php-vel úgy kiszolgálni (százalékosan), ahogy azt az előző hozzászólásomban js-re vonatkoztatva leírtam.
Mr.Tiny
5

<Nincs cím>

Anonymous · 2006. Jan. 16. (H), 19.25
Egyelőre csak kapargatom ezt a dives témát. Táblázat párti vagyok - és valószínüleg az is maradok, ha már egy ilyen apróságot se lehet divekkel egyszerűen és szépen megoldani... A fix oldalsó hasábokhoz is csak azért ragaszkodom, mert "mi van, ha a jövőben a dizájnolás miatt pont így kell", például a grafikai elemeknek nem szabad egy pixelt sem elcsúszni a helyükről, vagy bármi más felmerülhet. Szóval a témát azért nyitottam, mert ha ebben a dives dologban sikerülne minden felmerülő kérdésre használható kódot találni/kitalálni/kapni, akkor esetleg az egész táblázatos HTML kimenetemet lecserélném/lecseréltem volna a manapság olyan divatos divekre.
6

<Nincs cím>

suexID · 2006. Jan. 16. (H), 20.10
Az a baj, hogy nem jó oldalról közelítitek meg a problémát. Arról van szó ugye, hogy ha az oldal adminfelületén kikapcsolod az adott modulokat, akkor az üres hasáb se legyen ott? Akkor a megoldás annyi, hogy a php-ben megnézed, hogy az adott hasábban van-e valami és ha nincs, akkor hozzárendeled mondjuk a style_nincs_hasab.css-t, vagy ha van, akkor a style_van_hasab.css-t. Előbbinél az adott div-nek beállítassz, egy display: none-t, míg a másodiknál pedig amilyen szélességűre akarod.

Egyébként ne mondd nekem, hogy van olyan dolog, amit nem lehet divekkel megcsinálni, de táblázattal igen, mert ez így ebben a formában nem igaz.
7

<Nincs cím>

Anonymous · 2006. Jan. 16. (H), 20.23
Ez a megoldás sem jó. Gondold végig. Ha nincs keretem (tehát a három div össz szélessége egyenlő a böngésző használt felbontásának szélességével, azaz 100%), akkor ott vagyunk, ahol elkezdtük, tehát megjelenik a két oldalsó hasáb, és a közepét nem tudom közéjük 100%-ra kihúzni. Amit mondtál, csak akkor működhetne, ha fix lehet a közepe, de ez a lényeg, hogy nem lehet fix...

Azt nem mondtam, hogy van olyan, amit táblázattal lehet és CSS-el nem (bár mintha valahol annó olvasta volna erre is példát). Azt viszont mondom, hogy van, amit táblázattal nagyságrendekkel egyszerűbb, példának kapásból itt van a jelen probléma.
15

<Nincs cím>

suexID · 2006. Jan. 17. (K), 07.04
Az a baj, hogy hiába állok le itt most vázolni neked egy megoldást, ha te még a táblázatos keretek közé szorított megoldásokban élsz, aszerint gondolkozol. A divekben pont az a szép, hogy úgy pozícionálod, méretezed őket, ahogy akarod, nem vagy egy rácsba szorítva.

A megoldás (hangsúlyozom) pofonegyszerű. Van A,B,C hasábod, ebből mondjuk neked a "B" hasábban van a tartalmad. Az elrendezések tehát valami ilyesmik lehetnek:

+--A--|----B----|--C--+

+-------B-------|--C--+

+--A--|-------B-------+

+----------B----------+

Ehhez elméletileg kell 1 alap CSS fájl, ami azoknak az elemeknek a tulajdonságait tartalmazza, amik minden esetben megjelennek. Ezen túl kell minden egyes állapothoz egy külön CSS, amibe csak ezeknek a hasáboknak a megjelenítését rögzíted. Aztán PHP-ben eldöntöd, hogy az adott oszlopban van-e valami, avagy nincs és ennek megfelelőlen csatolod a link tag használatával a megfelelő css leírást, plusz az alap css-t. Az oszlopok szélességét ezen megoldás esetén teljes nyugalommal megadhatod pixelpontosan is, hiszen mindig a körülményeknek megfelelő CSS lesz csatolva.
17

Nem is kell külön fájl

Jano · 2006. Jan. 17. (K), 11.44
Most jutott eszembe:
Egy CSS-ben is megoldható a dolog, ha pl a befoglalo elemnek (ha van ilyen) vagy akár a body tagnek megadjuk a megfelelo osztályt. Ekkor az osszes lehetoseg szerepelhet egyetlen fajlban. Pl a kozepso oszlopra vonatkozo szabalyok:

.menu_tartalom_egyeb #tartalom {
 margin-left:150px;
 margin-right:-150px;
 padding-right:150px;
}

.menu_tartalom #tartalom {
 margin-left:150px;
}
8

Más

tiny · 2006. Jan. 16. (H), 21.03
"Egy ilyen egyszerű dolgot ..."
Hát lehet, hogy nem lehet megoldani. Nem tudom. De azt igen, hogy ha te egy normális dizájn-t csinálsz, akkor az is idomulni fog a felbontáshoz, és meg lehet csinálni úgy. Éppen ezért jön ki, hogy ami táblázattal egyszerű, s divvel nem azt is meg lehet csinálni de csak úgy, ha a dizájn szemléleteden is változtatsz. Mert ugye már annak is része a css. Így tehát vagy %-kal csinálsz mindent vagy optimalizálsz 800*600-ra vagy használsz js-t :)
Mr.Tiny[http://tiny.uw.hu]
9

<Nincs cím>

Anonymous · 2006. Jan. 16. (H), 21.12
"tehát vagy %-kal csinálsz mindent vagy optimalizálsz 800*600-ra vagy használsz js-t :)"

Vagy pedig maradok a jól bevált táblázatoknál, és nincs a világon semmi probléma :) Sajnos nagyon így fest a dolog...
10

Jah

tiny · 2006. Jan. 16. (H), 21.25
Hát én sem tudok jobbat. Egyébként engem is nehéz volt áttéríteni a táblázatokról, de div-vel sokkal átláthatóbb a kód és könnyebb a formázás megváltoztatása is, plusz pont egy dizájn lecserélése nagyon egyszerű vele...
Amúgy melyik lapról van szó?
Mr.Tiny [http://tiny.uw.hu]
11

Margó trükk

Jano · 2006. Jan. 16. (H), 21.41
Eloszor is: ha nem akarod megtanulni a CSS-t, akkor ne tedd! A CSS nem trend, nem divat hanem a megfelelo modja annak, ahogyan oldalakt kell osszerakni. Ha nem akarod megtanulni, az a te lustasagod.

A dolog nem nehéz, csak olyan megoldás nincs (nem jut eszembe) ami eseten a 3 kulonbozo HTML-hez 1 CSS eleg lenne. Mivel a HTML-eket PHP generalja es igy a szerver oldalon eldol, hogy mit kell kikuldeni, ezert nem nagy hatrany, ha esetleg a CSS-t is ennek megfeleloen kuldi ki a szerver (pontosabban annak csak egy részet).

A feladat: 3 oszlop, 2 szelso fix szelessegu, kozepso pedig minden maradek helyet betolt.

A bal oldali es a kozepso oszlop egymas melle rakasa nem okozhat senkinek problémat: baloldali oszlop float:left, a kozepso oszlopnak pedig ugyanolyan szelessegu bal margot megadni, mint amilyen szeles a bal oldali oszlop. Ennyi.

Ennyi lenne, ha nem lenne IE. Neki van egy kedves 3px-es hibája. Erre kell egy kis javítás.
IE 3px Gap

Ha ez megvan, johet a masik oldal. Itt az lesz a trukk, hogy a kozepso oldalnak NEGATIV margot adunk, a jobb oldali oszlopot pedig - hiába van jobb oldalon - balra fogjuk floatolni. A negativ margo es a jobb oszlop szelessege megyegyezik. Ebben a pillanatban a jobb oldali oszlop rajta van a kozepson. Hogy kitoljuk alola, a kozepso oszlopnak a jobb oldali paddingjat hasznaljuk fel. Nyilvanvaloan a padding erteke minimum annyi legyen mint a jobb oldali oszlop szelessege.
12

Ez cool :)

tiny · 2006. Jan. 16. (H), 21.53
Ez nekem eszembe se jutott, pedig nem egy helyen láttam ilyet. Csak azt nem tudtam minek :). Akkor bocsi, ha valahol azt írtam volna, hogy ezt nem lehet megoldani :P
Mr.Tiny [http://tiny.uw.hu]
13

<Nincs cím>

Anonymous · 2006. Jan. 16. (H), 23.10
Előszöris: Nem hiszem, hogy lustaság lenne, ha A-ból B pontba eljutáshoz a legrövidebb, egyenes utat választanám. Ami ezesetben egy szimpla táblázatot jelent egy mindenféle trükkökkel tűzdelt div-el szemben.
Másodszor: Ha lusta volnék tanulni, nem nyitottam volna ezt a topicot.
Személyeskedést és a saját véleményünket table vs div témában ezzel szerintem félre is tehetjük, és koncentrálhatunk az adott kérdésre. Illetve csak koncentrálhatnánk, ha nem lennének egyéb elfoglaltságaim. A topic nyitásakor még azt gondoltam, hogy biztosan van valami tök egyszerű módja a probléma megoldásának, amire nem gondoltam még. De látom, hogy nincs, és nincs most időm összerakni, amit leírtál. Mindenesetre köszönöm, igaz nem olyan sima ügy, mint gondoltam, de azért ki fogom próbálni a gyakorlatban, és meglátom mi sül ki belőle. Hogy a topic megfelelően le is legyen zárva, majd postolom a végleges verzió kódját.
Üdv, és köszönöm mindenki segítségét.
14

CSS-t tanulni = újra tanulni

Jano · 2006. Jan. 17. (K), 01.44
Szerintem az, hogy 3 tulajdonságot meg kell adni az elég egyszerű megoldás. Ami nem egyszerű, az az hogy megértsed, hogy pontosan mi is történik. Ha a CSS-t meg akarod tanulni, akkor az azt jelenti, hogy el kell viselned, hogy újra kezdővé vállsz, mert teljesen más a dolog logikája mint a tablazatoknal. A legtobb fejleszto ezt nem akarja elfogadni és inkabb rafogja, hogy a CSS valami uj bugyuta trend.

Nem akarlak meggyozni itt es most a CSS-rol, csak annyit javaslok, hogyha CSS-sel akarsz megoldani dolgokat es meg akarod tanulni, akkor ne azzal kerdezz, hogy en ezt 2 perc alatt megoldom tablazatokkal, te tudsz-e mutatni olyat amivel masfel?

CSS-t tanulni 3 reszbol all. Egyreszt meg kell erteni a szabvanynak az alap logikajat, masodszor meg kell ismerkedni a bongeszok (es itt 90%-ban az IE) hibairol es masfajta ertelmezeserol, harmadreszt meg kell tanulni az evek soran sok okos ember altal kitalalt technikakat. Mig a tablazatoknal egy egyszeru beracsozott feluletben kell gondolkodni 2D-ben, addig CSS-sel az egymasba agyazott elemek altal alkotott egymas felett levo teglalap alakzatokban, es az egymas utan jovo elemek egymas utain, melletti teglalap alakzataiban, amik hol osszefugnek egymassal, hol meg nem. Tablazatnal annyit kell tudni, hogy cellpadding=0 cellspacing=0 meg minden nem fix meretu cella legyen 100% aztan kesz. A CSS joval bonyolultabb.
16

ez szep

Anonymous · 2006. Jan. 17. (K), 09.06
jo kis osszefoglalo :) tetszik :)
--
ashnur(unok loginolni..vajon mennyire vagyok lusta ? :P )