The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


Results 1 to 8 of 8

Thread: CSS/Div ID Question

  1. #1

    CSS/Div ID Question

    I was hoping someone could point me in the right direction with my problem.

    I currently have a div (container) that has a repeating background and in that div I have another div (nav) that has a background that I want to stay anchored at the bottom.

    How can I make a background stay at a fixed bottom position in the div nav?

  2. #2
    Something like this?
    CSS
    Code:
    #container {
     position: absolute;
     background: url(bg1.gif) repeat;
    }
    #content {
     position: relative;
     background: url(bg2.gif) no-repeat center bottom;
    }
    Html:
    PHP Code:
    <div id="container">
      <
    div id="content">
        <
    p>some text  </p>
      </
    div>
     </
    div

  3. #3
    ditto, thanks for the reply but that just sent my bg image in my content area to the very top.
    Here is my CSS/HTML
    CSS
    Code:
    div#lcontainer{
        background-image: url(images/leftNavbg.jpg);
        margin: 0 0 0 0;
        width: 151px;
        height: 100%;
        
    }
    
    div#lnav{
        position: relative;    
        background-image: url(images/left_tableEnd.jpg);
        background-position: center bottom;
        width: 151px;
        height: 122px;    
        background-repeat: no-repeat;    
    }
    HTML
    HTML Code:
    <div id="lcontainer"> main container
        <div id="lnav"> lnav or this is the left Content</div>
       </div>
    I cant seem to get the #lnav bg image to stay fixed at the bottom.

  4. #4
    In what browser? It's working fine here. Can you post the rest of the code and css in the page?

  5. #5
    Quote Originally Posted by ditt0
    In what browser? It's working fine here. Can you post the rest of the code and css in the page?
    Hmm..really? I am trying IE 6 and FF 1.5

    Here is the code

    HTML 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=iso-8859-1" />
    <title>Test</title>
    <style type="text/css">
    <!--
    body {
         margin:4px auto 0px;
         background-color: #504945;
         padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
         text-align:center; /* Hack for IE5/Win */
    }
    
    a:link {color: #FF0000}
    a:visited {color: #00FF00}
    a:hover {color: #FF00FF}
    a:active {color: #0000FF}
    
    div#container{
        background-image: url(images/header.jpg);
        margin:0px auto;
        width: 895px;
        background-repeat: no-repeat;
        background-position: top;
    }
    div#lcontainer{
        background-image: url(images/leftNavbg.jpg);
        margin: 0;
        width: 151px;
        height: 400px;
        
    }
    
    
    div#content{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #504945;
        background-color: #FFFFFF;    
        width: 593px;
    }
    
    div#lnav{
        position: relative;    
        background-image: url(images/left_tableEnd.jpg);
        background-position: center bottom;
        background-repeat: no-repeat;    
        width: 151px;
        height: 122px;
        top:auto ;        
    }
    div#rnav{    
        background-image: url(images/right_table.jpg); 
        width: 151px;
        top: 161px;
    }
    
    div#footer{    
        font-family: Arial, Helvetica, sans-serif;
        font-size: 10px;
        color: #ffffff;    
        width: 151px;
    }
    .footer {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 9px;
        color: #888787;
        background-image: url(images/camo_bottom.jpg) ;
        background-repeat: no-repeat;
        }
    
    </style>
    </head>
    
    <body>
    <div id="lcontainer"> 
      <p>main con  </p>
       <div id="lnav"> lnav or this is the left Content</div>
    </div>
    </body>
    </html>

  6. #6
    You're right , it wasn't ok with more content added.
    Here's how the two items in the css should be:
    Code:
     
    div#lcontainer{
        position:relative;
        background-image: url(images/leftNavbg.jpg);
        margin: 0;
        width: 151px;
        height: 400px;
        
    }
    
    
    div#lnav{
        position: absolute;   
        background-image: url(images/left_tableEnd.jpg);
        background-position: center bottom;
        background-repeat: no-repeat;    
        width: 151px;
        height: 122px;
        bottom:0;
         left:0; 
    }

  7. #7
    Thanks for the help ditto!

  8. #8
    Hmm, just came across another problem wondering if anyone has a solution.

    I added 100% to the div#lcontainer and it screwed everything up. Now nothing repeats or stays fixed.

    Here is my css

    Code:
    div#lcontainer{
        position:relative;
        background-image: url(images/leftNavbg.jpg);
        margin: 0;
        width: 151px;
        height: 100%;
        
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012