CSS, Div középre, bőngészőtől fent-lent xx px távolság

Internet: PHP, CGI, stb.

Bőngésző független módon, szeretnék egy divet vertikálisan és horizontálisan középre igazítani, úgy hogy a magassága kövesse a böngésző magasságát, de lent és fent megtartson 20-20 pixel távolságot a böngésző szélétől. A div szélessége fix.

Táblázattal nagyon egyszerű volt, de Div -el még nem sikerült összehozni.

Ilyet szeretnék DIV -el:

kevés szöveggel:
http://voidnull.alida.hu/tablealigntest.html

sok szöveggel:
http://voidnull.alida.hu/tablealigntest2.html

  • 7886 megtekintés

overflowval sem lehet javítani rajta?
szerk.: ja hogy túlér... :(
Akkor nézd ezt:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>divtest</title>

</head>
<body style="margin-top: 20px; margin-bottom: 20px; padding: 0px;">

<div height="100%" align="center" style='background:#cccccc;display:block;height:100%;width:700px;margin:0 auto;'>
kicsi szoveg
</div>

</body>
</html>

(lehet hogy nem szereti mindegyik böngésző sőt biztos)

No játszadoztam vele, doctype-pal kellene még egy div a containeren belül.

Doctype nélkül ez is jó:
body {
margin: 0px;
margin-top: 20px;
margin-bottom: 20px;
padding: 0px;
border: none;
}

#container {
display:block;
height: 100%;
width: 700px;
margin: auto;
background: #CCCCCC;
}

Ezt teszteld lécci: 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>divtest</title>
<style type="text/css">

#container { 
position: absolute;
width: 700px;
left: -350px; /*szélesség fele*/
margin-left: 50%;
top: 20px;
bottom: 20px;
background: #cccccc;
}

</style>
</head>
<body>

<div id="container">
brekeke
</div>

</body>
</html>

(firefoxszal, operával nálam rendben van, sok szöveggel még nem próbáltam)
(ie6-ban nem jó :S)

na ez sajna nem akarja megnyújtani ezt a divet, pedig több módon is próbáltam (sok tartalomnál), ei6 -ot nem lehet kizárni még, nagyon sokan használják (ha ie 5-el meg netscape 4 -el nem fog menni na az nem lesz egy nagy veszteség, de a hatos még túl gyakori)

Az a baj hogy túlcsordul a tartalom annál amivel most próbálkozom.
Egy darabig én is akartam fentről és lentről távolságot hagyni, de aztán rájöttem hogy inkább berakok a nullás top és bottomos divbe távtartó div-eket fent és lent.
Csinálni kell ie-re hacket (teljes css stíluslapot) és berakni így: 


<!--[if IE]>
<link rel="stylesheet" href="ie.css" />
<![endif]-->

Eddig egybe hackeltem * html kiválasztóval az ie hackjeit, de nem elég átlátható.
A quirks mód is szívás.

( new-g | 2007. 11. 08., cs – 10:22 )

hát én ehhez javascriptet is használnék
nézz utána a window.innerHeight (firefox és szerintem IE7) és a document.documentElement.clientHeight (IE6) fügvényeknek
ezek megadják a böngésző kihasznált mélységét pixelben, ennek tudatában pedig meg tudod határozni (szintén javascripttel) a div height tulajdonsáságát

tudom hogy így összelehetne valahogy barkácsolni js -el (hogy IE alatt menjen), de nem akarok javascriptet használni, meg ez így nem igazán lesz böngészőfüggetlen.

Igazából egy kicsit meglepő, hogy egy ilyen egyszerű dologra, az ezelőtt jósok évvel létrehozott html szabvány abszolút egyszerű megoldást kínált, viszont ez az agyondícsért,állítólag nagyon jól kitalált xhml, css meg nem képes egy sorral (de még sokkal se nagyon) megvalósítani egy ilyet...

az lenne a lényeg hogy minden támogassa... :) egyébként amit leírtál az nem egészen azt csinálja amit itt kellene. overflow-ot egyébként sem akarok használni, googli állítólag nem díjazza mert spam gyanús (persze lehet semmi alapja, de azért googlitól jobb félni mint megijedni ;) )

