PDA

View Full Version : Scrollable windows/layer/table, HOW TO?


RRabbi
04-11-2005, 05:24 PM
My website is http://www.greenroomeast.com ('http://www.greenroomeast.com'). The pages that i'm trying to modify are:

http://www.greenroomeast.com/look&listen.htm ('http://www.greenroomeast.com/look&listen.htm')
http://www.greenroomeast.com/gear.htm ('http://www.greenroomeast.com/gear.htm')

I've set up the website using tables, so that when you look at it in different resolutions and/or resize the main browser window, the content adjusts to always fit the window. i.e. the image of the microphone and text "Green Room East" will always stay at the lower left of the screen.

There's two sections of the above pages that are giving me trouble. On the Look & Listen page there is a list of mp3's, and on the gear page there's a list of my recording gear. The more I add to the list and resize the window or lower the screen resolution, then the items in these lists forces the microphone and Green Room East text off of the screen and forces it DOWN. Thus creating a scrollbar on the main browser window. This is a problem now, and I don't even have a fraction of the content that I WANT to add already entered into these sections. (I will add more mp3's, and more gear descriptions). Down the road, I may even want to add more content to the other pages and will run into the same problem.

Here's what I'd like to see happen. I want the sections in question (list of gear, list of mp3's) to each have their own vertical scroll bar. I want the section to be at a fixed height, but still expand and contract horizontally. So this way The microphone and Green Room East will ALWAYS stay at the lower left no matter the resolution or main window size. If there's too much content in the gear or mp3 lists, then rather than force the microphone DOWN off of the screen (and a main window scrollbar is created) I want the list sections to generate a scrollbar so I can scroll just THOSE sections. Am I babbling? yes... hehe

I created the website using Dreamweaver 4, and using tables. I don't really have ANY experience looking at or working with the actual html code, but i'll try to do my best if that's the only solution. I pretty much just used the toolbars, and GUI to make the website.

Any help would be appreciated...

Dave (RRabbi)

RRabbi
04-13-2005, 05:59 PM
here's the solution for anyone interested... I ended up having to get the answer from another forum.... oh well...

"Ok, you will need to have a separate CSS file that you refer to. In it, place this code:

#menu {
border-top: 1px solid #990000;
border-right: 1px solid #990000;
border-left: 1px solid #990000;
border-bottom: 1px solid #990000;
overflow: auto;
width: 300;
height: 250;
background: #eee;
padding: 5px;
margin: 5px 5px 5px 5px;
}

(change attributes to taste, of course)

Name the file something like "styles.css" and on your html page refer to it this way somewhere between your HEAD tags: <link rel="STYLESHEET" type="text/css" href="styles.css">

Then, put the content you want to scroll between these tags: <div id="menu"></div>

that should do the trick."

kate
04-13-2005, 07:35 PM
Thank you very much rrabbi,

Very helpful!

:)