ugrás a tartalomhoz

css probléma

gabrieludon · 2009. Okt. 19. (H), 19.12
Sajnos nem igazán értek a css-hez, így örülnék ha valaki kisegítene.
A lent látható kóddal a következő a bajom:

Először táblázattal próbáltam megoldani a dolgot, de aztán letettem róla és jött a CSS. Lényegében a CSS három részre osztja a képernyőt. Egy felső részre, egy középsőre és egy alsóra. A középső rész mérete fix, vagyis 624 px. Azt szeretném elérni, hogy a másik két rész egyenletesen töltse ki a maradék részt felbontástól függően, de ezt eddig nem sikerült elérnem. Ha valaki tud kérem segítsen! Lehet hogy amatőr kérdés és elnézést kérek érte...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Title</title>

<style type="text/css">
HTML, BODY {
background-image:url(img/hatter.png);
margin: 0;
padding: 0;
}
#header {
margin: 0 0 0 0;
width: 100%;
height: 100%;
}
#contents {
margin: 0 0 0 0;
height: 624px;
vertical-align:middle;
background-image:url(img/kozhatter.png);
}
#footer {
background-image:url(img/alsohatter.png);
background-position:bottom;
height: 100%;
width: 100%;
margin: 0 0 0 0;
}
</style>
</head>
<body>
<div id="header">Felső rész</div>
<div id="contents">
<p>
középső rész
</p>
</div>
<div id="footer">alsó rész</div>
</body>
</html>
‹ innerHTML input checkbox ›
 ■
1

<!DOCTYPE HTML PUBLIC

Blintux · 2009. Okt. 19. (H), 20.56

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>Title</title>

<style type="text/css">
HTML, BODY {
background-image:url(img/hatter.png);
margin: 0;
padding: 0;
width:100%;
height:100%;
display:table;
}
#header {
display:table-row;
}
#contents {
display:table-row;
height: 624px;
vertical-align:middle;
background-image:url(img/kozhatter.png);
}
#footer {
background-image:url(img/alsohatter.png);
background-position:bottom;
display:table-row;
}
</style>

</head>
<body>
<div id="header">Felső rész</div>
<div id="contents">
<p>
középső rész
</p>
</div>
<div id="footer">alsó rész</div>
</body>
</html>
2

ie

gabrieludon · 2009. Okt. 20. (K), 12.00
ÜDv!

Köszönöm a megoldást...de sajnos ugyanaz! Bár Firefox alatt most már hibátlan, IE alatt még mindíg ugyanaz...
Lényeges lenne, hogy a felső és alsó rész kitöltse a maradék helyet ami természetesen felbontás kérdése, de explorer alatt még mindíg 1 sor magasak csak ezek a részek :(
3

Alap probléma

Kevlar · 2009. Okt. 22. (Cs), 11.59
Az az alap gond, hogy egy HTML dokumentum nem így épül fel.
Általában a kezdő grafikusoknak kell elmagyarázni, hogy miért nincs lehetőség dinamikus tartalmakat mindenhogyan rendezgetni: mert alapjáraton egy dokumentum fentről lefelé épül fel.
Én nem kedvelem a display: table-cell és hasonló megoldásokat, bár igaz, hogy itt legalább nem a HTML-t szemeteljük tele a table felesleges tag-jeivel.
Az IE nem is ismeri ezeket, tehát a fenti megoldás nem 100%-os.
Amit szeretnél szerintem Javascript-el oldható csak meg: le tudod kérdezni a látogató böngészőjének magasságát, ebből kivonod a középső fix magasságú részt és a maradékot osztod kettővel.
4

Re: Alap probléma

gabrieludon · 2009. Okt. 26. (H), 11.42
Köszönöm a választ...

Azt még meg is érteném hogy fentről lefelé épül fel az oldal. De ez esetben pl. én már annak is örülnék, ha az alsó cella kitöltené a maradék helyet legalul.
5

Függőleges középre rendezés

Udi · 2009. Okt. 27. (K), 12.51
Ha a fenti és alsó kihagyott helyre tartalmat nem akarsz beszúrni, csak hátteret, akkor a következő megoldás jó lehet. A középső terület méretét ismered, ez alapfeltétele a következő módszernek: a középre rendezendő divnek abszolút elhelyezést állítasz be, és a tetejét lenyomod 50%-kal. Az 50%-ot a szülő magasságából fogja számítani (ha nem, akkor a szülőnek állíts be relatív elhelyezést), ezután a divedet vissza kell tolni az ismert magasság felével, ezt negatív felső margóval meg tudod csinálni.

<html>
<head>
<title>Blog</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<style type="text/css">
		#lap {
			position: absolute;
			top: 50%;
			left: 0; /* IE miatt érdemes bent tartani */
			height: 500px;
			width: 100%;
			margin-top: -250px; /* fenti margó a magasság fele mínuszban */
			text-align: left;
			background: #ccc;
		}
	</style>
