www.webdeveloper.com
Results 1 to 2 of 2

Thread: Scrolling inner Div problem

  1. #1
    Join Date
    Jul 2009
    Posts
    56

    Scrolling inner Div problem

    OK so this is complex. I have a main div called (#box) and inside it there is a footer to be FIXED to bottom of screen. And a content div (#content).
    We dont want the whole page to scroll at all (unless there is no way around this).

    Inside the #content div there is dynamically loaded div content (.pdChanger). Yes it has a class because each different div that can load into this content div has a unique id. Inside the .pdChanger divs there is usually 2 things....a banner (#banner) and then the actual text (.flexcroller).

    The only part we want to scroll is the actual text. Nothing else.

    Footer is fixed at 70px tall. Everything else is 100%.

    Here's the problem:

    Not all of the text (.flexcroller) scrolls. It only seems to scroll 75% of the text. We thought it was the footer in the way...so we took that off temporarily. But that wasnt it. We do need to consider to not run under the footer so I have a javascrpt function I wrote that runs on document ready and when window is resized...and it will change the height of (#content) to window size - 70px (for footer). This stops the content from running behind the footer. But still the whole text of the (.flexcroller) is not scrolling.

    Here is sample CSS code:

    Code:
    html, body {margin:0px; height:100%; padding:0px; background:#000000 url(../images/static/bg.jpg) repeat-x fixed ; color:#000000; vertical-align:bottom; overflow: auto;}
    
    
    .flexcroller {
    height: 100%;
    
    }
    #box {margin:0px auto; background:#000000; position:relative; top:70px; width:815px; font-family:'GothamLightRegular'; color:#ffffff; height: 100%; }
    
    #content {margin:0px auto; width:815px; font-family:'GothamLightRegular'; color:#ffffff; height:100%; position: relative; }
    
    #about {font:15px 'GothamLightRegular'; color:#ffffff; background: #000000; width:815px; margin:0px auto; height: 100%; position: absolute; top: 0; left: 0; z-index: 12;}
    I can't really show you the example yet as it is hosted locally till i fix. But any help, I'd really appreciate it.
    Attached Images Attached Images

  2. #2
    Join Date
    Jul 2009
    Posts
    56

    Example to Problem

    Goto http://www.penieldesign.org/clc

    Click on ABOUT once page loads.

    Last line should read:

    In the bodily resurrection; eternal life for the righteous, and eternal punishment for the wicked.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles