How do I make a website using CSS where the content scrolls but the sidebar is fixed?
December 26, 2003 9:31 AM Subscribe
Any CSS geniuses out there?
[More inside...]
I'd like to do a simple, standard web page using CSS: a couple of site navigation links to the left, a long text to the right. The text should scroll, the links should not. I tried using "position: fixed" for the nav bar and this works perfectly well in Firebird. In IE it works like [bleep]. This is probably an easy thing for those in the know. Any tips/workarounds to make this work in IE?
[More inside...]
I'd like to do a simple, standard web page using CSS: a couple of site navigation links to the left, a long text to the right. The text should scroll, the links should not. I tried using "position: fixed" for the nav bar and this works perfectly well in Firebird. In IE it works like [bleep]. This is probably an easy thing for those in the know. Any tips/workarounds to make this work in IE?
You can't do properly with css yet, but I've seen some hacks, explained here (example). Not exactly simple or proper though.
posted by bobo123 at 9:55 AM on December 26, 2003
posted by bobo123 at 9:55 AM on December 26, 2003
As someone who's been doing web design for almost a decade, I think I can be trusted when I say that the best way you can ensure that your website is comfortable, friendly, and easy to use is that you follow standard conventions.
Fixed screen areas aren't standard. They're cool, but their counterintuitive to the majority of users, and confusing to many of the rest.
People know how to scroll up and down. The guideline that you should have users scroll as little as possible is still relevant, but isn't nearly the firm rule that it once was. Years have passed, and people know how to scroll. They do it on Yahoo. They do it on Microsoft.com. They do it on Amazon. They do it on Google. They do it on Metafilter.
The best way to develop a good interface is to follow those who have spent umpteen thousands of dollars developing theirs -- those are the interfaces that people are comfortable with.
They're not the greatest. There are plenty of interfaces that are better. A fixed sidebar menu probably has significant advantages over a standard scrolling one.
But that being said, consider that a Dvorak keyboard is considerably more efficient than a QWERTY keyboard. When was the last time that you saw a Dvorak keyboard?
posted by oissubke at 10:15 AM on December 26, 2003
Fixed screen areas aren't standard. They're cool, but their counterintuitive to the majority of users, and confusing to many of the rest.
People know how to scroll up and down. The guideline that you should have users scroll as little as possible is still relevant, but isn't nearly the firm rule that it once was. Years have passed, and people know how to scroll. They do it on Yahoo. They do it on Microsoft.com. They do it on Amazon. They do it on Google. They do it on Metafilter.
The best way to develop a good interface is to follow those who have spent umpteen thousands of dollars developing theirs -- those are the interfaces that people are comfortable with.
They're not the greatest. There are plenty of interfaces that are better. A fixed sidebar menu probably has significant advantages over a standard scrolling one.
But that being said, consider that a Dvorak keyboard is considerably more efficient than a QWERTY keyboard. When was the last time that you saw a Dvorak keyboard?
posted by oissubke at 10:15 AM on December 26, 2003
"The text should scroll, the links should not" is why frames were invented.
posted by kindall at 10:16 AM on December 26, 2003
posted by kindall at 10:16 AM on December 26, 2003
When was the last time that you saw a Dvorak keyboard?
And I can't resist. All keyboards are Dvorak keyboards now, since all modern OSs let you choose a Dvorak layout in software.
posted by kindall at 10:17 AM on December 26, 2003
And I can't resist. All keyboards are Dvorak keyboards now, since all modern OSs let you choose a Dvorak layout in software.
posted by kindall at 10:17 AM on December 26, 2003
Response by poster: Thanks, bobo123! That seems to be just what I'm looking for.
posted by Termite at 10:29 AM on December 26, 2003
posted by Termite at 10:29 AM on December 26, 2003
I have to agree with kindall — what you're doing sounds like exactly what frames were developed for.
posted by hattifattener at 10:34 PM on December 26, 2003
posted by hattifattener at 10:34 PM on December 26, 2003
The advantage of placing a left menu without frames is that visitors can bookmark/print/save individual pages within the site. Also if someone comes to one of your interior pages through a search engine the visitor will still see left menu, this won't happen if this is done with frames.
I dislike frames, but I would hesitate to use a css hack for a professional site, personal maybe. That IE doesn't support "position:fixed" is a big peeve of mine.
Another alternative I've seen is to create a box around your main text 500px high or so with the added "overflow:auto" property, so you'll have a box in the middle of your page you can scroll, not really what you asked for but it's another design possibility you could consider.
posted by bobo123 at 12:36 AM on December 27, 2003
I dislike frames, but I would hesitate to use a css hack for a professional site, personal maybe. That IE doesn't support "position:fixed" is a big peeve of mine.
Another alternative I've seen is to create a box around your main text 500px high or so with the added "overflow:auto" property, so you'll have a box in the middle of your page you can scroll, not really what you asked for but it's another design possibility you could consider.
posted by bobo123 at 12:36 AM on December 27, 2003
As someone WHO ACTUALLY USES both style keyboards in a keyboard-intensive work environment (instead of just reading articles about them), I can testify that Dvorak is indeed more efficient. I'm not a partisan. I switch freely between both.
posted by RavinDave at 12:38 AM on December 27, 2003
posted by RavinDave at 12:38 AM on December 27, 2003
One possible solution that I toyed with (and discarded) with the most recent redesign I did of my site was to make a div resizes vertically to the height (or close to it) of the browser window, and putting the weblog content inside it, making sure to use the appropriate overflow:blah; css property, thus allowing vertical scroll if the content overlaps. The whole page doesn't scroll, but the content inside the main div does. I used the same sort of idea, more or less on the (deliberately silly) 9622.net index page design.
You can then throw a couple of more absolutely positioned divs around that, and voila ! you've got more or less what you were talking about. A similar effect can be achieved with an iframe, but iframes are a bit wonky to work with, I've found.
posted by stavrosthewonderchicken at 1:46 AM on December 27, 2003
You can then throw a couple of more absolutely positioned divs around that, and voila ! you've got more or less what you were talking about. A similar effect can be achieved with an iframe, but iframes are a bit wonky to work with, I've found.
posted by stavrosthewonderchicken at 1:46 AM on December 27, 2003
Response by poster: hattifattener: I have to agree with kindall — what you're doing sounds like exactly what frames were developed for.
I am using frames – and everybody keeps telling me I should use CSS.
bobo123 and Stavros: thanks for those other suggestions, they might be better than the CSS hack from tagsoup.
posted by Termite at 4:35 AM on December 27, 2003
I am using frames – and everybody keeps telling me I should use CSS.
bobo123 and Stavros: thanks for those other suggestions, they might be better than the CSS hack from tagsoup.
posted by Termite at 4:35 AM on December 27, 2003
There are ways to allow people to bookmark frames and to make sure that people who get to your site from a search engine end up in the frameset. They're no simpler than the CSS stuff, though.
posted by kindall at 12:04 PM on December 27, 2003
posted by kindall at 12:04 PM on December 27, 2003
As for Dvorak, I don't use it because it's more efficient; I use it because it's more comfortable. That indirectly afiects efficiency, but in terms of raw speed, it has little impact. My thinking speed is the bottleneck in either case.
posted by kindall at 12:17 PM on December 27, 2003
posted by kindall at 12:17 PM on December 27, 2003
This thread is closed to new comments.
posted by signal at 9:46 AM on December 26, 2003