</head>

<body>
	<div id="lap">
		<p>Függőlegesen középre rendezett tartalom</p>
	</div>
</body>
</html>
IE6-ban is jól működik. Fölé és alá viszont trükkös lehet bármit is elhelyezni, de ha csak háttér kell, és tudod pixelben a középső rész magasságát, akkor nem lesz nehéz egyetlen nagy hátteret gyártani a középső dobozt tartalmazó divre, vagy magára a bodyra.
6

Továbbfejlesztés

Udi · 2009. Okt. 27. (K), 13.38
Ebéd közben gondolkoztam még, és tovább lehet fejleszteni ezt a módszert. Mivel a középső részt az abszolút elhelyezés miatt kiemeltük a sorból, ezért mögé szúrhatunk két divet, amiknek 50%-os magasságot adunk. Így azok az oldal középen fognak találkozni, de azt mi már nem látjuk, mert eltakarja a középső rész. Tehát:

<html>
<head>
<title>Teszt</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<style type="text/css">
		body {
			padding: 0;
			margin: 0;
			position: relative;
		}
		#kozep {
			position: absolute;
			top: 50%;
			left: 0; /* IE miatt érdemes bent tartani */
			height: 500px;
			width: 100%;
			margin-top: -250px; /* fenti margó a magasság fele mínuszban */
			text-align: left;
			background: #ccc;
		}
		#fejlec-hatter {
			margin: 0;
			background: #c00;
			width: 100%;
			height: 50%;
		}
		#lablec-hatter {
			margin: 0;
			background: #00c;
			width: 100%;
			height: 50%;
		}
		#lablec-tartalom {
			position: absolute;
			bottom: 0;
		}
		p {
			margin: 0;
		}
	</style>
</head>

<body>
	<div id="kozep">
		<p>Függőlegesen középre rendezett tartalom</p>
	</div>
	<div id="fejlec-hatter">
		<p>Fejléc</p>
	</div>
	<div id="lablec-hatter">
		<div id="lablec-tartalom">
			<p>Lábléc tartalom</p>
		</div>
	</div>
</body>
</html>
A fejléc tartalma az oldal tetejére kerül, az ott viszonylag jó is. A lábléc tartalma viszont az oldal közepére kerülne, amit mi nem látunk. Viszont nem tudjuk, hogy hol ér véget a középső rész, ahova tennünk kellene a tartalmat, ezért egyetlen megoldásként lerakhatjuk a lap aljára. Ez nagyobb felbontásban hülyén tud kinézni.

Ezért kellene azt csinálni, hogy a fejlec-hatter és lablec-hatter divekbe nem raksz tartalmat, hanem azoknak a tartalmaknak is kitalálsz egy fix magasságot, és belerakod őket a középső részbe, de csak a tényleges középső tartalomnak adsz meg más hátteret, a fejléc és lábléc tartalomnál pedig átlátszik majd a két 50%-os doboz háttere. Ez már közelít a tökéleteshez, de ne hagyd figyelmen kívül, hogy a min-height tulajdonság problémás lehet IE alatt, így ha nem elég nagy a felhasználó felbontása, akkor nem fogja látni a fejlécet és a láblécet.
7

