Css Styles

[The enchanted broomstick]

rightio, errm going to try and explain this the best as i can so just try and follow :">

Taking into consideration CSS design, in the making i have a 2 column style with header and footer, as it stands at the moment the whole page scrolls up and down, not quite what im wanting.

Is it possible to put the right hand column as a frame so it scrolls up and down inside the header and the footer while the left column maintains set size?

stu :lol:

[nb88]

Don't really understand what you mean but...frames? or iFrames? do you just want a scroller in one column... and no scroller anywhere else?

For example my site - www.wantagetrial.com - has an iFrame (only the left box scrolls)

[tomturd]

You need to use an iframe - heres a code 'snippet' for you to play with..

Paste all the stuff you normally have in your left column into a new page (page.htm), and replace what you pasted with this -

<div id="leftcolumn">

     <IFRAME SRC="page.htm" WIDTH=150 HEIGHT=400 FRAMEBORDER=no></IFRAME>

</div>

[/code]

You cant make a scrolling box using just CSS as far as im aware, just use a normal iframe and mark it up :lol:

[delusional]

Easy solution: don't do it. It'll look a lot better if the whole page scrolls, not just the content. It should also make it a lot easier to be sure the page will scale well to different resolutions if it's not seperated into different frames/scrolling areas.

However, if you absolutely have to do it there are several possible solutions. The first, and least elegant, is to simply use frames. Either a single iframe to contain the content or a frameset to lay out the whole page. This is pretty easy to do, but you shouldn't do it, because frames are bad and wrong, mmmkay.

If I remember correctly it should be possible to use div tags in a similar way to a frameset, setting fixed (or relative - i.e. fixed height/width with percent variables instead of a fixed number) size divs and allowing only the content pane to scroll. I'm not sure of the syntax for this, but I'm pretty sure it's achievable with div tags (and by extension, is achievable via CSS). This should give you a page that looks similar to what you would have achieved using a frameset, but it could be quite tricky to get working correctly (if it is, in fact, achievable).

Another option is to use float and background tags. With this option you can set a div to 'float' in one part of the screen, then when you scroll the page down said div will remain in the specified position in relation to the browser window. I seem to remember this being a bit of a pain to make work in all browsers, it also can look a little jumpy when scrolling, which is ok for a menu but a bit shit for headers and footers. Although, if your header and footer don't have any interactive elements (i.e. they're just images) you may be able to set them as fixed background images (meaning they don't scroll) and then arrange the content in a relative positioned div over the top. This should give you a normal, full length, scroll bar, but only scroll the content. It'll probably be a pig to fine tune it across all browsers though.

Really, unless there's some really compelling reason to use a seperate scrolling area, I'd just make it all fixed. It'll be easier to code, easier to use and look a lot less like it was made in the mid 90's :)

[Alexx]

don't use frame :lol: They're really messy, not to mention the mess they make on search engines.

<div style="width : 200px; height : 50px; overflow : auto;"> Content Here </div>

...Is all you need, define how high and wide you want your block to be, add any content you want where i've typed 'Content Here' and it will add a downwards scroll bar if need be!

depending on the way you want your content to scroll you can replace auto with 'scroll' which clips it differently.

I wouldn't start floating things around, and using complex code.... though in the end like delusional says scrolling content is a bit of a pain in the ass anyway!