Vertikal midtstilling av innhold

[superspurv]

Prøver å få en boks, 100% bred og 500px høy til å midtstille seg vertikalt i nettleseren. Uansett nettleser og om man endrer størrelse etter lasting.

 

Har ennå ikke funnet noe som gir tilfredstillende resultat i alle nettlesere og vil helst unngå bruk av tabeller.

 

Noen som har noen tips?

[lokeland]

Kan anbefale deg å kikke her.

[FrodeNilsen]

Kan anbefale deg å kikke her.

 

Det advares i css2.1 spekken om at dynamiske tabeller ikke er fult ut definert i css2.1.

 

http://www.w3.org/TR/CSS21/tables.html#tables-intro

 

En annen ting er at eksemplet, jeg viser da til html koden, rett og slett ikke fungerer.

 

Ta en heller titt på denne linken:(hentet fra sticky tråden)

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

 

Denne benytter gjør som følger:

-oppretter en block boks

-absolutt posisjonering

-50% fra top

-1px høyde

-overflow: visible.

 

I denne boksen opprettes det en boks som er høyere enn 1px, men ved å justere den absolutt opp 50% av sin egen høyde, ender den nøstende boksen midt på sin 1px høye foreldre boks. I og med at overflow er synlig hos foreldre-boksen, vises barn-boksen.

-position absolute

-height:70px;

-top: -35px;

 

Du trenger kun to stk div elementer for å oppnå dette, og i og med at det kun benyttes absolutt posisjonering og visible overflow burde dette ha bred støtte.

 

Håper dette var forståelig å til noe hjelp.

[superspurv]

Kan anbefale deg å kikke her.

 

Det advares i css2.1 spekken om at dynamiske tabeller ikke er fult ut definert i css2.1.

 

http://www.w3.org/TR/CSS21/tables.html#tables-intro

 

En annen ting er at eksemplet, jeg viser da til html koden, rett og slett ikke fungerer.

 

Ta en heller titt på denne linken:(hentet fra sticky tråden)

http://www.wpdfd.com/editorial/thebox/deadcentre4.html

 

Denne benytter gjør som følger:

-oppretter en block boks

-absolutt posisjonering

-50% fra top

-1px høyde

-overflow: visible.

 

I denne boksen opprettes det en boks som er høyere enn 1px, men ved å justere den absolutt opp 50% av sin egen høyde, ender den nøstende boksen midt på sin 1px høye foreldre boks. I og med at overflow er synlig hos foreldre-boksen, vises barn-boksen.

-position absolute

-height:70px;

-top: -35px;

 

Du trenger kun to stk div elementer for å oppnå dette, og i og med at det kun benyttes absolutt posisjonering og visible overflow burde dette ha bred støtte.

 

Håper dette var forståelig å til noe hjelp.

 

 

Så og testet litt med den deadcenter saken før jeg postet her, og det funket forsåvidt greit i FF og Opera, men i IE6 funka det dårlig. Selve deadcenter siden funket greit i IE, men prøvde jeg å få innholdet til å strekke seg over hele vindusbredden ble det problemer.

[datech]

Hei, mener dette bør kunne fungere

 

CSS:

* { margin:0; padding:0; } 

html, body { height:100%;} 

body { 
background:#ddd; 
color:#333; 
} 

#testa { 
width:1px; 
height: 50%; 
margin-bottom: -250px; 
float: left; 
} 


#testb{ 
background: #aaa; 
height: 500px; 
width:100%; 
position: relative; 
clear: left; 
}

 

HTML:

 

<div id="testa"></div>
<div id="testb">Vertikal senter boks</div>

[superspurv]

Hei, mener dette bør kunne fungere

 

CSS:

* { margin:0; padding:0; } 

html, body { height:100%;} 

body { 
background:#ddd; 
color:#333; 
} 

#testa { 
width:1px; 
height: 50%; 
margin-bottom: -250px; 
float: left; 
} 


#testb{ 
background: #aaa; 
height: 500px; 
width:100%; 
position: relative; 
clear: left; 
}

 

HTML:

 

<div id="testa"></div>
<div id="testb">Vertikal senter boks</div>

 

 

Set det ja

 

Det enkle er ofte det beste. Og satt sammen med den andre koden ser det fortsatt ut til å virke i de fleste nettlesere jeg har installert.

[FrodeNilsen]

 

 

Hei, mener dette bør kunne fungere

 

CSS:

* { margin:0; padding:0; } 

html, body { height:100%;} 

body { 
background:#ddd; 
color:#333; 
} 

#testa { 
width:1px; 
height: 50%; 
margin-bottom: -250px; 
float: left; 
} 


#testb{ 
background: #aaa; 
height: 500px; 
width:100%; 
position: relative; 
clear: left; 
}

 

HTML:

 

<div id="testa"></div>
<div id="testb">Vertikal senter boks</div>

 

 

 

Dette fungerte ikke helt for meg. Boksen blir liggende som ved normal flyt. For meg fungerer ikke height 50% for box1, oppgis høyde i pixler blir det andre boller, men da blir jo ingenting sentrert.

 

Hva er galt i denne koden?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
	<title>
		box test
	</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<style type="text/css">
		* { margin:0; padding:0; }
		#box1{ 
		width:1px; 
		height: 50%; 
		margin-bottom: -250px; 
		float: left; 
		}
		#box2{ 
		background: #ccc; 
		height: 500px; 
		width:100%; 
		position: relative; 
		clear: left; 
		}
	</style>
</head>
<body>
	  <div id="box1"></div>
	  <div id="box2">This box should be vertically centered.</div>
</body>
</html>

 

Hva var det som ikke fungerte under IE med den koden jeg foreslo? Har du ett eksempel?

 

Jeg får eksemplet mitt til å kjøre fint under IE7 og Opera.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
	<title>
		box test
	</title>
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
	<style type="text/css">
		* { margin:0; padding:0; }
		div.box1{ 
		background-color: #f00; 
		position:absolute; 
		top: 50%; 
		height: 1px; 
		overflow: visible; 
		width: 100%;
		}
		div.box2{ 
		position: absolute; 
		top: -250px;
		height: 500px; 
		width: 100%;
		background-color:#0f0; 
		}
	</style>
</head>
<body>
	<div class="box1">
		<div class="box2">
			This box should be vertically centered.
		</div>
	</div>
</body>
</html>