Advanced Search

Results 1 to 2 of 2

Thread: Help with Overflow property and Scrollbars!

  1. #1
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Help with Overflow property and Scrollbars!

    Hi, So as the title suggests, I'm having trouble with overflow.

    What I want is the header and footer to be fixed, with the body content to be scrollable when it has to.
    So I went as set the header and footer positions to fixed, then for header top:0 and footer bottom:0.

    However, once I set the header and footer positions to fixed, I can no longer scroll through the body content, despite the overflow value of 'auto'.

    Here's my HTML:
    Code:
    <!DOCTYPE html>
    <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
    <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
    <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="no-js" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"
            xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
    
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
            <title>Game Stuff</title>
            <meta name="description" content="">
            <meta name content="viewport" content="width=device-width">
    
            <!-- Place favicon.ico and apple-touch-icon.png in the root directiory -->
    
            <link type="text/css" rel="stylesheet" href="css/normalize.css"/>
            <link rel="stylesheet" href="css/style.css"/>
            <link rel="stylesheet" href="css/source_sans.css"/>
            <script type="text/javascript" scr="js/vendor/modernizr-2.6.2.min.js"></script>
            <script type="text/javascript" scr="js/jquery1.9.js"></script>
            <script type="text/javascript" onscroll="js/global.js"></script>
        </head>
    
        <!-- Website Body -->
    
        <body>
            <!-- HEADER -->
            <div id="header">
                <div id="headerContainer">
                    <img id="logo" src="img/logo.png" />
                    <div id="menuContainer">
                        <ul id="menuList">
                            <li class="menuItem">
                                Media
                                <ul class='subMenu'>
                                    <li>Montage</li>
                                    <li>Music</li>
                                </ul>
                            </li>
                            <li class="menuItem">
                                Animation
                            </li>
                            <li class="menuItem">
                                Resources
                            </li>
                            <li class="menuItem">
                            Contact & FAQ's
                            </li>
                         </ul>
                     </div>
                    <div class='clearFloat'/>
                </div>
            </div>
    
        <!-- BODY -->
            <div id="body">
                <div id="contentWrapper">
                    <div id="newsWrapper">
                        <div class='newsPostWrapper'>
                            <img class='newsImage' alt='newsImage' src='img/newsImage.jpg'/>
                            <div class='newsTitle'>
                                News!
                                <span class='newsDate'>THIS IS THE DATE</span>
                            </div>
                            <div class='newsContents'>
                                
                            </div>
                            <div class='newsAuthor'>I AM THE AUTHOR</div>
                        </div>
                        <div class='clearFloat'></div>
                    </div>
                </div>
            </div>
    
        <!-- FOOTER -->
            <div id="footer">
                <div id="footerContainer">
                    <p>I MADE THIS WEBSITE!</p>
                </div>
            </div>
        </body>
    </html>






    And here's my CSS:
    Code:
    /** GLOBAL STYLES **/
    
    * {
        padding: 0;
        margin: 0;
    }
    .clearFloat{
        clear: both;
    }
    body{
        margin: 0;
        font-size: 15px;
        font: Arial;
    }
    
    /** HEADER STYLES **/
    
    #header{
        width: 100%;
        top: 0;
        position: fixed;
    }
    #headerContainer{
        width: 100%;
        max-width: 900px;
        margin: auto;
        background-color: #eeeeee;
    }
    #logo{
        display: block;
        width: 12%;
        float: left;
        margin-left: 10%;
    }
    
    /** Menu **/
    
    #menuContainer{
        float: left;
        width: 70%;
        margin: 75px 0 0 30px;
    }
    #menuList{
        list-style: none;
        display: block;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    #menuList .menuItem{
        font-size: 15px;
        display: inline-block;
        padding: 3% 7%;
        background-color: #555;
        color: #eeeeee;
        position: relative;
    }
    #menuList .menuItem:hover{
        background-color: #eee;
        color: #555;
    }
    
    /** Trigger **/
    
    #menuList .menuItem:hover .subMenu{
        /*display: block;*/
    }
    
    /** Sub Menu **/
    
    .subMenu{
        display: none;
        /*display: block;*/
        list-style: none;
        position: absolute;
        left: 0;
        top: 100%;
        background-color: #555;
        width: 100%;
    }
    .subMenu li{
        padding:  5% 10%;
        color: #eee;
    }
    .subMenu li:hover{
        color: #999;
    }
    
    
    /** BODY STYLES **/
    
    
    #body{
        min-height: 200px;
    }
    #contentWrapper{
        width: 100%;
        max-width: 1000px;
        margin: auto;
    }
    #newsWrapper{
        width: 100%;
        max-width: 800px;
        margin: auto;
        padding: 5% 0;
    }
    .newsPostWrapper{
        width: 90%;
        padding: 5%;
    }
    .newsImage{
        width: 100%;
        max-width: 600px;
        display: block;
        padding: 1.5% 0;
    }
    .newsContentWrapper{
        float: left;
        width: 100%;
        max-width: 600px;
    }
    .newsTitle{
        position: relative;
        font-size: 20;
        line-height: 24px;
        padding: 3%;
    }
    .newsDate{
        position: absolute;
        right: 0;
        top: 0;
        font-size: 18px;
        line-height: 20px;
        padding: 3% 0;
        width: 25%;
    }
    .newsContents{
        padding: 3%;
    }
    .newsContents p{
        color: #222;
    }
    .newsAuthor{
    
    }
    
    
    /** CHANGING LAYOUT BASED ON SIZE **/
    @media screen and (min-width: 600px){
        .newsImage{
            width: 33%;
            float: left;
        }
        .newsContentWrapper{
            float: left;
            width: 66%;
        }
    }
    
    
    /** FOOTER **/
    #footer{
        width: 100%;
        bottom: 0;
        position: fixed;
    }
    #footerContainer{
        width: 100%;
        max-width: 900px;
        margin: auto;
        background-color: #eeeeee;
    }
    #footerContainer p{
        text-align: center;
    }
    NOTE: If anybody's wondering, this is just for a dinky school project lol. Also, just insert random stuff in newsContents for body text.

    Thanks in advance for any help!!!
    CJ.

  2. #2
    Join Date
    Apr 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Oh, I figured it out! Forgot a container.

    However, now that it scrolls, for some reason the newsTitle, and newsDate scroll over the header, but nothing else does...

    CJ.

Similar Threads

  1. Overflow and Scrollbars
    By Moshambi in forum CSS
    Replies: 3
    Last Post: 02-21-2009, 09:08 AM
  2. Replies: 0
    Last Post: 06-14-2008, 10:52 PM
  3. Image Thumbnail Viewer Script - making scrollbars overflow
    By Flipflops in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 02-29-2008, 04:18 PM
  4. OVERFLOW property Question (Netscape)
    By tracy78 in forum CSS
    Replies: 2
    Last Post: 05-26-2006, 05:34 AM
  5. Replies: 2
    Last Post: 04-06-2006, 07:04 AM

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
  •