Hi. I've used css for simplifying styles, but not for layout...

I have a site using frames (see www.paulandlinda.info (http://www.paulandlinda.info)) and I'm trying to convert it to a frame-free css-only site - 2 reasons - 1. 'cause it's good practise & 2. I keep hearing "frames are BAD" ....

So far, I have the css version looking like this: http://www.paulandlinda.info/css_index.php (btw only the home and credits link work on this page.)

The problem is that the mainPage div and the footer div will overlay the other divs if you shrink the size of the window. I want ALL of the divs to stay put and scrollbars to appear on the mainPage one if necessary.

rather than make this a really loooong post..... the css style sheet is available from http://www.paulandlinda.info/css_styles.css

I hope I've made myself clear and someone is able to help..... (and if you're able to tell me why the diary image doesn't line up properly - that'd be even better - the same images are in the frame site and css site...)

I then want to do the "hover" effect on the menu (as per frames site) but with css instead of javascript.... but one thing at a time is fine <lol>

For the hover buttons use:


#button a {
background-image: url(yourunhoveredbutton);
width: butttonwidth;
height: buttonheight;
}
#button a:hover {
background-image: url(yourhoveredbutton);
}


That should work.

If you want your stuff to stay put...

position: absolute;

thanks heaps :) - Hover buttons now work beautifully :))

If you want your stuff to stay put...

position: absolute;
BlueSync - I'm already using position: absolute;

No problem, glad to help ;)

Lol

Hello, they said thanks? I'm fine with helping people. Go learn CSS, matey, because I like helpin' people who don't have the time. No need to laugh, really. People.

Hi. I've used css for simplifying styles, but not for layout...

I have a site using frames (see www.paulandlinda.info (http://www.paulandlinda.info)) and I'm trying to convert it to a frame-free css-only site - 2 reasons - 1. 'cause it's good practise & 2. I keep hearing "frames are BAD" ....

So far, I have the css version looking like this: http://www.paulandlinda.info/css_index.php (btw only the home and credits link work on this page.)

The problem is that the mainPage div and the footer div will overlay the other divs if you shrink the size of the window.
rather than make this a really loooong post..... the css style sheet is available from http://www.paulandlinda.info/css_styles.css

I hope I've made myself clear and someone is able to help..... (and if you're able to tell me why the diary image doesn't line up properly - that'd be even better - the same images are in the frame site and css site...)

I then want to do the "hover" effect on the menu (as per frames site) but with css instead of javascript.... but one thing at a time is fine <lol>

OK, all problems solved except for the one which is REALLY bugging me - the div's DON'T behave like frames - they don't stay put - All frames have
position: absolute;
the top. menu and footer frames also have overflow: hidden;
the main frame has overflow: auto;

HOW do I make all the divs stay put with scroll bars appearing on the main div only?

I want ALL of the divs to STAY PUT and scrollbars to appear on the mainPage div if necessary. I know it can be done - see http://www.w3.org/Style/CSS/
their menu stays put - but I haven't figured out how they did it......

position: fixed; in place of position: absolute; for any element you want to stay in place.

IE has problems with that, though, so you'll have to find a workaround. There are several ways to do it, some of which are simpler than others.

When you search for it, I recommend using a method that doesn't involve CSS hacking.