Re: Továbbfejlesztés

gabrieludon · 2009. Okt. 28. (Sze), 10.46
Ez a megoldás nagyon profi!
Köszönöm szépen! Az egy aprócska gond csak az, hogy a középső rész hátterének egy része átlátszó, így az alsó rész háttere átüt rajta. De ezt már kisakkozom valahogy!

Még egyszer köszönöm szépen a segítséget!
8

Re: Továbbfejlesztés2

gabrieludon · 2009. Okt. 28. (Sze), 11.15
Most lehet hogy nagy marhaságot kérdezek...de...
Lényegében nekem az alsó rész csak azért kell mert más hátteret akarok. A felső megoldás is jó lenne nekem... de lehet-e a DIV-eket egymáshoz képest pozicionálni?
Mert ha a középső rész alatt kezdődhetne közvetlenül az alsó (aminek egyébként csak más hátteret akarok adni) akkor máris megoldódott a dolog...

A második megoldás tökéletes lenne, ha a középső részben lévő hátteret nem kellene részlegesen átlátszóra csinálnom :(
9

Van rá megoldás

Udi · 2009. Okt. 28. (Sze), 16.44
Azt tudod megtenni, hogy a középre rendezett dobozba raksz még egy tartalom dobozt, ami akkora magasságú lesz, mint amit a középre rendezett doboznak szeretnél. Ezután a középre rendezett dobozba, a tartalom után elhelyezed a lábléc háttérnek való dobozt, és annak egy jó nagy magasságot megadsz (mondjuk 1000px), hogy mindig leérjen a lap aljára. Azt nem fogod tudni megmondani, hogy pontosan mekkorának kell lennie, hogy a lap aljára érjen, ezért kell túllógatni rajta. A túllógatás miatt meg fog jelenni egy görgető, ezért vagy a body-ra, vagy a középső doboz szülőjére kell egy overflow: hidden tulajdonság, hogy a kilógó dolgokat eltüntesse.

<html>
<head>
<title>Teszt</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<style type="text/css">
		body {
			overflow: hidden;
		}		

		#kozep {
			position: absolute;
			top: 50%;
			left: 0; /* IE miatt érdemes bent tartani */
			height: 500px;
			width: 100%;
			margin-top: -250px; /* fenti margó a magasság fele mínuszban */
			background: #ccc;
		}
		#tartalom {
			height: 500px; /* a középső rész magassága */
		}
		
		#lablec-hatter {
			background: #c00;
			height: 1000px;
		}
		p {
			margin: 0;
		}
	</style>
</head>

<body>
	<div id="kozep">
		<div id="tartalom">
		<p>Függőlegesen középre rendezett tartalom</p>
		</div>

		<div id="lablec-hatter">
		</div>
	</div>
</body>
</html>
Működik IE6 alatt is, szóval alkalmazható megoldás, csak át kell gondolni, hogy mennyire hasznos. Az "overflow: hidden" miatt akkor sem fog tudni görgetni a felhasználó, ha maga a középső rész nem látszik teljesen. Eredetileg 624 pixel magas középső tartalmat szerettél, ügyelj arra, hogy nagyon elterjedtek a 16:10 és 16:9 arányú képernyők, amiknek a szélessége lehet, hogy megvan, de a magasságuk nem biztos, ráadásul a böngészők mindenféle toolbart és tab listát is vízszintes panelre rakodnak. Én most 1280x800-as felbontásban körülbelül 600 pixel magas dolgokat látok a böngésző ablakban.
10

Re: Van rá megoldás

gabrieludon · 2009. Okt. 29. (Cs), 14.53
Tökéletes! Köszönöm szépen a segítséget! :)