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 5 of 5

Thread: Background size

  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Background size

    Hi all,
    I have a problem with the purple on the background of my page. It continues down below the footer and nothing i do changes it. I want it to end at the same time as the footer...

    Here is a link to the test site: test site

    The CSS is:
    Code:
    html {height:100%;}
    #background {
    background:url(background.png);
    background-repeat:repeat-x;
    background-repeat:repeat-y;
    height: 100%;
    }
    
    body {
    margin:0;
    padding:;
    height:100%;
    background-color:#ffffff;
    font-family:arial, serif;
    }
    #header {
    background: url(banner.png);
    border-color: #000000;
    border-width: thin;
    border-style: solid;
    height:150px;
    margin-top: 0px;
    margin-bottom: 3px;
    margin-right: 3px;
    margin-left:3px;
    }
    #wrap {
    background: #990066;
    min-height:100%;
    width:956px;
    margin:auto;
    padding-top: 3px;
    position:relative;
    }
    * html #wrap {height:100%} 
    #inner-wrap {
    padding-bottom:80px;
    }
    #inner-wrap:after {
    content:" ";
    display:block;
    clear:both;
    }
    #footer {
    position:absolute;
    bottom:12px;
    height:30px;
    background-color: #333333;
    width:100%;
    color:#FF00FF;
    text-align:center;
    margin:0;
    padding:0;
    
    } 
    #left {
    float:left;
    width:200px;
    text-align:center;
    border-color: #000000;
    border-style:solid;
    border-width: thin;
    margin: 3px;
    height: 100%;
    }
    #main {
    position:relative;
    margin-left:150px;
    } 
    
    #right {
    float:right;
    width:200px;
    border-color:#000000;
    border-width:thin;
    border-style:solid;
    margin: 3px;
    background: #A4A4A4;
    text-align:left;
    }
    #content {
    padding:5px;
    text-align:left;
    background: #a4a4a4;
    border-color: #000000;
    border-width: thin;
    border-style: solid;
    margin: 3px;
    width: 520px;
    float: right;
    }
    ul.none {
    list-style-type:none;
    margin:0;
    padding: 3px;
    
    }
    li.indent{
    text-indent: 10px;
    }
    li.head{
    font-size:18px;
    }
    h1.right {
    font-size:31px;
    }
    The html is:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
    <link href="content.css" rel="stylesheet" type="text/css" />
    <link href="menu.css" rel="stylesheet" type="text/css" />
    
    </head>
    <div id="background">
    <div id="wrap">
      <div id="header">Header</div>
      <div id="inner-wrap">
        <div id="left">
    	<ul class="menu">
      	<li><a href="index.asp" class="active"><span>Home</span></a></li>
      	<li><a href="#"><span>About Us</span></a></li>
        <li><a href="#"><span>Who's Who</span></a></li>
      	<li><a href="#"><span>News</span></a></li>
      	<li><a href="#"><span>Program</span></a></li>
      	<li><a href="#"><span>Information</span></a></li>  
      	<li><a href="#"><span>Parents</span></a></li>
      	<li><a href="#"><span>Gallery</span></a></li>
        <li><a href="#"><span>Forum</span></a></li>
        <li><a href="#"><span>Links</span></a></li>
        <li><a href="#"><span>Contact Us</span></a></li>
    	</ul>
        
        </div>
    
            <div id="main">
          <div id="right">
          <ul class="none">
    		<h1 class="right"><b> Coming Up</b></h1>
    		<li class="head"><b>Normal Meeting</b></li>
            <li class="indent"><b>When</b> Tuesday 11th November</li>
    		<li class="indent"><b>Where</b> Highworth Scout Hut</li>
            <br />
    		<li class="head"><b>Normal Meeting</b></li>
            <li class="indent"><b>When</b> Tuesday 11th November</li>
    		<li class="indent"><b>Where</b> Highworth Scout Hut</li>
                    <br />
    		<li class="head"><b>Normal Meeting</b></li>
            <li class="indent"><b>When</b> Tuesday 11th November</li>
    		<li class="indent"><b>Where</b> Highworth Scout Hut</li>
                    <br />
    		<li class="head"><b>Normal Meeting</b></li>
            <li class="indent"><b>When</b> Tuesday 11th November</li>
    		<li class="indent"><b>Where</b> Highworth Scout Hut</li>
    	</ul>
          </div>
          <div id="content">Main Content</div>
        </div>
      </div>
      <div id="footer">Footer</div>
    </div> 
    </html>
    Any ideas??

    Thanks,
    Mike

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    (Skip to the red text if you just want the solution.)

    First a few comments:
    - You'll want to avoid using html and * selectors. It's bad form and never necessary (most of the time when you want to refer to html, body will do fine).
    - Your #background is really unnecessary, in fact it limits your background image from repeating all the way down the page. Add this to your body instead: background: #ffffff url(background.png);. It will repeat x and y by default.
    - Be aware that the content property and :after pseudo selector are not yet cross-browser. If what you want to add is purely graphical (like bullets, carots, spaces, etc) then go ahead and use Javascript to add that in, instead of CSS (google "getElementsByClassName" and "javascript element.innerHTML").

    To answer your footer question:
    - Get rid of your #footer's absolute positioning and add clear:both;.
    - Get rid of your #wrap's min-height:100%; and your #inner-wrap's height:100%;.

    That will make your container shrink to fit snugly below your footer.

    If you desperately want your footer to always be located at the bottom of the screen then you can simply change your #footer's bottom:12px; to bottom:0px;.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • Users who have thanked itsallkizza for this post:

    Pirate Mike (11-11-2008)

  • #3
    New Coder
    Join Date
    Oct 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    it didnt fix it, it just moved it down to the bottom of the purple...

    thanks anyway...

  • #4
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    the purple on the background of my page. It continues down below the footer and nothing i do changes it. I want it to end at the same time as the footer...
    I thought that's what you wanted. Explain again.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #5
    New Coder
    Join Date
    Oct 2008
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yea it was, it just didn't work... I have fixed it now though, thanks for the help. I played around with some of the areas that you said to change and got it working.


  •  

    Posting Permissions

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