Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Simple CSS website. Problem with scrolling bars!

    Hi, I have created a website with a simple layout. There is a title on the top left corner, a description area for each project on the top which overlaps the images when scrolling and stays there. and a menu which i want to be anchored to the bottom left of the page, regardless of the size of the browser. However the main part of the page should scroll so we can see all the images that dont fit in the window. I have achieved this by putting all these elements in separate absolute positioned divs, with the main one (with the images in it) padded left and top so it starts in the right place.



    This seems to work now, but whenever I have only one image in the page I and i make the browser smaller i get a scroll bar on the edge of the image, and not the edge of the page. Why is this? The main container has a this code applied to it
    overflow-x: hidden; overflow-y: auto;


    Can anyone tell me if they can see anything wrong with the code, or how you would recommend I build it?


    here is the code for it


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Title</title>
    <link href="helioscsstest.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    p.basic-paragraph {}
    -->
    </style>
    </head>

    <body>


    <div id="container">



    <div id="title">Title of Page</div>

    <div id="workdescription">
    <span class="category"> Title</span><br />
    <br />
    <span class="category">Format</span>: X<br />
    <span class="category">Client</span>: X<br />

    </p>
    <p class="basic-paragraph">Description</p>
    </div>


    <div id="workimages">
    <div id="imagecontainer"> <img src="http://www.owdna.org/graphics/history/brookshicks/d040.jpg" width=650 px/></div>
    <div id="imagecontainer"> <img src="http://englishrussia.com/images/moscow_old_2/16.jpg" width=650 px/></div>


    </div>



    <div id="workmenu">

    <div id="workmenucontent">
    <p class="indentedtitle">ABOUT / CONTACT<br />
    <p class="indentedtitle">PROJECTS<br />
    <a href="project1.html">Project 1<br />
    <a href="project2.html">Project 2<br />
    <a href="project3.html">Project 3<br />

    <a href="project4.html">Project 4<br />
    <a href="project4.html">Project 5<br />
    <a href="project6.html">Project 6<br />



    </div>


    </div>

    </body>
    </html>
    here is the css style sheet

    @charset "UTF-8";
    /* CSS Document */

    html, body {
    margin: 0;
    padding: 0;
    }

    #page-container {
    height: 100%;
    }

    #title {
    width: 250px;
    height: 50px;
    position: absolute;
    top: 10px;
    left: 10px;
    }

    #temporary {
    position:absolute;
    top:50%;
    height:240px;
    left:50%;
    width:50%;
    margin-left:-250px;
    margin-top:-120px;
    z-index:-1;
    }

    #thumbs {
    float:left;
    height:200px;
    width:auto;
    padding-right:10px;
    padding-bottom:20px;
    }



    #workdescription {
    background: white;
    padding-top: 10px;
    float: left;
    position: absolute;
    left: 350px;
    top: 0px;
    width: 650px;
    height: 200px;
    vertical-align:top;
    z-index: +1
    }


    #workdescriptionindex {
    padding-top: 10px;
    float: left;
    position: absolute;
    left: 350px;
    top: 0px;
    width: 650px;
    height: 20px;
    vertical-align:top;
    z-index: +1
    }

    #workimages {
    padding-top: 210px;
    position: absolute;
    float: left;
    left: 350px;
    top: 0px;
    bottom: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    border-color:#000;
    border-width:2px;
    }

    #workmenu {
    position: absolute;
    bottom: -4px;
    left: 10px;
    width: 250px;
    height: 500px;
    vertical-align:bottom;
    z-index:+10;
    }

    #imagecontainer {
    float: left;
    background: transparent;
    width: 650px;
    overflow: hidden;
    padding-bottom: 15px;
    }

    #fullwidthimagecontainer {
    floatpadding-bottom:10px;
    width:100%;
    ;
    }

    #twoimagecontainerleft {
    width: 320px;
    height: 452px;
    padding-right:10px;
    float:left;
    }

    #twoimagecontainerright {
    width: 320px;
    float:right;
    }

    #workmenucontent {
    position: absolute;
    bottom: 0;
    }

    BODY, TD {
    font-family:"Helvetica","Arial","Monaco", "sans serif";
    font-size: 12px;
    letter-spacing:1px;
    line-height: 16px;
    margin:0px;
    padding:0px;
    overflow:hidden;
    color:black;
    }

    A {
    padding-bottom:0px;
    border-bottom-width:1px;
    border-bottom-style:transparent;
    text-decoration:none;
    color:black;
    padding-bottom:1px;
    margin-bottom:1px;
    line-height: 18px;

    }

    A:hover {
    color:black;
    padding-bottom:0px;
    border-bottom-color:red;
    border-bottom-width:1px;
    border-bottom-style:solid;
    text-decoration:none;
    margin-bottom:1px;
    padding-bottom:1px;
    }

    .indentedtitle {
    text-indent: 10px;
    }

    .category {
    text-indent: 10px;
    padding-bottom:0px;
    border-bottom-width:1px;
    border-bottom-style:solid;
    text-decoration:none;
    color:black;
    padding-bottom:1px;
    margin-bottom:1px;
    line-height: 18px; }
    Last edited by valentine; 08-19-2010 at 01:16 AM.

  • #2
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    Hi and welcome to the forums.

    you could try putting a
    Code:
    <br style="clear:both">
    after the last image as a quick fix.

    So you would put it here.

    Code:
    <div id="workimages">
    <div id="imagecontainer"> <img src="http://www.owdna.org/graphics/history/brookshicks/d040.jpg" width=650 px/></div>
    <div id="imagecontainer"> <img src="http://englishrussia.com/images/moscow_old_2/16.jpg" width=650 px/></div>
    <br style="clear:both;">
    </div>
    Andy

  • #3
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    Or you could change

    Code:
    #workimages {
    padding-top: 210px;
    position: absolute;
    float: left;
    left: 350px;
    top: 0px;
    bottom: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    border-color:#000;
    border-width:2px;
    }
    to

    Code:
    #workimages {
    margin-top: 210px;
    position: absolute;
    float: left;
    left: 350px;
    top: 0px;
    bottom: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    border-color:#000;
    border-width:2px;
    }

  • #4
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    hi, thanks for your answers. i've tried both things but neither of them seem to do the trick. changing padding to margin makes the scrollbar start where the images start, but i actually want it to cover the whole height of the page.

    as for clear:both it doesnt seem to do anything?

    any other ideas? maybe i could rebuild the whole thing if this structure doesnt make sense? i've never built a website before so i have no idea what i could be doing wrong.

  • #5
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am in a similar place... and would also like to here additional ideas! Anyone?

  • #6
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    Add right:0px; to the #workimages

    so this

    Code:
    #workimages {
    padding-top: 210px;
    position: absolute;
    float: left;
    left: 350px;
    top: 0px;
    bottom: 0px;
    overflow-x: hidden;
    overflow-y: auto;
    border-color:#000;
    border-width:2px;
    }
    becomes this

    Code:
    #workimages {
    padding-top: 210px;
    position: absolute;
    float: left;
    left: 350px;
    top: 0px;
    bottom: 0px;
    right:0px;
    overflow-x: hidden;
    overflow-y: auto;
    border-color:#000;
    border-width:2px;
    }
    Andy

  • Users who have thanked ahayzen for this post:

    valentine (08-19-2010)

  • #7
    New Coder
    Join Date
    Aug 2010
    Posts
    17
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I think this is a case of taking a broken toy back to the shop only to find it actually worked: I did try right:0 but i seem to remember that causing another problem. But in this instance it seems to have fixed it, I must have changed something else along the way that made it work in combination with this.

    Thank you very much for your help!!


  •  

    Posting Permissions

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