ugrás a tartalomhoz

CSS - A sírba visz!

csser · 2004. Nov. 27. (Szo), 11.20
Helló!

Szeretném átírni táblázattal készült oldalam designját CSS-be (div stb.). De ami jó mondjuk IE alatt, az nem megy Firefox alatt... És már a hajamat tépem miatta.

http://niel.atw.hu/e107_themes/clan/forum/elrendezes.png

Így szeretném elrendezni. Vki tudna segíteni? Nagyon hálás lennék érte!!
‹ JS: form-checkbox kipipalas scrollbar ›
 ■
1

Sírba azért ne vigyen:)

Anonymous · 2004. Nov. 27. (Szo), 12.07
Hát ettől a png-ből nem nagyon okosnak lenni, mert hogy mi nem tetszik az IE-nek csak a stíluslapból derülne ki.
Ahogy nézem az elrendezést nincsen vele különösebb gond, szal kivitelezhető. Tedd az egészet egy container div-be. Amit még megfigyeltem, hogy IE alatt az az, hogy néha teljesen idióta módon kezeli le az absolute pozícionálást, gyak semmi rendszert nem tudtam felfedezni benne, de az IE pontosan az a browser ami magasról tesz minden szabványra.
A http://www.csszengarden.com/ - on nézz körül, nem csak jó megoldások vannak, remek designokkal.
2

cső,

bbalint · 2004. Nov. 27. (Szo), 13.36
(szvsz) ez "csak" 5, azaz öt darab balra float-olt div ...

XHTML kód

<?xml version="1.0" encoding="ISO-8859-2"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu" dir="ltr">
<head>
<title>öt div</title>
<style type="text/css"><![CDATA[
#tarto-kozepre{
text-align: center;
}
#tarto{
margin: 0 auto;
text-align: left;
width: 700px;
}
#tarto div{
clear: right;
float: left;
}
#div1,
#div3{
width: 150px;
}
#div1{
background: #ccc;
}
#div2{
background: #99f;
width: 550px;
}
#div3{
background: #00c;
}
#div4{
background: #3c3;
width: 450px;
}
#div5{
background: #633;
width: 100px;
}
#div1,
#div2{
height: 100px;
}
#div3,
#div4,
#div5{
height: 250px;
}
]]>
</style>
</head>
<body>
<div id="tarto-kozepre">
<div id="tarto">
<div id="div1"/>
<div id="div2"/>
<div id="div3"/>
<div id="div4"/>
<div id="div5"/>
</div>
</div>
</body>
</html>
HTML kód:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="hu" dir="ltr">
<head>
<title>öt div</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-2">
<style type="text/css"><!--
#tarto-kozepre{
text-align: center;
}
#tarto{
margin: 0 auto;
text-align: left;
width: 700px;
}
#tarto div{
clear: right;
float: left;
}
#div1,
#div3{
width: 150px;
}
#div1{
background: #ccc;
}
#div2{
background: #99f;
width: 550px;
}
#div3{
background: #00c;
}
#div4{
background: #3c3;
width: 450px;
}
#div5{
background: #633;
width: 100px;
}
#div1,
#div2{
height: 100px;
}
#div3,
#div4,
#div5{
height: 250px;
}

#tarto br{
clear: both;
}
-->
</style>
</head>
<body>
<div id="tarto-kozepre">
<div id="tarto">
<div id="div1"></div>
<div id="div2"></div><br>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
</div>
</div>
</body>
</html>
kipróbálva windows-on: Firefox (0.9), Opera 7.23 böngészőkkel, illetve ilyenekkel is: IE 4.01, IE 5.01 SP 2, IE 5.5 SP 2 és IE 6.0.2600.
mindegyikkel műxik és ugyanúgy jelenik meg szépen.
[internet explorer-ben csak a HTML kód működik]

még arra kő figyelni, hogy internet explorer; aminak csak a 2001-es verziójában jelent meg a szabvány-kompatibilis(abb) mód, ezért. a régebbi internet explorer és a hatos verzijó (ún.) quirks módban máshogy értelmezik a doboz modellt (box model) így ha a említett dobozoknak margójuk, kitöltésük vagy keretük van, akkor igen máshogy fog kinézeni internet explorer-ben, mint egy böngészőben,

sok sikert, meg ilyesmi.

bbalint
3

Na ez jó is lenne, csak ha a

csser · 2004. Nov. 27. (Szo), 19.56
Na ez jó is lenne, csak ha az nem adok neki fix magasságot (már pedig ez normál esetben így is van), akkor nem egyenlő a height-jük. Akkor se, ha 100%-ot adok nekik.

http://niel.atw.hu/e107_themes/clan/forum/elrendezes2.png

