No, akkor jak2 kedvéért elmondom, hogyan lehet megcsinálni egy kétoszlopos oldalelrendezést. Tudom, hogy máshogy is meg lehet csinálni, és azt is, hogy nem vagyok én a világ legjobb designere, hogy “osszam az észt” tehát ilyen jellegű megjegyzések kíméljenek.
Ugye, azt szeretnénk, hogy legyen egy fejlécünk, alatta a tartalom, két oszloppal, majd alatta a lábléc. Ehhez ugye kell az alap HTML, ami valahogy így fest:
!lt;div id="fejlec"!gt;!lt;/div!gt;
!lt;div id="tartalom"!gt;
!lt;div id="bal"!gt;!lt;/div!gt;
!lt;div id="right"!gt;!lt;/div!gt;
!lt;/div!gt;!lt;div id="lablec"!gt;!lt;/div!gt;
Na, és akkor most jön a CSS része a dolognak. Nem kell ide táblázat, meg lehet ezt szépen is oldani:
div#tartalom{
padding: 0px;
margin: 0px;
width: 600px;
}
div#bal{
left: 0px;
top: 0px;
width: 400px;
float: right;
overflow: hidden;
}
div#right{
padding: 0px;
margin: 0px;
width: 199px;
float: left;
overflow: hidden;
}
Ez persze nagyon az alap, ezt úgy változtatjuk ahogyan szeretnénk. Nézzünk néhány apróságot.
A float, azaz lebegés azt adja meg, hogy balra, avagy jobbra “ússzon” az a bizonyos div. Ezt fontos megadni, máskulönben egymás alá kerül a két div.
Az overflow: hidden;
tulajdonság azt eredményezi, hogy ha valami nagyobb a diven belül, mint maga a div (pl. egy kép) akkor a divünk ne essen szét, hanem egyszerűen csípje le azt az óriást.
Most így nagyjából ennyi. Aztán még mutatok egy trükköt a pontozott aláhúzásra, hogy minden böngészőnél pontozott legyen az az aláhúzás.
Archie
2006. január 15. — 13:34:17
a lablec-nél pedig both: clear;
jak2
2006. január 15. — 13:35:39
1000 hála mefi! nagyon köszönöm szépen!
Balázs
2006. január 15. — 13:39:46
Lehetni lehet, azt te mondod meg, hogy az oldaladon eltűröd-e. A pozicionálással kapcsolatban meg itt van még egy CSS tipp: http://blue-cabbage.freeblog.hu/archives/2006_Jan_blue-cabbage.htm#e1173918
jak2
2006. január 15. — 13:46:51
Na regisztráltam egy avatart, s most? 😀
Archie
2006. január 15. — 13:48:42
tényleg.. ezt elírtam.. 😀
jak2
2006. január 15. — 14:45:07
Jah értem, én várok, időm mint a tenger… de nem akar sikeredni nekem ez a dives megoldás :S
Balázs
2006. január 15. — 14:49:09
Akkor gyakorolj ;]
LeGaS
2006. január 15. — 15:12:43
Én ebben csak azt nem értem, hogy a bal ID-nek miért float:right értéket illetve a jobb ID-nek miért float:left értéket adsz? Nem fordítva kéne?
jak2
2006. január 15. — 15:29:09
Na már kezdem kapizsgálni 🙂 de dani! melyik msn címemen vettél fel? mert van a régi az található meg mindenütt a neten, de ott már vagy 190 partnerem volt és már elegem volt belőlük így nem rég csináltam egy újat amit nem sokan tudnak…
jak2
2006. január 15. — 15:34:53
hát a mostani msn címem: huzsolt92@hotmail.com
jak2
2006. január 15. — 15:50:14
szivesen 🙂
jak2
2006. január 15. — 16:56:12
Na már lassan kezd alakúlni ez a css-s megoldás meg dives megoldással 🙂 remek
sl8r
2006. február 04. — 11:32:47
észrevétel:
div#right és id=”jobb”
n2k
2006. június 22. — 12:40:24
mefi 150+450 az nem 600? 😛
csak azért, mert a tartalom 500px nem? 😛
n2k
2006. június 22. — 12:40:24
garavatrt hogy kell csinálni ide? regeltem a gravatar.com-on meg is van az a hosszú linkem, mit kezdjek vele? 😀
n2k
2006. június 22. — 12:40:24
ja, vágom! 🙂
n2k
2006. június 22. — 12:40:24
látom javítottad 600px-ra 😛
n2k
2006. június 22. — 12:40:24
jak2, msn-en felvettelek!
n2k
2006. június 22. — 12:40:24
oldaladon láttam 🙂 akkor dobj ide egy mailt a címeddel: xster@cobraweb.hu vagy írd le ide! 🙂
n2k
2006. június 22. — 12:40:24
mefi: átírnád majd a linkem daniboy.try.hu-ra?! köszi 🙂
n2k
2006. június 22. — 12:40:24
köszi! 🙂
Mefi
2006. július 22. — 12:27:48
Persze, ezeket direkt nem írtam le. Ez elég velősen a két oszlop, aztán csókolom 🙂
Mefi
2006. július 22. — 12:27:48
Hálából inkább regisztrálj egy avatart. http://gravatar.com
Mefi
2006. július 22. — 12:27:48
Dani: Meg kell várni míg visszaigazolják, hogy megjelenhet a gravatarod. Mert nem lehet rajta mondjuk pornó vagy hasonló.
Mefi
2006. július 22. — 12:27:48
Archie, egyébként clear: both; a helyes ;]
Mefi
2006. július 22. — 12:27:48
Igen, elírtam.
Mefi
2006. július 22. — 12:27:48
jak2: Várni kell, amíg hitelesítik.
Mefi
2006. július 22. — 12:27:48
Halgass Balázsra, igaza van. Ezt én is úgy értettem meg, hogy gyakoroltam sokat. Adj neki egy keretet, és akkor látod, hogy mi merre. Ha kell, pixelenként tologasd.
Mefi
2006. július 22. — 12:27:48
Fordítva is megoldható, ám én jobb szeretem így. Megmondom miért. Ha egy div jobbra van floatolva, akkor az minden esetben jobbra fog mozogni, nőni és mindenféle tevékenységet folytatni. Namármost a bal oldal megy jobbra, a jobb meg megy balra. Érted?
Másrészt a jobbra floatolt diveket jobbra lehet pozicionálni, és az nagyon kényelmes, és egyszerű megoldás.
A CSS pozicionálásban ez a szép, hogy mindenki úgy oldja meg, ahogy szereti 🙂
Mefi
2006. július 22. — 12:27:48
Meg van történve ;]
Mefi
2006. július 22. — 12:27:48
Nem tesz semmit.