...

View Full Version : Background size



Pirate Mike
11-11-2008, 06:50 PM
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 (http://www.phoenixarcheresu.co.uk/pa_new/index.asp)

The CSS is:
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:
<!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

itsallkizza
11-11-2008, 07:29 PM
(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;.

Pirate Mike
11-11-2008, 07:55 PM
it didnt fix it, it just moved it down to the bottom of the purple...

thanks anyway...

itsallkizza
11-11-2008, 10:25 PM
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.

Pirate Mike
11-11-2008, 11:39 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum