Emulera Frames — webForum

FuelMedlem sedan okt. 20001 285 inlägg

Frågan12 dec. 2007 03:28#1

Någon som har gjort det ? ..jag har gjort 2 försök, bägge lyckade i FF. I explorer ser det ut som nåt charles manson har målat i ett lsd rus

En fast header & footer, däremellan ska det scrolla. Att få scrolllist bara över mitten partiet är enkelt, att få scrolllisten över hela sidan är lite trixigare.

Som sagt, får det att funka i FF men inte IE. Vill ha det med så lite "hack" som möjligt...

voigtann1Medlem sedan juni 20019 519 inlägg

12 dec. 2007 06:51#2

#middle-frame {
	overflow: auto;
	height:300px;
}

<div id="middle-frame"></div>

borde väl räcka? eller "emulera frames"? då menar du en iframe eller?

icaaqMedlem sedan okt. 20005 273 inlägg

12 dec. 2007 07:26#3

http://www.456bereastreet.com/lab/cssframes/

mv icaaq

FuelMedlem sedan okt. 20001 285 inlägg

12 dec. 2007 12:02#4

tack.. men Berea Streets var nästan som det jag redan har tittat på. Tänk om det vore så enkelt som: du sitter där, du där och du scrollar.

Har noterat att om man gör så här, så stannar "header" längst upp det i flesta browsers ? eller?

#header {
    position: absolute;
}
#header {
    position: fixed;
    top: 0;
    left: 0;
}

FuelMedlem sedan okt. 20001 285 inlägg

12 dec. 2007 12:55#5

mjaa.. kör så här.. skiter i IE.. där får allt scrolla..

<!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="sv">
<head>

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />

<style type="text/css"><!--/*--><![CDATA[/*><!--*/
body
{
	margin: 0;
	padding: 0;
	height: 100%;
}
#header
{
	height: 100px;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	overflow: hidden;
	background-color: green;
}
h1
{
	margin-top: 0;
}
#content
{
	width: 100%;
	overflow: auto;
	z-index: 1;
}
#footer
{
	width: 100%;
	overflow: hidden;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 40px;
	z-index: 2;
	background-color: orange;
}
/*]]>*/--></style>
<!--[if !IE]><!-->
<style type="text/css"><!--/*--><![CDATA[/*><!--*/
#content
{
	padding: 100px 0 40px 0;
}
/*]]>*/--></style>
<!--<![endif]-->
<title>Emulate Frames</title>
</head>
<body>

<div id="header">Header</div>

<div id="content">

<h1>Emulate Frames</h1>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum 
iriure dolor in hendrerit in vulputate velit esse molestie 
consequat, vel illum dolore eu feugiat nulla facilisis at 
vero eros et accumsan et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue duis dolore te feugait 
nulla facilisi.
</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum 
iriure dolor in hendrerit in vulputate velit esse molestie 
consequat, vel illum dolore eu feugiat nulla facilisis at 
vero eros et accumsan et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue duis dolore te feugait 
nulla facilisi.
</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum 
iriure dolor in hendrerit in vulputate velit esse molestie 
consequat, vel illum dolore eu feugiat nulla facilisis at 
vero eros et accumsan et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue duis dolore te feugait 
nulla facilisi.
</p>

<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore 
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
quis nostrud exerci tation ullamcorper suscipit lobortis 
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum 
iriure dolor in hendrerit in vulputate velit esse molestie 
consequat, vel illum dolore eu feugiat nulla facilisis at 
vero eros et accumsan et iusto odio dignissim qui blandit 
praesent luptatum zzril delenit augue duis dolore te feugait 
nulla facilisi.
</p>
</div>

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

</body>
</html>