frozen sidebar

joeljr · Joined: 20 Feb 2008 Posts: 11

i tried searching but i don't know the right terminology

I want my side bar to stay in one place while the page scrolls.

just like this: http://www.w3.org/Style/CSS/learning

thanks

i just started learning this stuff but i'm computer savy. although its rough learning it on your own its fun. i'm trying to build our (family business) website all in notepad.

sticks464 · Joined: 31 Dec 2006 Posts: 1122

Normally if you look at the source code you can tell how they do it. To get a left column to stay put use

joeljr · Joined: 20 Feb 2008 Posts: 11

i was talking about the navigation menu on the right.

books
online
resources
css validator
etc etc

i tried messing with the positioning value on my page. where i currently have the navigation bar on th right. i just don't think that where its going to make it happen.

i tried looking at the code, but haven't quite figured out how they did it. i figured its in the css file. i don't know how to look at that.

i noticed he had this:

joeljr · Joined: 20 Feb 2008 Posts: 11

Ok so I figured this out.

fixed is the key. but it doesn't work in IE.

So I have the results i want in firefox but not ie.

still searching...

joeljr · Joined: 20 Feb 2008 Posts: 11

and i found this work around so that there are two styles (one for ie and one for firefox):

joeljr · Joined: 20 Feb 2008 Posts: 11

now i found this that explanes how to do it.

it also has an example of the menu being used on the page.

http://www.w3.org/Style/Examples/007/menus

i tried it but it doesn't work in ie, it does in ff. yet some how when i vist both sites i've linked to it does work in ie.

so what are they doing that i'm not seeing.

sticks464 · Joined: 31 Dec 2006 Posts: 1122

You just didn't go far enough into the code. This tests ok in IE5.5, 6 and 7. Works in FF, but the hover is not working in Opera for some reason. I don't have Safari installed right now or I would test that also.
This line body>div.banner {position: fixed} is the work around for IE along with the use of position: absolute

joeljr · Joined: 20 Feb 2008 Posts: 11

o wow thanks. I tried that but obviously was doing something wrong.

another question.

you changed some of the formatting. like the placing of li, /li, meta http-equ was added as well as this "http://www.w3.org/TR/html4/loose.dtd"

can you explain those changes to me?

as far as the formating i saw that somewhere and it helps visually check for errors. but is that bad form?

thanks a lot again.

sticks464 · Joined: 31 Dec 2006 Posts: 1122

All I did with the formatting was line up the li, /li tags on my computer. They weren't in the wrong place but they look better this way and help the visual look of the code when viewed.

The doctype declaration tells what doctype is being used, but you also have to tell the browser where it's at so it has a reference, hence the "http://www.w3.org/TR/html4/loose.dtd" on the end. See http://www.w3.org/QA/2002/04/valid-dtd-list.html

You already had a meta tag for the content type, check here for an explanation
http://www.utf-8.com/
This also will identify any errors in the code that will break the layout of the page when viewed in a browser.

It is not bad form to arrange your code so it is visually appealing, not only for yourself to easily find things, but for anyone that may see your code.

To insure that you have written good code for the doctype your using, use the w3c validator. http://validator.w3.org/

joeljr · Joined: 20 Feb 2008 Posts: 11

cool.

ok so now i have the same problem but different.

your code worked perfect with the styling internal. But I want it to be in my external css file so I copied the styling over to css file.

IE and Oprea work fine but not Firefox. Now it acts like IE was acting.

sticks464 · Joined: 31 Dec 2006 Posts: 1122

I did some more searching and this is what I have. It works in IE7 and FF. Can't find a work around or hack that will make it work in IE6 or older.

html

joeljr · Joined: 20 Feb 2008 Posts: 11

did you find that here: http://www.cssplay.co.uk/layouts/fixed.html

i was looking at that. but it said this: "The only problem with this is that you cannot use absolute or relative positions on the moving page but float is allowed."

i guess by moving page they are refering to the body or everything but the fixed menu.

i was a bit concerned with that but honsetly i don't know how much it would affect the syling i will use. two reasons for that i haven't finalized what the design will be and i don't know css well enough yet to uderstand what limitations it will place on the design.

sticks464 · Joined: 31 Dec 2006 Posts: 1122

I looked at that and that's where I got the different css that makes it work in IE7. The moving page is the parts that scroll. If you notice, I put the content (other than the menu) into a div container and removed the margins and padding from the body element. Now you can style the container and the content inside. CSS will place no limitations on the layout, IE is the only limitation for designing.

joeljr · Joined: 20 Feb 2008 Posts: 11

dude if your ever in houston. let me know, i'll hook you up at our restaurant.

joeljr · Joined: 20 Feb 2008 Posts: 11

There is no need for these being in there twice right?