ugrás a tartalomhoz

CSS méretezés és pozícionálás összeütközés

Velias9 · 2008. Okt. 28. (K), 09.34
Sziasztok!

Azt szeretném megvalósítani, hogy a szélesség és a magasság igazodjon az ablak méretéhez és soha ne lógjon túl rajta. A szélességgel nem is volt gond, mert ott mindent meg tudtam adni százalékosan, de a magassággal gondok vannak. A gond pedig az, hogy a fejléc fix 180 pixel magas, a tartalom viszont változó a felbontás illetve az ablakméret függvényében. Az abszulút pozícionálás is muszáj, különben nem lehet a sarkakat a helyükre igazítani. Próbálkoztam abszolút pozíció nélkül megoldani 'margin'-nal és 'padding'-gal is, de akkor nem jók a sarkak.

Van egy HTML kódom:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Untitled Document</title>
</head>
<body>
<div id="tarto">
	<div id="fejlec">
	aaasda	</div>
	<div id="tartalom">
		<div id="bfsarok" class="sarok"></div>
		<div id="jfsarok" class="sarok"></div>
		<div id="jasarok" class="sarok"></div>
		<div id="basarok" class="sarok"></div>
	</div>
</div>
</body>
</html>
És a hozzá tartozó CSS:

html, body
{
	position: absolute;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
}

#tarto
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

#fejlec
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 180px;
}

#tartalom
{
	margin-top: 180px;
	width: 100%;
	height: 100%;
}

#bfsarok
{
	top: 0px;
	left: 0px;
}

#jfsarok
{
	top: 0px;
	right: 0px;
}

#jasarok
{
	bottom: 0px;
	right: 0px;
}

#basarok
{
	bottom: 0px;
	left: 0px;
}

.sarok
{
	width: 50px;
	height: 50px;
	background: #000000;
	position: absolute;
}
Nekem nincs ötletem. Legyetek szívesek és segítsetek!

Előre is köszönök minden segítséget!
‹ CSS Dropdown Menu Tinymce - kép és média feltöltése ›
 ■
1

Avagy fullscreen?

janoszen · 2008. Okt. 28. (K), 10.31
Avagy azt szeretnéd, hogy legyen egy keret ami mindig látszik és azon belül scrollozod a tartalmat? Vedd figyelembe, hogy a felhasználónak szokatlan és kényelmetlen lehet az oldalon belüli scrollbar, akármennyire is jól néz ki. Ha ilyesmit szeretnétek, akkor lehet hogy jobban jártok a Flash oldallal, mivel a HTML egy dokumentum, nem egy display platform (akármennyire is azzá lett).

Ha CSS-sel szeretnéd megcsinálni, akkor a legegyszerűbb módja, hogy JS-sel korrigálsz, különben valószínűleg irdatlan sok wrapper divre lesz szükséged (minden szélhez egy, a megfelelő helyre igazítva).
2

Én nem így szeretném...

Velias9 · 2008. Okt. 29. (Sze), 08.34
..., de a megrendelő ezt kérte. Egy honlapot újítok fel (ezt) és azt kérték, hogy legyen olyan, mint az előző, csak javítsak ki néhány hibát, és adjak neki valami skint. A "sarok" osztályú 'div'-ek a skin részét fogják képezni (pl). Ha nem lehet megcsinálni, akkor az lesz, hogy beállítom a méretet az 1024*768-as felbontásra és JS-es korrigálok, de ha lehet ezt szeretném kerülni. Jobb lenne, ha minél kevesebb JS-t kéne használnom (nem azért mert nem megy, hanem az esetleges letiltások alatt is működnie kéne).
A belinkelt oldal 'frameset'-ek halma. Ezt is szeretném kerülni. E helyett akartam 'scroll'-ozható 'div'-et használni. Ha tudod, hogy hogyan tudnám megcsinálni, akkor légyszíves írd le és majd megnézem, hogy megéri-e a fáradtságot, vagy marad a JS.

Előre is koszi!
3

Táblázat

janoszen · 2008. Okt. 29. (Sze), 08.53
Tegyél be egy darab táblázatot, adj meg külső magasságot (table#lof {height:100%;}) és a belsejét állítsd overflow:scroll-ra. Webhez nem értő megrendelők ellen csak ez segít. :)