PDA

Click to See Complete Forum and Search --> : Overflow

Jaelan
12-27-2004, 02:28 PM
Hey all,
I'm pretty new to all the complexities of CSS and the do's/don'ts of it. I recently read a topic that said not to use overflow styles. Now here's my question. If I have a header at the top of a page that I don't want to move, but the body part to scroll if necessary, how would I go about doing that? I'm aware of the position: fixed style, but I don't think IE supports it(not sure, so I'm probably wrong). So how can I make a header stay in position while the body is able to scroll...?

Thanks,
Jaelan
duderdude2
12-27-2004, 03:12 PM
Wait, we're not supposed to use overflow? Howcome?
Jaelan
12-27-2004, 03:16 PM
i'm not sure if it's true, that's why I'm asking:

http://webdeveloper.com/forum/showthread.php?s=&threadid=51742

heavenly_blue's post says: remove all overflow: properties...
duderdude2
12-27-2004, 03:18 PM
I can kind of see why on that page; it's being used on the main content window, which is kind of annoying.

Is it okay to use "overflow" on a small area though, such as on a product description?

Example: http://www.gamespot.com/ Enlarge your text (on any browser aside from IE). Under "Latest News", a scroll bar appears.
Jaelan
12-27-2004, 03:25 PM
ok...so that takes me back to my original question of how I get the header to stay at the top, and the main content (if too large to fit on one window) to scroll without using frames. Is position: fixed the only way to do that?
duderdude2
12-27-2004, 03:26 PM
Originally posted by Jaelan
ok...so that takes me back to my original question of how I get the header to stay at the top, and the main content (if too large to fit on one window) to scroll without using frames. Is position: fixed the only way to do that?

Sorry, I didn't mean to sound like I was asking you

I'm curious as well, so I merely added another quuestion on top of your :)
MstrBob
12-27-2004, 04:38 PM
The overflow property is fine to use. I'm not sure, but are you trying to accomplish something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Content-Style-Type" content="text/css">
<title>Website Title</title>
<style type="text/css">
<!--
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hidden;
}

#header {
width:100%;
height:15%;
border-bottom:1px solid #000000;
margin:0;
}

#content {
margin:0;
height:84%;
overflow:auto;
}
-->
</style>
</head>
<body>
<h1 id="header">Header Image Here</h1>
<div id="content">
<p>All your content here...</p>
</div>
</body>
</html>
Jaelan
12-27-2004, 04:42 PM
Yeah, where the content part can scroll. But I was confused when I read that one post about not using overflow property. *shrug* If its use is generally accepted, there's no problem :D

Thanks

Jaelan
toicontien
12-27-2004, 04:54 PM
You can use overflowed DIVs if you want, but only if you specify the heights relative to the viewport's height. There is a way to emulate fixed positioning in Internet Explorer, but the article escapes my mind at the moment. I know someone here at the forum has a link.

Try searching Google for fixed positioning internet explorer.

It uses a JavaScript behavior from a .htc file, which is an Internet Explorer-only technology. What makes the header so necessary that it should never scroll out of view? I know it's a design decision, but is it really practical? Good questions to ask your self.
Jaelan
12-27-2004, 05:21 PM
In the header div, I include my navigation. So basically, the header consists of the company logo and the nav menu. I personally don't see why it needs to stay fixed, but my boss says he would like it to stay at the top of the view while the content scrolls...and I couldn't come up with a reason not to do it. Except, he was speaking of using frames, and I did dissuade him from those. But if it can be done w/ css, I might throw him a bone

:D

Jaelan

P.S. The reason I couldn't come up with a reason about it, is because mainly I'm a db/php coder, and am just starting to learn design issues. Which is why I asked others!
MstrBob
12-27-2004, 05:25 PM
I actually find it handy. If done well, it makes navigating a website a bit quicker, as the nav is always there and you don't have to scroll. It can just take a little bit to get IE to cooperate. So, does that example work or is it not what you're looking for? Perhaps I can point you towards something if otherwise.
Jaelan
12-27-2004, 05:32 PM
yep,
That example works fine :)

Thanks for all the discussion...been interesting and def. informative

Jaelan