ugrás a tartalomhoz

CSS Tableless - Szétesés...

airplane · 2006. Ápr. 26. (Sze), 02.59
Hali!
Nagyban benne vagyok, h tableless oldalt kreálok. A felépítés megvan, Firefox és Opera viszi is szépen, sőt még az IE is elboldogul vele - de csak 1024-es felbontás mellett. 800x600 mellett valami oknál fogva szétesik a rendszer, és egy jó adag üres hely keletkezik a tartalomban, ami nem egy szép látvány ugye... A hiba okát nem sikerült kideríteni, így egy kis segítséget kérnék. A tesztoldal (a hiba is kijön):
http://www.freeweb.hu/gjtester/index.html
Valaki tud megoldást?
 
1

1-2 pixel...

janoszen · 2006. Ápr. 26. (Sze), 07.56
Azért van, mert a 800 széles képernyőn valami 800-hoz nagyon közeli értékkel dolgoztál. Ez azt jelenti, hogy ha pl. 1-2 pixellel keskenyebbre veszed a tartalmat vagy a menüt, akkor már jó lesz.

Mindazonáltal soha nem tudhatod, hogy a scrollbar milyen széles, stb. Ezért jó irányszám a 750px széles dizájnok tervezése, mert van "játéktér".
4

:(

airplane · 2006. Ápr. 26. (Sze), 10.20
Nem használtam konkrét értékeket, csak a menü szélességénél, ill a felső sor magasságánál. De azért köszi
2

tableless?

Anonymous · 2006. Ápr. 26. (Sze), 08.48
hááát, a tableless oldalkialakítás azt jelenti, hogy nem táblázatot használsz az oldal struktúrájának kialakításához. ennek némileg ellentmond az, hogy a body második sorában egy table tag van. az első sorában lévő scriptet pedig szerintem a head részben kéne elhelyezni.
a szétesésen segítene, ha egy befoglaló divvel körbevennéd a menü és tartalom részeket és annak egy minimum szélességet adnál meg. ezzel küszöbölhetnéd azt, hogy a menü /menuside/ és a tartalom /content/ egymás alá csúszik ha nincs elég hely, ami a float: left-ből következik. (egyébként 800x600-as felbontásban ie és ff alatt sem esik még szét, csak ha kicsit csökkented a böngésző méretét. és erre nem az a megoldás, hogy akkor 750px szélesre tervezed az oldalt, mert ha én nem teljes méretben nyitom meg az ablakot, akkor úgy sem lesz jó.)

egy-két ötlet még:
- próbálj dobozokban gondolkozni, ne táblázatokban (bal oldalnak doboz, azon belül menünek egy doboz, belépésnek egy doboz)
- a menü lehetne számozatlan lista (ul li elemek)
- ne használj abszolút pozicionálást (vannak esetek mikor kell, ebben az oldalban én nem látom szükségét)
- ne legyenek felesleges tagek, amik csak a design miatt vannak /pl shadow1-6/
- az összes stílusdefiníciót rakd ki külső fájlba, pl ilyen ne legyen:

<img src="img/bokaico.gif" width="118" height="88" alt="Bokatex Kft." name="boklogo" style="float: left; padding: 1px 0px 1px 31px;"/>
- img és br tagek végén csak xhtml-nél kell per jel
- ha már itt tartunk használhatnál strict doctype-ot

egyelőre ennyi, remélem ezzel segíteni tudok neked, nem a kedvedet szegni. ;]

gex
3

Ez így nem az igazi...