Illetve bocs, most ránéztem megint az oldalra, és rájöttem, hogy mégse sikerült a legjobban :)
Mivel azt, hogy alulról is egy fix pozícióban legyen, nem sikerült megoldanom. (Így height=xx%-ot kellett használnom a bottom=% helyett, mert különben ez a kib* fo* sza* IE nem ette meg a lapot)

( pezia | 2007. 11. 08., cs – 11:25 )

En arra tippelnek, a body text-align legyen center, egy kulso div-ben auto legyen az oldalso marginok erteke, szelessege legyen ami legyen. Lefele meg adhatsz egy min-height-et, a benne levo tartalom majd tovabb nyujtja lefele ha kell.

( kikke | 2007. 11. 08., cs – 12:35 )

Végülis megtaláltam a megoldást, vagyis az utat a megoldás felé:
http://www.xs4all.nl/~peterned/examples/csslayout1.html

Sokszor használtam már alapnak ezt a módszert, jó benne hogy elviseli a hck meg egyéb editorok beépülését is.

Mivel a fejléc mindig fent van, a lábléc meg mindig lent, könnyen elérhető hogy úgy tűnjön mintha hely lenne a lap alja meg a div alja, és a lap teteje és a div teteje között. Csak megfelelő kép kell háttérnek. Úgyis egy grafikai témát kell átdolgozni weblappá, legtöbb esetben.

Lecsupaszítva a működő modell: 


<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>divtest</title>
<style type="text/css">

html,body {
	margin:0;
	padding:0;
	height:100%;
	background:gray;	
	font:12px sans-serif;
}

div#container {
	position:relative;
	margin:0 auto;
	width:750px;
	background:#fff;
	height:auto !important;
	height:100%;
	min-height:100%;
}

div#header {
	height:20px;
	background:gray;
}

div#content {
	padding:1em 1em 5em;
}

div#footer {
	height:20px;
	position:absolute;
	width:100%;
	bottom:0;
	background:gray;
}

</style>
</head>
<body>
<div id="container">
<div id="header"></div>

<div id="content">
brekeke
</div>

<div id="footer"></div>
</div>
</body>

Respect to Peter Nederlof

na ez így elég reményteljes :), 3div-el még a legelején próbálkoztam, de ebben a formában nem jutott eszembe.

felpakoltam ide, akinek sok böngészője van esetleg tesztelhetné, nekem úgy tűnik hogy jó lesz, bár ie 6 alatt mintha 1pixel magasságban kihagyna a böngésző aljától.

http://voidnull.alida.hu/divaligntestdone.html

ööö nem fikázásból, de ebben így mi a pláne? Sima középre helyezett content, fix felső marginnal...hol van az említett változó méret? :) ja már látom, hogy a körülírás bonyolultabb volt mint a példa :)
A css-ben kétségtelenül a középre igazítás a macerásabb, mert mindig meg kell támasztani valamivel a float-os dobozt, de hozzá lehet szokni :)

Amúgy meg ha már utf8, akkor szedd ki belőle a BOM karaktert...

u.i.: egyéb tippek,

FF 2.0.0.9 @ win

Az ötletből merítve leírom én is, hogy mit látok:
Van egy középreigazított tartalom, egy "lábléc", és egy felső margó. Ha elkezdem összehúzni, akkor a tartalom szövegéig a whitespace kezd el fogyni, nem pedig a lábléctől felfelé. Amint beér a szöveg+alsó margója területére, megjelenik a scrollbar. Továbbá ugyanez igaz, ha a a tartalom szélességét elérem az összehúzással.

Ennek hogy kéne működnie?

Elmondom, mit látok: elindítom, jó nagy cucc, kilóg a képernyőből.
OK, lekicsinyítem a betűket, így már eltűnik a scrollbar.
Elkezdem összetolni az ablakot, az alja menekül az ablak szélétől (a tetejére nem figyeltem), amíg egyszer csak meg nem jelenik a scrollbar.

Ezután fogom az ablak alját, újra lehúzom, és ilyenkor a fehér rész már nem követi, az ablak felső részéhez közel ott a fehér, alatta széles szürke sáv.

Kicsit fura.

Ja, konqueror 3.5.7

G