Creating Scroll bar on a page
-
Monday, December 03, 2012 9:18 PMHow to create a Scroll bar in Expression Web 4 so that the main header stays on the page all the time while scrolling down the large amount of data on the page
- Edited by Ratnakar Narale Monday, December 03, 2012 9:22 PM
All Replies
-
Monday, December 03, 2012 9:37 PMThat's a pretty dated concept but if you want to do it put your header in a div and use in the style definition for that div. Note that IE 6 (if you care about it) doesn't support on anything but background images but modern browsers will give you the effect you want.
Free Expression Web Tutorials
For an Expression Web forum with without the posting issues try expressionwebforum.com -
Monday, December 03, 2012 9:58 PM
As Cheryl has noted, that type of interface went out with the popular use of frames, but if you're intent upon implementing it, create a div container for the header, then assign "p osition:fixed" [Note: see below] to it in your CSS, like so...
<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<style type="text/css">
#header {
p osition:fixed; /* remove the space between the "p" and "o" */
}
</style>
</head>
<body>
<div id="header">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>... (rest of page markup goes here) ...
</body>
</html>
Note that the scroll bars won't appear until you have enough page content to fill the screen vertically, so you can't test this until then. You can put dummy content in from a lipsum generator, like this http://html-ipsum.com/.
cheers,
scott
P.S. Just learned that this asinine editor will not permit writing "position:" followed by anything, and simply blanks it out. What a stupid effing problem in an editor for a Web development forum!
Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
- Edited by paladynMicrosoft Community Contributor Monday, December 03, 2012 10:07 PM
-
Monday, December 03, 2012 11:18 PM
Oh, yeah, and another thing. Like absolute positioned elements, elements assigned fixed positioning are removed from the page flow. That is, subsequently declared (in the page source code) elements do not know they are there.
Therefore, unless you want your content which is lower in the rendered page to tuck up underneath your fixed element, you need to put a top margin (on your first block element following the fixed element) which is equal to or greater than the height of the fixed element.
I never use fixed position (or any other CSS positioning, for that matter), so I discovered this little nugget while testing when answering this question.
cheers,
scottPlease remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.
-
Tuesday, December 04, 2012 1:23 AMCrap, I forgot about the new forum bug with position and any value, sigh. Its a relatively new bug but an extremely annoying one.
Free Expression Web Tutorials
For an Expression Web forum with without the posting issues try expressionwebforum.com
