'Freezing' parts of the page

C

cdb

Is there any way to 'freeze' parts of the page in Frontpage?

eg At the top of the screen is a banner and at the bottom there are some
links. In the middle is some information. I want to be able to freeze the
banner and links at the top and bottom so they are always on the screen, but
allow the middle bit to scroll as it could be longer than 1 viewable page
worth
 
M

Murray

There is no reliable way to do such a thing without using frames, which is
almost always a bad choice. CSS3 has the capability for fixing parts of the
page, but it's not well enough supported to use.
 
D

Dan L

Try this as a template... (put your banner in the menu div and the links in
the footer div)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css pseudo-frames - quirks mode</title>
<style type="text/css">
html {height: 100%; max-height: 100%; padding: 0; margin: 0;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden}
body {height: 100%; max-height: 100%; width: 100%;
overflow: hidden; background-color: #aca899; margin: 0; padding: 0;
font-family: Arial, Helvetica, sans-serif; color: #333}
#ScrollableContent {overflow: auto; overflow-y: scroll; position: absolute;
z-index: 1;top: 1em; bottom: 1.3em; width: 100%; left: 0; right: 0}
/* _______________Div and img styles __________________ */
div.Menu {position: absolute; margin: 0; top: 0; left: 0;
width: 100%; height: 1.3em; z-index: 3; overflow: hidden;
background-color: #a1a1a0; order-bottom: 1px solid #989898;}
div.MenuLeft {width: 20%; margin-left: -9px}
/* Because the Menu has no scrollbar whereas the "scrollable content" div
does have a scrollbar, in order to centre the content of the menu it needs to
have a left
margin of -9px. However, if the Menu div itself had a right margin of -9px,
it
would not extend to the right edge of the webpage - hence the need to contain
the content of the Menu within the MenuLeft div, which has the negative left
margin, and to contain that div within the Menu div, which does not have a
negative left margin and which therefore extends to the right edge of the
browser window */
div.Footer {position: absolute; margin: 0; bottom: 0; left: 0;
width: 100%; height: 1.3em; z-index: 2; overflow: hidden;
background-color: #a1a1a0; border-top: 1px solid #989898}
div.FooterLeft {width: 100%; margin-left: -9px}
/* Same purpose as the MenuLeft div */
div.DocumentPage {width: 644px; margin-left: auto; margin-right: auto;
border-top: 0px solid #070706; border-right: 3px solid #070706;
border-bottom: 3px solid #070706; border-left: 0px solid #070706;
padding-left: 65px; padding-right: 7px; padding-top: 17px; padding-bottom:
17px;background-color: #fffbf5; margin-bottom: 40px; margin-top: 24px}
/* ______________Text attributes _________________ */
p {font-size: 14px; margin-bottom: 11px; text-align: justify}
h1, p {line-height: 130%; margin-right: 56px; margin-top: 0}
h1 {font-family: "Helvetica Condensed", "Helvetica Narrow", "Arial Narrow",
GillSans-Light, "DejaVu Sans Condensed", Arial, Helvetica, sans-serif;
font-size: 24px; font-weight: bold; text-align: left;
margin-bottom: 5px}
p.Footer, p.Menu
{margin-top: 2px; margin-bottom: 0; font-size: 11px; font-weight: bold;
color: #ffffff; text-align: center}
</style>
<!--[if IE]>
<style type="text/css">
body {text-align: center}
#ScrollableContent {top: 0; left: 0; width: 100%; bottom: 0; height:
100%;max-height: 100%; border-top: 1.3em solid #989898;border-bottom: 1.3em
solid #989898}
div.DocumentPage {width: 720px; text-align: left}
</style>
<![endif]-->
</head>
<body>
<br><br>
<!-- Menu -->
<div class="Menu">
<p class="Menu">Lorem ipsum dolor sit amet</p>
</div>
<!-- ______________________________
Scrollable content starts here
______________________________ -->
<div id="ScrollableContent">
<!-- The "Document page" -->
<div class="DocumentPage">
<h1 class="HeadingNumber"><a name="sec1" id="sec1"></a>A Heading</h1>
<p class="BodyText">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 class="BodyText">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. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum.</p>
<p class="BodyText">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 class="BodyText">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. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum.</p>
<p class="BodyText">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 class="BodyText">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. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum..</p>
</div>
<!-- _________________________
End of "DocumentPage" div
_________________________ -->
<!-- Spacer to force the footer below the "document page" in IE and Opera -->
<div class="BelowDocSpacer"> </div>
</div>
<!-- ______________________________
End of "ScrollableContent" div
______________________________ -->
<!-- _______________
Start of Footer
_______________ -->
<div class="Footer">
<div class="FooterLeft">
<p class="Footer">Copyright © All rights reserved.</p>
</div>
</div>
</body>
</html>
 
C

cdb

I'm a bit new to all of this and not used to HTML. Is this easy to manipulate
to my needs? Or do you think it would be best to just give up on the idea?

Dan L said:
Try this as a template... (put your banner in the menu div and the links in
the footer div)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css pseudo-frames - quirks mode</title>
<style type="text/css">
html {height: 100%; max-height: 100%; padding: 0; margin: 0;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden}
body {height: 100%; max-height: 100%; width: 100%;
overflow: hidden; background-color: #aca899; margin: 0; padding: 0;
font-family: Arial, Helvetica, sans-serif; color: #333}
#ScrollableContent {overflow: auto; overflow-y: scroll; position: absolute;
z-index: 1;top: 1em; bottom: 1.3em; width: 100%; left: 0; right: 0}
/* _______________Div and img styles __________________ */
div.Menu {position: absolute; margin: 0; top: 0; left: 0;
width: 100%; height: 1.3em; z-index: 3; overflow: hidden;
background-color: #a1a1a0; order-bottom: 1px solid #989898;}
div.MenuLeft {width: 20%; margin-left: -9px}
/* Because the Menu has no scrollbar whereas the "scrollable content" div
does have a scrollbar, in order to centre the content of the menu it needs to
have a left
margin of -9px. However, if the Menu div itself had a right margin of -9px,
it
would not extend to the right edge of the webpage - hence the need to contain
the content of the Menu within the MenuLeft div, which has the negative left
margin, and to contain that div within the Menu div, which does not have a
negative left margin and which therefore extends to the right edge of the
browser window */
div.Footer {position: absolute; margin: 0; bottom: 0; left: 0;
width: 100%; height: 1.3em; z-index: 2; overflow: hidden;
background-color: #a1a1a0; border-top: 1px solid #989898}
div.FooterLeft {width: 100%; margin-left: -9px}
/* Same purpose as the MenuLeft div */
div.DocumentPage {width: 644px; margin-left: auto; margin-right: auto;
border-top: 0px solid #070706; border-right: 3px solid #070706;
border-bottom: 3px solid #070706; border-left: 0px solid #070706;
padding-left: 65px; padding-right: 7px; padding-top: 17px; padding-bottom:
17px;background-color: #fffbf5; margin-bottom: 40px; margin-top: 24px}
/* ______________Text attributes _________________ */
p {font-size: 14px; margin-bottom: 11px; text-align: justify}
h1, p {line-height: 130%; margin-right: 56px; margin-top: 0}
h1 {font-family: "Helvetica Condensed", "Helvetica Narrow", "Arial Narrow",
GillSans-Light, "DejaVu Sans Condensed", Arial, Helvetica, sans-serif;
font-size: 24px; font-weight: bold; text-align: left;
margin-bottom: 5px}
p.Footer, p.Menu
{margin-top: 2px; margin-bottom: 0; font-size: 11px; font-weight: bold;
color: #ffffff; text-align: center}
</style>
<!--[if IE]>
<style type="text/css">
body {text-align: center}
#ScrollableContent {top: 0; left: 0; width: 100%; bottom: 0; height:
100%;max-height: 100%; border-top: 1.3em solid #989898;border-bottom: 1.3em
solid #989898}
div.DocumentPage {width: 720px; text-align: left}
</style>
<![endif]-->
</head>
<body>
<br><br>
<!-- Menu -->
<div class="Menu">
<p class="Menu">Lorem ipsum dolor sit amet</p>
</div>
<!-- ______________________________
Scrollable content starts here
______________________________ -->
<div id="ScrollableContent">
<!-- The "Document page" -->
<div class="DocumentPage">
<h1 class="HeadingNumber"><a name="sec1" id="sec1"></a>A Heading</h1>
<p class="BodyText">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 class="BodyText">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. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum.</p>
<p class="BodyText">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 class="BodyText">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. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum.</p>
<p class="BodyText">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 class="BodyText">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. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum..</p>
</div>
<!-- _________________________
End of "DocumentPage" div
_________________________ -->
<!-- Spacer to force the footer below the "document page" in IE and Opera -->
<div class="BelowDocSpacer"> </div>
</div>
<!-- ______________________________
End of "ScrollableContent" div
______________________________ -->
<!-- _______________
Start of Footer
_______________ -->
<div class="Footer">
<div class="FooterLeft">
<p class="Footer">Copyright © All rights reserved.</p>
</div>
</div>
</body>
</html>

cdb said:
Is there any way to 'freeze' parts of the page in Frontpage?

eg At the top of the screen is a banner and at the bottom there are some
links. In the middle is some information. I want to be able to freeze the
banner and links at the top and bottom so they are always on the screen, but
allow the middle bit to scroll as it could be longer than 1 viewable page
worth
Click to expand...
Click to expand...
 
D

Dan L

Copy and paste everything from <DOCTYPE... to ...</html> into a notepad page
and save it as test.html (or any name you like). Open it with FrontPage,
experiment and then you decide if it's easy and meets your needs.

cdb said:
I'm a bit new to all of this and not used to HTML. Is this easy to manipulate
to my needs? Or do you think it would be best to just give up on the idea?

Dan L said:
Try this as a template... (put your banner in the menu div and the links in
the footer div)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css pseudo-frames - quirks mode</title>
<style type="text/css">
html {height: 100%; max-height: 100%; padding: 0; margin: 0;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden}
body {height: 100%; max-height: 100%; width: 100%;
overflow: hidden; background-color: #aca899; margin: 0; padding: 0;
font-family: Arial, Helvetica, sans-serif; color: #333}
#ScrollableContent {overflow: auto; overflow-y: scroll; position: absolute;
z-index: 1;top: 1em; bottom: 1.3em; width: 100%; left: 0; right: 0}
/* _______________Div and img styles __________________ */
div.Menu {position: absolute; margin: 0; top: 0; left: 0;
width: 100%; height: 1.3em; z-index: 3; overflow: hidden;
background-color: #a1a1a0; order-bottom: 1px solid #989898;}
div.MenuLeft {width: 20%; margin-left: -9px}
/* Because the Menu has no scrollbar whereas the "scrollable content" div
does have a scrollbar, in order to centre the content of the menu it needs to
have a left
margin of -9px. However, if the Menu div itself had a right margin of -9px,
it
would not extend to the right edge of the webpage - hence the need to contain
the content of the Menu within the MenuLeft div, which has the negative left
margin, and to contain that div within the Menu div, which does not have a
negative left margin and which therefore extends to the right edge of the
browser window */
div.Footer {position: absolute; margin: 0; bottom: 0; left: 0;
width: 100%; height: 1.3em; z-index: 2; overflow: hidden;
background-color: #a1a1a0; border-top: 1px solid #989898}
div.FooterLeft {width: 100%; margin-left: -9px}
/* Same purpose as the MenuLeft div */
div.DocumentPage {width: 644px; margin-left: auto; margin-right: auto;
border-top: 0px solid #070706; border-right: 3px solid #070706;
border-bottom: 3px solid #070706; border-left: 0px solid #070706;
padding-left: 65px; padding-right: 7px; padding-top: 17px; padding-bottom:
17px;background-color: #fffbf5; margin-bottom: 40px; margin-top: 24px}
/* ______________Text attributes _________________ */
p {font-size: 14px; margin-bottom: 11px; text-align: justify}
h1, p {line-height: 130%; margin-right: 56px; margin-top: 0}
h1 {font-family: "Helvetica Condensed", "Helvetica Narrow", "Arial Narrow",
GillSans-Light, "DejaVu Sans Condensed", Arial, Helvetica, sans-serif;
font-size: 24px; font-weight: bold; text-align: left;
margin-bottom: 5px}
p.Footer, p.Menu
{margin-top: 2px; margin-bottom: 0; font-size: 11px; font-weight: bold;
color: #ffffff; text-align: center}
</style>
<!--[if IE]>
<style type="text/css">
body {text-align: center}
#ScrollableContent {top: 0; left: 0; width: 100%; bottom: 0; height:
100%;max-height: 100%; border-top: 1.3em solid #989898;border-bottom: 1.3em
solid #989898}
div.DocumentPage {width: 720px; text-align: left}
</style>
<![endif]-->
</head>
<body>
<br><br>
<!-- Menu -->
<div class="Menu">
<p class="Menu">Lorem ipsum dolor sit amet</p>
</div>
<!-- ______________________________
Scrollable content starts here
______________________________ -->
<div id="ScrollableContent">
<!-- The "Document page" -->
<div class="DocumentPage">
<h1 class="HeadingNumber"><a name="sec1" id="sec1"></a>A Heading</h1>
<p class="BodyText">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 class="BodyText">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. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum.</p>
<p class="BodyText">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 class="BodyText">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. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum.</p>
<p class="BodyText">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 class="BodyText">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. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum..</p>
</div>
<!-- _________________________
End of "DocumentPage" div
_________________________ -->
<!-- Spacer to force the footer below the "document page" in IE and Opera -->
<div class="BelowDocSpacer"> </div>
</div>
<!-- ______________________________
End of "ScrollableContent" div
______________________________ -->
<!-- _______________
Start of Footer
_______________ -->
<div class="Footer">
<div class="FooterLeft">
<p class="Footer">Copyright © All rights reserved.</p>
</div>
</div>
</body>
</html>

cdb said:
Is there any way to 'freeze' parts of the page in Frontpage?

eg At the top of the screen is a banner and at the bottom there are some
links. In the middle is some information. I want to be able to freeze the
banner and links at the top and bottom so they are always on the screen, but
allow the middle bit to scroll as it could be longer than 1 viewable page
worth
Click to expand...
Click to expand...
Click to expand...
 
C

cdb

Cheers. Will give it a go.

Dan L said:
Copy and paste everything from <DOCTYPE... to ...</html> into a notepad page
and save it as test.html (or any name you like). Open it with FrontPage,
experiment and then you decide if it's easy and meets your needs.

cdb said:
I'm a bit new to all of this and not used to HTML. Is this easy to manipulate
to my needs? Or do you think it would be best to just give up on the idea?

Dan L said:
Try this as a template... (put your banner in the menu div and the links in
the footer div)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css pseudo-frames - quirks mode</title>
<style type="text/css">
html {height: 100%; max-height: 100%; padding: 0; margin: 0;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden}
body {height: 100%; max-height: 100%; width: 100%;
overflow: hidden; background-color: #aca899; margin: 0; padding: 0;
font-family: Arial, Helvetica, sans-serif; color: #333}
#ScrollableContent {overflow: auto; overflow-y: scroll; position: absolute;
z-index: 1;top: 1em; bottom: 1.3em; width: 100%; left: 0; right: 0}
/* _______________Div and img styles __________________ */
div.Menu {position: absolute; margin: 0; top: 0; left: 0;
width: 100%; height: 1.3em; z-index: 3; overflow: hidden;
background-color: #a1a1a0; order-bottom: 1px solid #989898;}
div.MenuLeft {width: 20%; margin-left: -9px}
/* Because the Menu has no scrollbar whereas the "scrollable content" div
does have a scrollbar, in order to centre the content of the menu it needs to
have a left
margin of -9px. However, if the Menu div itself had a right margin of -9px,
it
would not extend to the right edge of the webpage - hence the need to contain
the content of the Menu within the MenuLeft div, which has the negative left
margin, and to contain that div within the Menu div, which does not have a
negative left margin and which therefore extends to the right edge of the
browser window */
div.Footer {position: absolute; margin: 0; bottom: 0; left: 0;
width: 100%; height: 1.3em; z-index: 2; overflow: hidden;
background-color: #a1a1a0; border-top: 1px solid #989898}
div.FooterLeft {width: 100%; margin-left: -9px}
/* Same purpose as the MenuLeft div */
div.DocumentPage {width: 644px; margin-left: auto; margin-right: auto;
border-top: 0px solid #070706; border-right: 3px solid #070706;
border-bottom: 3px solid #070706; border-left: 0px solid #070706;
padding-left: 65px; padding-right: 7px; padding-top: 17px; padding-bottom:
17px;background-color: #fffbf5; margin-bottom: 40px; margin-top: 24px}
/* ______________Text attributes _________________ */
p {font-size: 14px; margin-bottom: 11px; text-align: justify}
h1, p {line-height: 130%; margin-right: 56px; margin-top: 0}
h1 {font-family: "Helvetica Condensed", "Helvetica Narrow", "Arial Narrow",
GillSans-Light, "DejaVu Sans Condensed", Arial, Helvetica, sans-serif;
font-size: 24px; font-weight: bold; text-align: left;
margin-bottom: 5px}
p.Footer, p.Menu
{margin-top: 2px; margin-bottom: 0; font-size: 11px; font-weight: bold;
color: #ffffff; text-align: center}
</style>
<!--[if IE]>
<style type="text/css">
body {text-align: center}
#ScrollableContent {top: 0; left: 0; width: 100%; bottom: 0; height:
100%;max-height: 100%; border-top: 1.3em solid #989898;border-bottom: 1.3em
solid #989898}
div.DocumentPage {width: 720px; text-align: left}
</style>
<![endif]-->
</head>
<body>
<br><br>
<!-- Menu -->
<div class="Menu">
<p class="Menu">Lorem ipsum dolor sit amet</p>
</div>
<!-- ______________________________
Scrollable content starts here
______________________________ -->
<div id="ScrollableContent">
<!-- The "Document page" -->
<div class="DocumentPage">
<h1 class="HeadingNumber"><a name="sec1" id="sec1"></a>A Heading</h1>
<p class="BodyText">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 class="BodyText">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. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum.</p>
<p class="BodyText">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 class="BodyText">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. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum.</p>
<p class="BodyText">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 class="BodyText">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. Nam liber tempor cum
soluta nobis eleifend option congue nihil imperdiet doming id quod mazim
placerat facer possim assum..</p>
</div>
<!-- _________________________
End of "DocumentPage" div
_________________________ -->
<!-- Spacer to force the footer below the "document page" in IE and Opera -->
<div class="BelowDocSpacer"> </div>
</div>
<!-- ______________________________
End of "ScrollableContent" div
______________________________ -->
<!-- _______________
Start of Footer
_______________ -->
<div class="Footer">
<div class="FooterLeft">
<p class="Footer">Copyright © All rights reserved.</p>
</div>
</div>
</body>
</html>

:

Is there any way to 'freeze' parts of the page in Frontpage?

eg At the top of the screen is a banner and at the bottom there are some
links. In the middle is some information. I want to be able to freeze the
banner and links at the top and bottom so they are always on the screen, but
allow the middle bit to scroll as it could be longer than 1 viewable page
worth
Click to expand...
Click to expand...
Click to expand...
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Page numbering with Merged Document and IF statements 1
tables not formatting correctly. 1
How do I freeze a row on the bottom of my screen? 4
Want scrolling web page; resize distorts 1
Freeze at the top & split the side in Excel97? 2
Pages Change on their own? 2
Web Browser not showing all graphics in FP 2003 1
How do I center an entire page for browsers for Frontpage 2003? 9

Top