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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Header and Footer Problems

    Hello everyone,

    I've been having problems with the CSS in my HTML page. First off, here's the code for the HTML (rather short without any content added):

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
          <title>Lizards 'R' Us Blog</title>
    <LINK REL=StyleSheet HREF="global.css" TYPE="text/css">
    </head>
    <body>
          <div id="top">
    	       <img src="images/header.png" alt="head">
          </div>
    <div id="body">
          <div id="sidebar">
    	       <img src="images/top_sidebar.png" alt="Top Sidebar">
    			<div id="repeated_sidebar">
                            Hello, my name is Carl and I am working on this blog.
    			</div>
    	       <img src="images/bottom_sidebar.png" alt="Bottom Sidebar">
          </div>
    </div>
          <div id="footer">
          </div>
    </body>
    </html>
    And the code for the CSS:

    Code:
    * {
    margin:0;
    padding:0
    }
    
    #top {
    width: 647px;
    height: 51px;
    position: absolute;
    z-index: 1;
    }
    
    body{
    margin-left: auto;
    margin-right: auto;
    width: 647px;
    background-color: #404040;
    }
    
    #body {
    margin-top: 51px;
    width: 647px;
    background: #404040 url('images/middle_repeated_part.png') repeat-y;
    height: 100%;
    position: absolute;
    z-index: -1;
    }
    
    #footer {
    width: 647px;
    height: 68px;
    position: fixed;
    bottom: 0px;
    z-index: -1;
    margin-top: 0px;
    background: #fff url('images/footer.png');
    }
    /* <-----Below = Sidebar-----> */
    
    #sidebar{
    margin-top: 165px;
    margin-left: 448px;
    width: 173px;
    position: absolute;
    }
    
    #repeated_sidebar{
    background: transparent url(images/middle_sidebar.png) repeat-y scroll 0 0;
    color: #FFFFFF;
    font-family: Eurostile, Eurostile Next, 'Square 721', Verdana;
    height: 60%;
    min-height: 50px;
    padding-left: 5%;
    padding-right: 8%;
    }
    You can see the results of this code here.

    As you can see there's an unwanted white space below the footer image. This space is not part of the footer. I have set a repeating background image along the y axis with a height of 100%, however it does not push the footer below it. I'm not sure if this is exactly what is causing the problem but I would like the footer to be pushed down due to the more content that is added. I would also like the white background image to repeat as far down the y axis that the content goes. Any ideas? If anything is unclear, feel free to ask me!

    Thanks,
    Carl

  • #2
    New Coder
    Join Date
    Jun 2009
    Posts
    35
    Thanks
    4
    Thanked 1 Time in 1 Post
    Try using this css:

    Code:
    #top {
    height:51px;
    width:647px;
    }
    body {
    background-color:#404040;
    margin-left:auto;
    margin-right:auto;
    width:647px;
    }
    #body {
    background:transparent url(images/middle_repeated_part.png) repeat-y scroll 0 0;
    height:335px;
    width:647px;
    }
    #footer {
    background:transparent url(images/footer.png) repeat scroll 0 0;
    bottom:0;
    height:68px;
    width:647px;
    }
    #sidebar {
    margin-left:448px;
    margin-top:165px;
    position:absolute;
    width:173px;
    }
    #repeated_sidebar {
    background:transparent url(images/middle_sidebar.png) repeat-y scroll 0 0;
    color:#FFFFFF;
    font-family:Eurostile,Eurostile Next,'Square 721',Verdana;
    height:60%;
    min-height:50px;
    padding-left:5%;
    padding-right:8%;
    }
    #top {
    height:51px;
    margin:0;
    padding:0;
    width:647px;
    }
    body {
    background-color:#404040;
    margin:0 auto;
    padding:0;
    width:647px;
    }
    #body {
    background:transparent url(images/middle_repeated_part.png) repeat-y scroll 0 0;
    height:335px;
    width:647px;
    }
    #footer {
    background:transparent url(images/footer.png) repeat scroll 0 0;
    bottom:0;
    height:68px;
    width:647px;
    }
    #sidebar {
    margin-left:448px;
    margin-top:165px;
    position:absolute;
    width:173px;
    }
    #repeated_sidebar {
    background:transparent url(images/middle_sidebar.png) repeat-y scroll 0 0;
    color:#FFFFFF;
    font-family:Eurostile,Eurostile Next,'Square 721',Verdana;
    height:60%;
    min-height:50px;
    padding-left:5%;
    padding-right:8%;
    }
    But this is just some quick fix, you should try learning more about css...


  •  

    Tags for this Thread

    Posting Permissions

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