Itt a kék a leghosszabb, aztán a barnás majd a zöld következik. Milyen beállítást adjak neki, hogy mind a 3 oszlop egyforma magas legyen változó tartalom esetén is? Már kb. 1 órája próbálkozom, de nem akar menni... :(
4

ööö

bbalint · 2004. Nov. 27. (Szo), 20.05
legjobb tudomásom szerint annak megoldása, hogy mindig ua magasak legyenek - lehetetlen.
egy olyannal lehet trükközni, hogy azt a három hasábtot belerakod még egy div-be, aminek adol egy megfelelő hátteret, ami elég ha egy pixel magas és úgy néz ki, hogy
<#div három szélességnyi #div3 háttérszín> + <#div4 szélességnyi #div négyháttérszín> + <#div5 szélességnyit #div5 háttérszín>
és akkor nagyjából meg van a dolog hat ása ...

egyéb megoldásról nem naon tuok, nem vaok css guru meg semmi ilyesmi.

bbalint
5

Csak az a baj (ahogy a képen

csser · 2004. Nov. 27. (Szo), 20.52
Csak az a baj (ahogy a képen is látható), hogy mind a 3 DIVnek van oldalt egy csíkja (border-left illetve border-right). Az általad javasolt megoldás is jó is lenne, ha nem lenne az a vonal. Mit csináljak? Nem igaz, hogy nincs erre megoldás!

Arra gondoltam, hogy csinálok egy új containert, és ha az abban lévő diveknek 100% magasságot adok, akkor ELVILEG akkorának kellene lennie, mint a containernek, és így meg is oldódna a probléma... De a gyakorlatban nem megy... :(

Boogie, olvastam pár CSS ciket, amiket te írtál! Valószínűleg profi CSS-es vagy, nem tudsz segíteni?
6

clearer div

bbalint · 2004. Nov. 27. (Szo), 21.28
valahogy így nevezik, valahol... szóval azt, hogy ezek most ilyen float-olódó dobozok és olyankor a tartójuk magassága nem nyúlik velük, ha.
ha nem van egy ilyen törlő doboz, ami viszont "rendbe" teszi a dolgokat:
tegyél a #div5 után egy ilyesmit:

<div style="float:none !important;clear:both !important;height:1px;overflow:hidden;"></div>
és a három-négy-ötös diveket tegyed bele egy másik div-be, aminek adol olyan hátteret, amitől előáll a keret... vagy ami kell.

bbalint
7

faux columns

Hojtsy Gábor · 2004. Nov. 28. (V), 13.29
A különböző magasságú, de egy magasságúnak kinéző oszlopokra mindenfelé a faux columns megoldást használják. Legalábbis ennek egy variációját használja a Weblabor és a Drupal.hu is.
8

Demost ezzel hogy oldjam meg

csser · 2004. Nov. 28. (V), 14.34
Demost ezzel hogy oldjam meg a problémámat? (Mind a 3 DIVnek van oldalt egy csíkja (border-left illetve border-right).)
9

Talán ha legalább a képeket néznéd

Hojtsy Gábor · 2004. Nov. 28. (V), 14.52
A linkelt cikkben csak a képeket nézve látszik, hogy a divek csíkjai hogyan vannak megoldva. Még szöveget sem kell olvasni.
10

3csik helyett 1 lap

Jano · 2004. Nov. 28. (V), 15.29
Talan segit a megerteseben:

Most kb az van a fejedben, hogy egymas melle teszel 3 papircsikot, es ezek mindegyiken a sajat vonalaikat, hatteruket tartalmazzak.

Kepzeld el most a kovetkezot:
Van egy a4-es lapod. Ezen berajzolod egymas melle a 3 oszlopot. Ezutan veszel 3 csik atlatszo foliat. Az elso olyan szeles mint az elso oszlop, a masodik olyan szeles mint a masodik, stb
Es szepen az a4-es lap fole igazitod oket.

Ugyanezt kell csinalni a HTML-ben is.
A befoglalo DIV lesz az a4-es lapod, es a benne levo 3 floatolt DIV pedig a 3 atlatszo csikod.

A problema meg annyi, hogy a floatolt DIV-ek a floatolas miatt "lebegnek" es nem feszitik ki a befoglalo DIV-et. A befoglalo DIV-et ra kell kenyszeriteni arra, hogy olyan magas legyen, hogy a leghosszabb folia csik aljaig leerjen.
Erre szolgal a "clearer DIV". Ez az elem nem lesz floatolva, viszont a clear hatasara mindenkeppen a floatok utan kell kovetkeznie. Mivel o mar nem lebeg, ezert a befoglalo DIV-nek tartalmaznia kell. Igy szepen olyan nagyra nyulik, hogy benne legyen.
11

Akkor ez alapján müxik bbal

csser · 2004. Nov. 28. (V), 16.13
Akkor ez alapján müxik bbalint megoldása is? Tehát az is jó?
12

Melyik megoldása?

Hojtsy Gábor · 2004. Nov. 28. (V), 16.52
Nem mindegyik megoldása működik így.
13

Ez

csser · 2004. Nov. 28. (V), 17.00
<div style="float:none !important;clear:both !important;height:1px;overflow:hidden;"></div>
14

Addig nem derül ki, amíg nem próbálod ki

Hojtsy Gábor · 2004. Nov. 28. (V), 17.19
Addig nem derül ki, hogy jó-e, amíg ki nem próbálod.
17

Kipróbáltam, nem megy... :(

csser · 2004. Nov. 28. (V), 19.11
Kipróbáltam, nem megy... :(((
18

Tud valaki segíteni? Előre

csser · 2004. Nov. 29. (H), 17.08
Tud valaki segíteni? Előre is nagyon szépen köszönöm!
19

mi nem megy?

Jano · 2004. Nov. 29. (H), 17.22
pontosan mi a problemad? A lenti kod amit beirtal szepen megjelenik IE es FireFox alatt is.

Olvasd at megegyszer a hozzaszolasokat, olvasd el a Faux Column cikket. Ha nem erted akkor nezd meg NAGYON tuzetesen a forraskodokat.
20

??? Pont azt a kódot próbá

csser · 2004. Nov. 29. (H), 20.39
??? Pont azt a kódot próbáltam ki, amit mondtál! És nagyon szépen nem müxik rendesen IE és Firefox alatt (sőt, se Opera, se Netscape, se Mozilla)... A kérdés, hogy miért nem? (Azt a kódot egészítettem ki, amit te írtál). Csakhogy az általad szerkesztett CSS-ben nincs az oszlopoknak szélük (1 px, border), tehát nem is lehetne látni, h megy-e..
21

Légyszí

csser · 2004. Nov. 30. (K), 17.41
Mindenhol azt hallom, hogy milyen jó az XHTML meg a CSS. De szerintem sokkal nehezebb vele megoldani a problémákat, mint a jó öreg HTML-lel...

Légyszíves! Boogie! Hogyan oldjam meg a problémámat? Nézegettem a Goba által javasolt honlapot, de semmit sem lehet kiszűrni belőle... Ha lusta lennék, akkor nem keresném fel minden nap a Weblabort, és kérnék segítséget, hanem már rég megoldottam volna. De nem tudom! :(
22

Köszönöm előre is a segí

csser · 2004. Dec. 1. (Sze), 20.39
Köszönöm előre is a segítséget!
15

Csak egy kis dícséret...

kgyt · 2004. Nov. 28. (V), 18.41
<OFF>
Látod Jano, ez szép magyarázat volt. Szeretem, amikor úgy magyaráz valaki, hogy mindenki megértse. Valamelyik listán az egyik kezdő kapott egy olyan választ, hogy a szemem jojózott, pedig értettem.
Szóval nem mindenkinek van meg a pedagógusi vénája...
Ezt még egy 5 évesnek is kötelező volt megértenie.
Már használom egy ideje a módszert, de ilyen szép magyarázatot még nem olvastam.
Mindenki szeret vakítani szép kis angol szakszavakkal, a kezdők meg nyelnek egyet és megoldják táblázatosan...
</OFF>

--
Szeretettel: Károly György Tamás
kgyt&kgyt.hu - http://kgyt.hu
16

Nem igaz! Nem akar menni!!! M

csser · 2004. Nov. 28. (V), 19.09
Nem igaz! Nem akar menni!!! Mivel egészítsem ki ezt a kódot, hogy rendesen egyforma magasnak látszanak bármely tartalom esetén is? Már komolyan nem tudok semmit csinálni. Suliba kéne tanulni, de helyette ezt buherálom. Légyszí, csak ebben segítsetek már!

Tehát mivel egészítsem ki? (bbalint HTML alapú megoldását)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="hu" dir="ltr"><head><title>öt div</title><meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-2"><style type="text/css"><!--#tarto-kozepre{text-align: center;}#tarto{margin: 0 auto;text-align: left;width: 700px;}#tarto div{clear: right;float: left;}#div1,#div3{width: 150px;}#div1{background: #ccc;}#div2{background: #99f;width: 550px;}#div3{background: #00c;}#div4{background: #3c3;width: 450px;}#div5{background: #633;width: 100px;}#div1,#div2{height: 100px;}#div3,#div4,#div5{height: 250px;}#tarto br{clear: both;}--></style></head><body><div id="tarto-kozepre"><div id="tarto"><div id="div1"></div><div id="div2"></div><br><div id="div3"></div><div id="div4"></div><div id="div5"></div></div></div></body></html>
23

Kicsit több információ

Bártházi András · 2004. Dec. 2. (Cs), 22.20
Nem teljesen értem, hogy mi a gond? Nálam ez a kód mind IE, mint Firefox alatt ugyanúgy jelenik meg. Ahogy korábban is elhangzott, maguknak az oszlopoknak a magasságát nem lehet ugyanolyanra kihozni CSS segítségével. A trükk abban rejlik, hogy a háttérrel mahinál az ember. Ez is szépen le lett írva korábban. A témát nem olvastam eddig, de a kitett képeket már nem tudom megnézni.

Egyébként ha nem megy, nem kell erőltetni. :) Használj táblázatot a célra.

-boogie-