SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page does not scroll

    I have two divs stretching beyond the bottom of my visible screen but the scroll bar won't appear and I tried playing around with various "overflow" possibilities but couldn't figure it out.

    Source Code (simplified a smidgen for ease of reading purposes):

    Code:
    body,td,th {
    	font-family: Verdana, Geneva, sans-serif;
    	color: #000;
    	font-size: 12px;
    }
    body {
    	background-color: #FFF;
    	height: 100px;
    	width: 100%;
    }
    </style>
    <link href="css/layout2.css" rel="stylesheet" type="text/css" />
    </head>
     
    <body>
    <div id="page">
     
      <div id="masthead" onclick="location.href='index2.html';" style="cursor:pointer;"></div>
     
      <div id="navspace">
         <div id="topnav">HOME | CLUB | TEAM | CALENDAR | CONTACT</div>
      </div>
     
      <div id="main">
         <div id="mainright">SCROLL TEST</div>
         <div id="mainleft">SCROLL TEST</div>
      </div>
     
    </div>
     
    </body>
    </html>
    CSS:

    Code:
    * {
    	margin: 0px;
    	padding: 0px;
    }
    #masthead  {
    	height: 130px;
    	margin-right: auto;
    	margin-left: auto;
    	background-color: #CB6528;
    	margin-top: 0px;
    	background-image: url(../Images/Masthead_SuperDroughtOutline.png);
    	background-repeat: no-repeat;
    	background-position: top;
    	width: 1000px;
    }
    #page {
    	background-color: #CF0;
    	background-image: url(../Images/mhflank.jpg);
    	background-repeat: repeat-x;
    	height: 131px;
    	width: 100%;
    	margin-right: auto;
    	margin-left: auto;
    	position: fixed;
    	background-position: center;
    	visibility: visible;
    }
    #page #navspace {
    	height: 12px;
    	padding-top: 5px;
    	padding-bottom: 12px;
    	margin-right: auto;
    	margin-left: auto;
    	width: 1000px;
    }
    #page #topnav {
    	padding-top: 3px;
    	padding-bottom: 3px;
    }
    #main {
    	width: 1000px;
    	margin-right: auto;
    	margin-left: auto;
    }
    #main #mainright {
    	background-color: #E48631;
    	height: 700px;
    	width: 500px;
    	float: right;
    }
    #main #mainleft {
    	background-color: #EEE;
    	height: 700px;
    	width: 500px;
    	float: left;
    }
    Link to website: Home | Texas Rock Climbing

    How do I get the website to realize that the grey and orange divs are stretching beyond the limits of the visible area?

  2. #2
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SOLVED

    1) Gave container div (#main) a height

    2) had to clear the floats

    Code:
    <div id="main">
      <div id="mainright"></div>
      <div id="mainleft">SCROLL TEST</div>
      <div style="clear:both;"></div>
    </div>
    3) remove "fixed" position of #page

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

    You can't really give a height to those columns as that won't allow your content to grow. If you want equal columns then the easiest way is to use a background image with a faux column technique.

    Your page is lacking a little in semantics and there is no need for the javascript link on the banner as you can simply use an anchor.

    The nav should be a list and spaced with margins instead of non breaking spaces although I guess you may have been going to change that anyway.

    If you need the 100% height effect then it gets a little more complicated but it can be done. This is how I would go about it.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {/* for demo only - use a proper small reset sheet */
        margin: 0px;
        padding: 0px;
    }
    html, body {
        margin:0;
        padding:0;
        height:100%;
    }
    body {
        background:#fff url(http://test.texasrockclimbing.org/Images/mhflank.jpg) repeat-x 0 0;
        color:#000;
        font-family: Verdana, Geneva, sans-serif;
    }
    #outer {
        width:1000px;
        margin:-20px auto 0;
        min-height:100%;
        position:relative;
        z-index:1;
        border:2px solid #000;
        border-top:none;
        background:#eee url(http://www.pmob.co.uk/temp/images/bghatch3.png) repeat-y 500px 0;
        clear:both;
    }
    * html #outer {height:100%;}
    #outer:after {/*for ie8 100% high fix*/
        clear:both;
        display:block;
        height:1%;
        content:" ";
    }
    body:before {/*for opera 100% high fix*/
        content:"";
        height:100%;
        float:left;
        width:0;
        margin-top:-32767px;
    }
    
    .logo {
        padding:20px 2px 0;
        height: 131px;
        margin:0 -2px;
        background:url(http://test.texasrockclimbing.org/Images/mhflank.jpg) repeat-x 0 20px;
        position:relative;
    }
    .logo a, .logo span {
        display:block;
        height:131px;
        width:100%;
    }
    .logo span {
        position:absolute;
        left:0;
        top:0;
        background:url(http://test.texasrockclimbing.org/Images/Masthead_SuperDroughtOutline.png) no-repeat 50% 20px;
    }
    #topnav {
        margin:0 -2px;
        height:32px;
        padding:0;
        list-style:none;
        overflow:hidden;
        background:#fff;
        padding:0 5px;
        position:relative;
    }
    #topnav li {
        float:left;
        margin:0 50px 0 0;
        padding:5px 0 0;
        text-transform:uppercase;
    }
    #topnav li a, #topnav li a:visited {
        color:#000;
        text-decoration:none
    }
    #topnav a:hover {color:#c00;}
    #main {
        position:relative;
        overflow:hidden;
        border-top:1px solid #000;
        clear:both;
        width:100%;
        font-family: "Arial Black", Gadget, sans-serif;
    }
    #mainright,#mainleft {
        width: 500px;
        float: right;
        position:relative;
        z-index:2;
        font-size: 18px;
        font-weight: bold;
        color: #CE471E;
        text-align: center;
    }
    #mainleft {float:left;color:#CE471E}
    </style>
    </head>
    <body>
    <div id="outer">
        <h1 class="logo"><a href="#">Texas Rock Climbing<span></span></a></h1>
        <ul id="topnav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Club</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">Calendar</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div id="main">
                <div id="mainleft">
                    <h2>Heading</h2>
                </div>
                <div id="mainright">
                    <p>Some text</p>
                </div>
        </div>
    </div>
    </body>
    </html>
    If you run that while online you will see the effect as I have linked to an image of mine just to make the right equal column. Just make your own image of appropriate width and style (500px x 10px).

  4. #4
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    T.T You have no idea how thankful I am right now.
    "Lacking in semantics" - haha, that comment couldn't be more appropriate. What you saw was the product of 4 days of self-teaching CSS with random YouTube videos and a few websites (my html bg is also close to nil). Not too bad for a biology major, right? lol. I probably put everything together the hard (and inefficient) way. smh.

    Again, I really appreciate what you did for me. Learning as I go.

    Thank you so much,

    -Alek


Tags for this Thread

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
  •