SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile Need help understanding the behavior of divs...

    Hi there...

    I am definitely thankful for those who contribute time in helping me... I have learned a lot from your fellow acts of kindness...

    Well I have a layout where I want the content div to scroll with elements of the page contained in that scrolling div. In the content div I wanted to have a back ground image that scrolled with the page rather than text scrolling over it. I figured that I would have to introduce another div called 'page' that I would then place the background image. On top of that back ground image I seek to place appropriate columns.

    My question is how do I get the entire background image to show with in the scrolling div even if the content doesn't stretch the whole length of the page div with the image. In other words I want the back ground image to show within the scrolling div regardless if there is text over it or not.

    link:
    http://www.blowupyourtv.com/powerbit/ampelos/index.htm

    css:
    HTML Code:
    html {
    height:100%; 
    max-height:100%;  
    background:#fff; 
    font-size:76%; 
    font-family:arial;
    /* hide overflow:hidden from IE5/Mac */ 
    /* \*/ 
    overflow: hidden; 
    /* */ 
    }
    
    body {height:100%; 
    max-height:100%; 
    overflow:hidden;}
    
    * { margin:0; padding:0;}
    
    /* Content Viewer */
    
    #content {background: #000; overflow:auto; 
    position:absolute; 
    z-index:3; 
    top:103px; 
    bottom:45px; 
    left:0; 
    right:0; }
    
    * html #content {top:0; 
    left:0; 
    right:0; 
    bottom:0; 
    height:100%; 
    max-height:100%; 
    width:100%; 
    overflow:auto; 
    position:absolute; 
    z-index:3; 
    border-top:103px solid #fff; 
    border-bottom:45px solid #fff; 
    border-left:0;}
    
    #page{background: #000 url(home_wall_paper.jpg) no-repeat; width:100%; max-height:100%;}
    
    #intro{position:relative; top:215px;left: 40px; width: 275px; height:500px; zborder:1px solid #fff}
    
    /* Header */
    
    #head {background: #000 url(navbar.jpg) repeat-x;
    position:absolute; 
    top:0; 
    left:0; 
    display:block; 
    width:100%; 
    height:103px; 
    background-position:0 0;  
    font-size:4em; 
    z-index:5; 
    overflow:hidden; 
    color:#fff;}
    
    h1 { font-size:50%; padding:0 0 0 0;}
    h1 a {text-decoration:none; cursor:pointer; color:#ccc;}
    h1 span {display:block;
     background:url(navbar.jpg) repeat-x;
     width:100%; height:67px; 
     position:absolute; top:0; left:0;}
    
    /* Channels Navigation */
    
    #channels {
    position:absolute; 
    top:0; 
    left:0; 
    float:left;
    width:100%;
    height:67px;
    font-size:100%;
    line-height:normal;}
    
    #channels ul {padding:0px 0px 0 75px;}
    #channels li {display:inline;}
    #channels a {
    float:left;
    padding:9px 0px 0 0px;
    text-decoration:none;}
    #channels a span {
    loat:left;
    display:block;
    width:114px;
    background:url("nav_mouse_over.gif") no-repeat right top;
    padding:22px 0px 19px 0px;
    text-align: center;
    font-size:28%;
    color:#FFF;}
    
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #channels a span {float:none;}
    /* End IE5-Mac hack */
    #channels a:hover span {color:#FFF;}
    #channels a:hover {background-position:0% -60px;}
    #channels a:hover span {background-position:100% -60px;}  
    #channels #current a span{background-position:0% -60px;}
    #channels #current a  {background-position:100% -60px;}
    
    /* 2ND Level Navigation */
    #nav2_home {background: #ff0000 url(nav2_home_bg.gif)repeat-x; width:100%; 
    height:35px; line-height:normal; position:absolute; top:66px; left:0; }
    
    #nav2_home ul {padding:0px 0px 0 0px; float:right;}
    #nav2_home li {display:inline;}
    #nav2_home a {
    float:left;
    padding:10px 25px 0 25px;
    text-decoration:none;}
    #nav2_home a span {
    float:left;
    display:block;
    heigth: 35px;
    padding:0px 0px 14px 0px;
    text-align: center;
    font-size:25%;
    color:#FFF;}
    
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #nav2_home a span {float:none;}
    /* End IE5-Mac hack */
    #nav2_home a:hover span {color:#FFF; font-weight: bold;}  
    #nav2_home#selected a span{color:#FFF; font-weight: bold;}
    
    /* Footer */
    
    #foot {background: #000 url(footer_tile.jpg) repeat-x; position:absolute; margin:0; bottom:0; left:0; display:block; width:100%; height:45px; z-index:5; overflow:hidden;}
    #copy {display:block;  float:left; position:absolute; top:20px; left:0; font-size:1em; color: #333;}
    #logo {background: #000 url(logo.jpg) no-repeat; width: 132px; height:45px; display:block; float:right;}
    
    
    /* Side Nav */
    
    #left {position:absolute; left:0; top:100px; bottom:50px; width:200px; background:url(chimney.jpg) rgb(76,76,76); font-size:1.2em; z-index:4; overflow:auto; background-repeat:no-repeat;}
    
    * html #left {height:100%; top:0; bottom:0; border-top:100px solid #fff; border-bottom:50px solid #fff; color:#fff;}
    
    #intro p { color: #fff; padding:10px;}
    .bold {font-size:1.2em; font-weight:bold;}
    
    dd {display:none;}
    a.nav, a.nav:visited {margin-left:50px; display:block; width:100px; height:25px; background:#aaa; color:#eee; border:1px solid #000; text-decoration:none; text-align:center; line-height:25px;}
    a.nav:hover {background:#000; color:#fff;}
    css:
    HTML Code:
    <!--- IE quirks mode --->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <?xml version="1.0" encoding="UTF-8"?>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>Ampelos - Stay connected!</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="title" content="">
    <meta name="robots" content="index, follow">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" type="text/css" href="includes/browser_controls.css">
    </head>
    
    <body id="home">
    <div id="head"> 
      <h1>Ampelos<span></span></h1>
      <div id="channels"> 
        <ul>
          <li id="current"><a href="Home.html"><span>Home</span></a></li>
          <li><a href="about.html"><span>About</span></a></li>
          <li><a href="activities.html"><span>Activities</span></a></li>
          <li><a href="contact.html"><span>Contact</span></a></li>
        </ul>
      </div>
      <div id="nav2_home"> 
        <ul>
          <li id="selected"><a href="Home.html"><span>Home</span></a></li>
          <li><a href="about.html"><span>About</span></a></li>
          <li><a href="activities.html"><span>Activities</span></a></li>
          <li><a href="contact.html"><span>Contact</span></a></li>
        </ul>
      </div>
    </div>
    <div id="foot"><span id="copy">&nbsp;&copy;2008 Ampelos</span>
      <div id="logo"></div>
    </div>
    
    <div id="content">
      <div id="page">
        <div id="intro"> 
          <p class="bold">This one works in IE5.01, IE5.5, IE6, Opera 7.23, Mozilla 
            and Firefox</p>
          <p>NN7 displays correctly but the absolutely positioned div in the content 
            area stays 'fixed' as the content scrolls.</p>
          <p>The menus on the left are produced using definition lists which are easier 
            to work with than unordered lists and have the additional benefit that 
            you can give a 'definition' of each link for text-only browsers.</p>
          <p>NN7 displays correctly but the absolutely positioned div in the content 
            area stays 'fixed' as the content scrolls.</p>
        </div>
      </div> 
    </div>
    </body>
    </html>
    
    Thanks for your time!!!

  2. #2
    Addicted to the Source of Life PowerBit's Avatar
    Join Date
    Feb 2004
    Location
    Loveland Co
    Posts
    548
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A little more explanation...

    How do I get the 'page' div back ground image to show in full?


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
  •