airplane · 2006. Ápr. 26. (Sze), 10.19
Köszi a tippeket, de sajnos ez most nem sokat segít. Abszolút pozícionálást egyetlen helyen használtam, csak az almenünél (legjobb tudomásom szerint legalábbis így volt). A bal menüt és a tartalmat közrefogja a #container, aminek hiába adtam meg min-width értéket, az explorer nagy ívben le..ta. Ha viszont megadok neki egy konkrét szélességet, akkor már megy, viszont pont ezt akarom elkerülni.
Egyetlen table elem található az oldalon, ennek az oka az, hogy
A menü azért nem lett lista, mert így tudtam megoldani csak, hogy ne kelljen hozzá script (még letiltott scriptek esetén is működik). A shadow1-6 tényleg a design miatt van, de ezzel kiküszöböltem két képet, és így jobbnak tűnt (bár tény, h két képpel megoldható lenne a dolog, ami viszont lassabb letöltést eredményez).
Egyébként rendkívül különös, hogy az elcsúszás nem úgy következik be, ahogy elvileg "kéne" neki: ha megadom a bordert, a teteje a felső rész alatt marad. További érdekesség, h firefox alatt semmiképp nem esik szét, hiába méretezem át az oldalt, opera alatt szintén nem, csak az IE reagálja le így. Az ok viszont rejtve marad: a címrészt és az alatt lévő tartalmat úgy tűnik a contentside aljához igazítja. Ezt, ha lemented az oldalt, és a #contentside-ba egy border-t toldasz, láthatod. De itt egy kép: http://gjtester.fw.hu/ieerror.jpg
Egyébként tényleg kösz a tippeket, pl a bokaico-nál a végén a pert nem is vettem észre:)
5

google segít

Anonymous · 2006. Ápr. 26. (Sze), 10.45
A bal menüt és a tartalmat közrefogja a #container, aminek hiába adtam meg min-width értéket, az explorer nagy ívben le..ta. Ha viszont megadok neki egy konkrét szélességet, akkor már megy, viszont pont ezt akarom elkerülni.


1. min-width-et nem ismeri ie. ha google-ben rákeresel találsz rá megoldást.
2. egyébként meg nem értem, miért akarod elkerülni a fix szélességet? fix szélességű a tartalmad, akkor az azt tartalmazó div miért nem lehet fix szélességű?

A menü azért nem lett lista, mert így tudtam megoldani csak, hogy ne kelljen hozzá script (még letiltott scriptek esetén is működik).


nem tudom hogyan tiltottad le a js-t, nekem js nélkül se ieben se ffben nem működik a popup menüd. egyébként az ilyen megvalósítások nem igazán függnek a html tagektől. keress rá itt weblaboron vagy google-ön, van pár menü, ami a rendes böngészőkben js nélkül is megy.

gex
6

Menü

airplane · 2006. Ápr. 26. (Sze), 11.22
Kis félreértés: nem az almenü, a menü. Az almenü JS-sel megy, de hamarosan CSS-es lesz az is, egyelőre a oldal működjön normálisan, utána jöhetnek a részletek:) Ha valaki tudna mutatni egy hasonló kétsávos oldalt, mint amit én akarok megcsinálni, már az is nagy segítséget jelentene. Idáig olyanokra akadtam, amik középre rakják az egészet, és nem balra-fel igazítva. A legjobb az lenne, ha a bal oldali rész fix szélességű lenne, a jobb pedig a maradék. Előre is kösz!
7

menü

Anonymous · 2006. Ápr. 26. (Sze), 11.37
végképp nem értem, minek neked táblázat a menühöz. ezt a menüt listákkal teljesen egyszerűen meg lehet oldani, mint azt már említettem. tableless szemléletmód pont azt jelenti, hogy pl egy menühöz nem táblázatot használsz.

A legjobb az lenne, ha a bal oldali rész fix szélességű lenne, a jobb pedig a maradék.

az olyan elrendezéseket, amilyet te is szeretnél liquid layoutnak hívják, ha erre rákeresel google-ön, találsz pár száz /ezer?/ oldalt, ami kifejezetten ezzel foglalkozik.

gex
8

Köszi!

airplane · 2006. Ápr. 26. (Sze), 14.21
A liquid layout volt a kulcsszó! Viszont egyelőre nem találtam olyat, ami megfelelne az elvárásoknak, de tovább keresek. Egyelőre azt találtam ki, hogy fix értéket adok meg a container doboznak, ezzel nem esik szét a szerkezet, és a szükséges szélesség is megmarad. Ezzel ugyan némi átalakítás szükséges top részem, de ez elviselhető. Mindenkinek köszönöm a tippeket és tanácsokat!