ugrás a tartalomhoz

Liquid layout kialakítása fórumhoz

MrPrise · 2006. Jún. 30. (P), 08.51
Sziasztok!

Próbálkozok egy liquid forum layout megvalósításával. Ami tutorialt a neten találtam ott mindenhol csak egy sornyi "doboz" van divekből. Van ahol position:absolute-ot használnak top:akármivel ami nekem teljesen nem jó, mert a fórum sorait egymás alatt szeretném látni, nem egy helyen...
A kérdésem az, hogy hogyan lehet div-ekkel olyat csinálni, hogy legyen 3 vagy 4 oszlopom és ebből az egyik mérete változzon a böngésző ablak méretével együtt. Csináltam valamit, ahol változik, de mindegyik oszlopom egyformán csökkent amikor százalékkal adtam meg a szélességet. Próbáltam pixelben megadni a jobb szélső oszlopok méretét, de így is hasonló a helyzet. Akkor is szétcsúszik az egész ha 1280-tól alig valamivel állítom kisebbre az ablakot. Azt szeretném ha legalább 800x600-ig le lehetne menni anélkül, hogy szétesne minden.

http://smf.enterpriseforever.org/index.php?board=1.0

Egyelőre ezt az egy oldalt szeretném így megcsinálni, aztán ha ez már ok akkor talán a többi is menni fog.

Köszi!
‹ 18. Layer helyett... Hiba HTML validálás közben ›
 ■
1

erre gondolsz

rudo · 2006. Jún. 30. (P), 14.58

<html>
<head>
<style>
div
	{
	float:left;
	border:1px solid red;
	}
#left
	{
	position:relative;
	height:300px;
	width:100px;
	}		
#mid
	{
	position:relative;
	height:100%;
	width:100px;
	}
#right
	{
	position:relative;
	height:200px;
	width:100px;
	}			
</style>
</head>
<body>

	<div id="left"></div>
	<div id="mid"></div>
	<div id="left"></div>
	
</body>
</html>
2

aha...

rudo · 2006. Jún. 30. (P), 15.04
elolvastam mégegyszer:
neked széltiben kell két fix méretű oszlop, meg egy ami kitölti a maradék helyet?
4

Nem egészen

MrPrise · 2006. Jún. 30. (P), 15.30
Nem, inkább bal szélső töltse ki a maradékot a többi legyen fix méretű (2 vagy 3 oszlop).
Ha megnézed a linket, láthatod, hogy mihez kellene.
Az ott lévő oszlopok közül csak a topic neve oszlop az ami nagyon változó, a többi jóval kiszámíthatóbb.
3

ez viszont már horizontálisan is jó

rudo · 2006. Jún. 30. (P), 15.29
<html>
<head>
<style>
div
	{
	border:1px solid red;
	}
#mid
	{
	margin-right:100px;
	margin-left:100px;
	height:100%;
	}
#left
	{
	position:absolute;
	top:10px;
	left:0px;
	width:100px;
	height:200px;
	}	
#right
	{
	position:absolute;
	top:10px;
	right:0px;
	width:100px;
	height:300px;
	}
</style>
</head>
<body>

	<div id="left"></div>
	<div id="mid"></div>
	<div id="right"></div>

</body>
</html>
5

Köszi, ez már majdnem jó ;-)

MrPrise · 2006. Jún. 30. (P), 15.33
Nekem nem csak 3 doboz kellene. Soraim vannak amelyekben az egyes oszlopokra eső részek lennének ez a 3 doboz. Gyakorlatilag egy táblázatot szeretnék div-ekkel, úgy hogy meg tudjam mondani melyik oszlop mérete változhat ha változik a böngésző ablak mérete.
Köszönöm ezt az utolsó példádat, biztos lesz ahol fogom tudni majd ezt is használni, de a jelenlegi problémámra ez nem megoldás. Az abszolút poziciánális miatt sem.
Dícséretes, hogy miután regisztráltál egyből azon munkálkodsz, hogy másoknak segíts! Köszi!
6

Valódi táblázatot nem kell divekkel helyettesíteni

fberci · 2006. Jún. 30. (P), 17.19
Miért akarod a táblázatot helyettesíteni divekkel? A táblázatnak is megvan a saját feladata, és a divnek (és az egyéb (X)HTML elemeknek) is. Szerintem ide tökéletes a táblázat (vannak oszlopok, amelyek mindig ugyanazok, valamint az adatok sorokban helyezkednek el, a sorok olvashatók). Nem kell átesni a ló túlsó oldalára. ;-)
7

Lehet hogy ő a megoldás?

Razor_alpha · 2006. Júl. 1. (Szo), 02.33
Gyakran olvashatsz te is olyat, hogy azt állítja a forrás hogy a profi oldalakon nincsenek táblázatok .. sztem kis túlzás bár én is igyekszem nem használni őket ... (3 éve még a suliban használtam útoljára)
én mondjuk a problémára a fenti megoldást javasolnám, és a méretek miatt a div a divben megoldást ...
nekem az esett le hogy sorokat szeretnél kiiratni
(vmiide; vmikicsitiddébbdefixhelyenésmérettel;idevmiaminekváltozóméretevan)
akkor ezt megtudod oldani hogy while ciklussal iratod egymás alá a sorokat (pl mysqlből) (
<div id="amibefoglalja-a-sort"><div id="elsotartalom"></div><div id="masodik"></div><div id="esamineknemleszfixmerete"></div></div>)
az első kettőnek css-ben add meg a fix méretet a harmadik pedig hadd legyen változó hosszú ...

remélem jól sejtettem mire gondolsz ... bár az oldalból nekem sem ez esett le elsőre ... persze ennek az a hátránya hoy baromi sok dived lesz az oldalon .. nah de kit zavar ..
8

több változó szélességű oszlop

rudo · 2006. Júl. 1. (Szo), 14.38
ha olyat szeretnél, ahol egynél több oszlop van, aminek nem adod meg a szélességét, viszont azt akarod, hogy mindig kitöltsék a rendelkezésre álló helyet, akkor tényleg használj table-t. Legjobb tudomásom szerint ma még nincs más megoldás rá. Nekem nemrég olyan navigáció kellett, ahol változó a 'fülek száma' horizontálisan, viszont ki kellett tölteniük a teljes ablakot (tehát egyenletesen elosztva). Csak table-vel ment. Tud valaki mást?
10

nem azért kell

Joó Ádám · 2006. Júl. 10. (H), 22.36
Ne azért használjon ehhez a feladathoz táblázatot, mert máshogy nem sikerül, hanem azért, mert itt egy táblázatról van szó. Egy fórum index bizony tipikus táblázat: minden fórumnak van egy sora, ami fel van osztva cellákra, melyekben rendre minden sorban azonos típusú adatokat írunk ki.
Ha ennek a formázását CSS-sel csináljuk, akkor a stílus nélkül átláthatatlanná válik az oldal.
Először mindig a tiszta html legyen kész, úgy, hogy önmagában is használható legyen.
11

valóban

rudo · 2006. Júl. 11. (K), 18.58
egy fórum index valóban táblázat. bár eddig én azt hittem egy layoutról van szó. ott pedig ha lehet, kerülendő a table.
9

Köszönöm

MrPrise · 2006. Júl. 10. (H), 19.34
mindenkinek a tanácsokat. Azt hiszem táblázattal fogom megcsinálni a dolgot.