SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast weekyd's Avatar
    Join Date
    Jun 2004
    Location
    UK
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Losing my mind over DIV scroll..arrrgggg!!

    hi..guys!
    I am litterally banging my head over this problem... below is the full html code..
    How do i get the scroll bar on right but not on the content area..i.e just like default browser scroll on the right..

    my content area is fixed...so when the content exceeds the allocated width and height the scroll bar appears on the far right...

    pleaseeee 'elp






    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    body {
    margin: 0px;
    padding: 0px;
    background-color: #fff;
    }
    /*#divEntire {
    margin: auto;
    padding: 0px;
    border: 1px solid #000000;
    height: 600px;
    width: 100%;
    }*/

    #divTop {
    MARGIN:auto;
    height: 171px;
    width: 800px;
    border-top: 1px solid #000000;
    border-right: 1px solid #000000;
    border-left: 1px solid #000000;
    }

    #divMain {
    margin:auto;
    width:800px;
    height: 376px; border-right: 1px solid #000000;
    border-left: 1px solid #000000;

    }
    #divFooter {
    margin:auto;
    width:800px;
    height:53px;
    border-right: 1px solid #000000;
    border-left: 1px solid #000000;
    border-bottom:1px solid #000000;
    float: none;
    }

    #divLeftNav {
    height: 376px;
    width: 183px;
    float: left;

    }

    #divRightCont {
    width: 617px;
    height: 376px;
    float: left;

    }

    DIV.fixedcontent {
    Z-INDEX: 2;
    POSITION: fixed;

    }

    -->
    </style>

    <!--[if gte IE 5]>
    <STYLE type=text/css>
    HTML {
    OVERFLOW-Y: hidden;
    HEIGHT: 100%;
    width:100%;
    }
    BODY {
    OVERFLOW-Y: hidden;
    HEIGHT: 100%;
    width:100%;
    }
    DIV.scrollingDiv {
    OVERFLOW: auto;
    }
    DIV.fixedcontent {
    Z-INDEX: 2;
    }
    DIV.scrollingcontent {
    OVERFLOW: auto;

    }


    #divTop {
    MARGIN:auto;
    height: 171px;
    width: 800px;

    }



    #divFooter {
    Z-INDEX: 2;
    }


    </STYLE>
    <![endif]-->

    </head>

    <body><div id="divEntire">
    <div class="fixedcontent" id="divTop">Content for id "top" Goes Here
    </div>
    <!--end of divTop -->
    <div id="divMain">
    <div class="fixedcontent" id="divLeftNav">Content for id "divLeftNav" Goes Here
    </div><!-- end of divLeftNav-->
    <div class="scrollingcontent" id="divRightCont">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam sagittis adipiscing lacus. Phasellus ut augue eget est lacinia tincidunt. In hac habitasse platea dictumst. Vivamus in sem. Fusce a justo. Aenean ullamcorper nonummy risus. Maecenas ut turpis vel arcu fringilla hendrerit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ac mauris. Sed congue dolor eu ipsum. Integer tincidunt dui venenatis mi. Pellentesque ornare tincidunt dolor. Proin interdum placerat erat. Vivamus id diam. </p>
    <p>Integer vel augue in tortor elementum scelerisque. Cras fringilla blandit quam. Nunc sagittis, libero vel vestibulum scelerisque, lorem tortor feugiat quam, vitae mollis dui tortor dignissim est. Nullam a lectus a est ultricies pulvinar. Sed mollis. Ut semper, dui sed auctor porta, eros arcu mollis nulla, sed varius massa diam et tortor. In ligula arcu, suscipit et, cursus ut, dictum non, sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi vitae mi eget ante ullamcorper semper. Sed egestas placerat mi. Donec iaculis tincidunt tortor. Nulla eleifend, mi ut vestibulum varius, ipsum arcu vulputate quam, vel interdum est odio in pede. Fusce sit amet lorem. </p>
    <p>Integer nisl ligula, mollis ut, euismod in, semper tempus, enim. Aenean rhoncus rhoncus pede. Vestibulum sed velit sit amet est congue cursus. Sed egestas neque a diam. Pellentesque elementum turpis vel leo. In diam leo, luctus bibendum, tempor in, laoreet nec, purus. Integer placerat tortor. Vestibulum aliquam odio non purus. Nam hendrerit faucibus massa. Nullam lorem. Aliquam facilisis scelerisque mi. Integer fringilla mi. In hac habitasse platea dictumst. Fusce blandit iaculis neque. Proin nisl. </p>
    <p>Curabitur dui sem, vehicula ac, laoreet vitae, consequat non, mi. Nunc feugiat, lorem at ultrices volutpat, pede dui cursus est, nec cursus justo nisl nec eros. Quisque elementum, nisl non pulvinar rutrum, quam sapien faucibus orci, nec vulputate erat quam pellentesque tortor. Pellentesque eu sem eu orci sodales faucibus. Fusce aliquam imperdiet mauris. Fusce at ligula. Proin arcu wisi, aliquam eu, lobortis nec, volutpat ultricies, mi. Cras eros justo, venenatis vel, auctor ac, commodo in, mi. Nulla sollicitudin viverra tortor. Aliquam eget neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse condimentum nibh at massa. Proin congue. Etiam id justo. Duis sagittis nibh id mi. Donec gravida. </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur congue tincidunt neque. Duis convallis dolor ac magna. Vivamus eget urna. Aenean arcu nulla, consectetuer vel, sodales at, ullamcorper et, neque. In pretium. Duis turpis neque, auctor ut, ornare ac, blandit imperdiet, nisl. Praesent non mauris. Aliquam sagittis erat ac quam commodo tempus. Vestibulum mauris. Etiam tellus lectus, nonummy ac, tempus eget, interdum vitae, mauris. Cras sem purus, auctor sed, ornare a, tristique vel, orci. Vestibulum sed risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas nibh. Etiam purus. Fusce vel lacus id augue molestie lobortis. Ut vel diam. Donec aliquet. Vivamus vehicula imperdiet massa. </p>
    <p></p>
    <p>&nbsp; </p>
    </div>
    <!-- end of div right content-->
    </div><!-- end of div main-->
    <div class="fixedcontent" id="divFooter">Content for id "divFooter" Goes Here
    </div>
    <!-- end of divFooter-->

    </div>


    </body>
    </html>

  2. #2
    there is no box baztorres's Avatar
    Join Date
    May 2004
    Location
    UK - London \ Surrey
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you mean that you want the browser scroll bar to show?

    If so, I've altered a couple of bits of the css

    #divRightCont {
    width: 617px;
    height: auto;
    float: left;
    }

    BODY {
    OVERFLOW-Y: auto;
    HEIGHT: 100%;
    width:100%;
    }

    #divMain {
    margin:auto;
    width:800px;
    height: auto;
    border-right: 1px solid #000000;
    border-left: 1px solid #000000;
    }

    DIV.scrollingcontent {
    OVERFLOW: no;
    }
    With div's Main and RightCont, altering the height between auto and 100% didn't make a difference from what I could see. Unfortunately, I do not know the difference between the two *shrug*

    Overflow is the bit that gives the scroll bar

    Does this do what you want? Is it in the right direction?

    Note:
    Bear in mind this works on msie6....
    Baz
    ---

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    How do i get the scroll bar on right but not on the content area..i.e just like default browser scroll on the right..
    I'm not sure I understand what you are saying. If you want the usual browser scrollbar on the right then get rid of all the scrollbar definitions inside your conditional comments.

    This will put the scrollbar back on the browser and take the scrollbar off content. This will of course mean that the content will now extend below the screen.

    All the above only refers to ie as your page is completely broken in mozilla. Be also aware that IE doesn't understand position:fixed and will treat it as static. You may need to explain exactly what you want if this isn't what you meant

    Quote Originally Posted by baz
    DIV.scrollingcontent {
    OVERFLOW: no;
    }
    Note that there is no value for overflow called no. The allowable values are visible, hidden,scroll, auto, inherit.

    Paul

  4. #4
    there is no box baztorres's Avatar
    Join Date
    May 2004
    Location
    UK - London \ Surrey
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ooops, cheers for the pointer Paul.
    Would hidden be the correct value?
    Baz
    ---

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    HI,
    Would hidden be the correct value?
    Hidden would hide the overflowing content which means that there will be no need for a scrollbar so it is hidden at all times (if thats what was wanted).

    Visible means overflowing content would be displayed but the element will not expand so the text will overflow.

    Scroll would ensure scrollbars were visible at all times so that overflowing content is accessible by scrollbars.

    auto will mean that scrollbars are only applied when the content overflows and then only the scrollbar that is required. Unlike scroll which puts on both scrollbars straight away, auto will only apply the scrollbar that's needed and is the best one to use as it usually means that a vertical scrollbar appears and not the horizontal.

    Hope that explians it all

    Paul

  6. #6
    there is no box baztorres's Avatar
    Join Date
    May 2004
    Location
    UK - London \ Surrey
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the explanations.
    So would it work havign the overflow as hidden, but making the div the height to encompass the content?
    Baz
    ---

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    If the div height is greater than the content it contains then the scrolbars will only appear if they are set to scroll, otherwise there will be none.

    Is that what you meant

    Paul

  8. #8
    Are You There? KDesigns's Avatar
    Join Date
    Oct 2003
    Location
    Your Monitor
    Posts
    1,147
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you set it as hidden and the content goes farther than the div than you won't get a scrollbar at all, as Paul said.

    If you want your div to be a certain height and then if content goes over the scrollbar kicks in, then you need to set overflow to auto.
    ChooseDaily.com - Follow on Twitter
    Top Resources for Web Designers and Developers Every Day!

  9. #9
    there is no box baztorres's Avatar
    Join Date
    May 2004
    Location
    UK - London \ Surrey
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right...I think I have it.
    Thanks.
    Baz
    ---


Bookmarks

Posting Permissions

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