Everybody! This is important. In a few days, these forums will be moving over to using the totally sweet Discourse platform. To ensure this migration happens smoothly with no loss of content, these forums are currently in a read-only mode. I do apologize for the inconvenience.

There is never a good time to turn the forums off for an extended period of time, but I promise the new forums will be a billion times better. I'm pretty sure of it.

See you all on the other side in a few days, and if you have any (non-technical) questions, please e-mail me at kirupa@kirupa.com. For technical questions, try to find a tutorial that corresponds to what you are looking for and post in the comments section of that page.

Cheers,
Kirupa

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