Scroll Bars with divs

Need help with Photoshop, the GIMP, Illustrator, or others? Want to show off your work? Looking for advice on your newest Flash stuff?

Moderator: General Moderators

Post Reply
ninethousandfeet
Forum Contributor
Posts: 130
Joined: Tue Mar 10, 2009 4:56 pm

Scroll Bars with divs

Post by ninethousandfeet »

hello,

i am very new to web development and i'm stuck on a scroll issue. i have a background that is always 100% by 100% in body size. my page is structured so that the content is positioned relative to the bottom/footer area of the page. our divs our structured with 100% width by fixed heights (in px measurements) so that they remain aligned properly with the bottom/footer when the window is resized.

my problem: i would like to have scroll bars within the divs or just scroll bars in general for when the window is resized too small, all the while keeping the bottom/footer properly aligned. right now, i have set the overflow property and it isn't working. no scroll bars appear when the window is resized. the bottom/footer stays properly, but the content on the top, etc. starts to disappear... and i've got no scroll bars to get to it. please help, i'm losing my mind :)... thank you!
my divs... i'll post other code if nec., let me know.

Code: Select all

 
<div>
  <div id="scroller"></div>
<img src="Images/background.jpg" name="background" width="1150" height="768" id="background" /> </div>
<div id="footerIndex">
  <div id="contentSignUp">
  <div id="howItWorks"><a href="howItWorks.php"><img src="Images/howItWorks.png" alt="How It Works" width="85" height="85" class="linkButton" /></a></div>
<img src="Images/footerIndex.png" width="709" height="559" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="rect" coords="159,481,230,553" href="index.php" alt="home" />
  <area shape="rect" coords="296,519,352,537" href="about.php" alt="about" />
  <area shape="rect" coords="286,536,353,553" href="#feedbackGENERAL.php" alt="contact" />
</map>
</div>
<div id="payPalLogo"><img src="Images/verification_seal.gif" width="60" height="60" alt="Official PayPal Seal" /></div>
 
nyoka
Forum Commoner
Posts: 45
Joined: Thu Apr 09, 2009 12:53 pm

Re: Scroll Bars with divs

Post by nyoka »

This can be achieved using CSS, try the following code:

Code: Select all

 
overflow: auto;
 
Note it can be done within css or as part of the html like:

Code: Select all

 
<div id="scroller" style="overflow: auto;"></div>
 
ninethousandfeet
Forum Contributor
Posts: 130
Joined: Tue Mar 10, 2009 4:56 pm

Re: Scroll Bars with divs

Post by ninethousandfeet »

that didn't work... it's as if i need to set some way for the scroll to kick into effect when certain images hit the end of the browser or something... using the scroll auto you recommended just results in the same outcome: my background adjusts accordingly, but the scroll bars do not pop up when the window gets too small to see images/content? i'm sure it has something to do with my site being a little unconventional with the focus on the footer rather than the header as is the case on most websites.

any other ideas?
nyoka
Forum Commoner
Posts: 45
Joined: Thu Apr 09, 2009 12:53 pm

Re: Scroll Bars with divs

Post by nyoka »

What is your url, I will have a quick look and see if I can solve it for you?
ninethousandfeet
Forum Contributor
Posts: 130
Joined: Tue Mar 10, 2009 4:56 pm

Re: Scroll Bars with divs

Post by ninethousandfeet »

shareyourdiscount.com

... we are trying to mimic the effect this site uses... http://www.cssplay.co.uk/layouts/background.html
if you notice they have the full image always in the background, but the scroll bars do come up for them when the window gets to a certain size.

any ideas on this?
nyoka
Forum Commoner
Posts: 45
Joined: Thu Apr 09, 2009 12:53 pm

Re: Scroll Bars with divs

Post by nyoka »

Thanks for the links, I must be honest I am a bit confused since my browser displays both sites in a similar manner. Will review it again tomorrow maybe a fresh look will make more sense.
ninethousandfeet
Forum Contributor
Posts: 130
Joined: Tue Mar 10, 2009 4:56 pm

Re: Scroll Bars with divs

Post by ninethousandfeet »

if you make shareyourdiscount.com smaller... you'll notice you will start to lose the information on the top of the page and then you don't have any scroll bars to get to that information...

thanks for taking a look!
Post Reply