Site background overlapping Div wrapper

HTML & CSS
1

Basically I want to change the background of the site to a different colour using the:

{body
background-color:
}

But when i do that the colour will be seen within the wrapper div content (the main body content).

so everything with in the wrapper div i want to be ‘on top’ of the background colour or background image.

here is the css for the site:

#wrapper {
margin:auto;
width:960px;
border: 3px solid #a30d0d;
overflow:hidden
background-color:#fffff
}
#header {
background-color:#a30d0d;
height:76px;
background-image:url(http://www.propertieschiangmai.com/i...bcolour2.png);
background-repeat:no-repeat;
}
#alpha-logo {
display:block;
height:76px;
text-indent:-9999px;
width:216px;
}
#topmenu {
height:20px;
background-color:#fffff;
}
#left {
text-align:right;
float:left;
width:145px;
background-color:#a30d0d;


}
#right {
float:right;
width:145px;
background-color:#a30d0d;
}
#mainbody {
margin-left:155px;
margin-right:155px;
background-color:#fffff;
}
#middle {
margin-left:155px;
margin-right:155px;
background-color:#fffff;
}
#footer {
background-color:#a30d0d;
height:50px;
clear:both;
}
body {
font-family:Calibri, Verdana, sans-serif;
margin: 0 auto;
padding: 0;
background-color:#fffff;


}
#clearer {
clear:both;
height:1px;
overflow:hidden;
margin-top:-1px;

I’m guessing when i set a background colour for the Wrapper div that everything within the wrapper should have that as its default background colour?

Also there is a white gap between the bottom of the right column and the footer of about 40px or so.

Thanks.

2

Hi,

If the issue is that the color in your wrapper isn’t showing then there are two things to look at.

The first is tyo use a valid color:


background-color:#fffff

You are missing an “f” as hex must have 6 characters (or three if they are pairs of the same character). Run your code through the validator and it will pick up these typos for you.

If the colour is still missing after that then it looks like you need to clear your floats but as you haven’t provided html I can’t test.

Try adding overflow:hidden to #wrapper which will force it to contain its child floats (assuming that you don’t require visible overflow).

3

Ah lol yeah the missing ‘f’ was the problem for the #mainbody ect.

now i still get some of the background colour within the wrapper around the #mainbody and #middle part.

what html do you want?

</head>
<body>
<div id="wrapper">
<div id="header"><a href="http://propertieschiangmai.com" title="properties search" id="alpha-logo">alpha properties</a>
</div>
<div id="topmenu">
<jdoc:include type="modules" name"topmenu" style""/>
</div> 
<div id="left">
<jdoc:include type="modules" name="left" style=""/>
</div>
<div id="right">right</div>
<div id="mainbody">
<jdoc:include type="component" />
</div>
<div id="middle">
<jdoc:include type="modules" name="middle" style=""/>
</div>
<div id="footer"></div> 
<div class="clearer"></div>

</div>
</div id="background"</div>
</body>
</html>

Will this be ok for test?

4

No we don;t want server side code :slight_smile: Just run your page and then grab the html from “View Source” in the browser.:slight_smile:

5

ok,

<?xml version="1.0" encoding="utf-8"?><!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" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="joomla, Joomla" />
  <meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>Property Search</title>
  <link rel="stylesheet" href="/media/com_jea/css/jea.css" type="text/css" />

  <script type="text/javascript" src="/includes/js/joomla.javascript.js"></script>
  <script type="text/javascript" src="/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/media/com_jea/js/search.js"></script>
  <script type="text/javascript">

		window.addEvent('domready', function() {
			refreshForm(); 
		});
  </script>

<link rel="stylesheet" href="/templates/_system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/test-template/css/template.css" type="text/css" />
<link rel="stylesheet" href="/templates/test-template/css/joomla.css" type="text/css" />

</head>
<body>
<div id="wrapper">
<div id="header"><a href="http://propertieschiangmai.com" title="properties search" id="alpha-logo">alpha properties</a>
</div>
<div id="topmenu">

</div> 
<div id="left">

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr ><td><a href="/www.propertieschiangmai.com" class="mainlevel" >home</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=21&amp;Itemid=58" class="mainlevel" >Joomla</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=46&amp;Itemid=61" class="mainlevel" >Article</a></td></tr>

</table>
</div>
<div id="right">right</div>
<div id="mainbody">

<form action="/index.php?task=search&amp;layout=default" method="post" id="jea_search_form" enctype="application/x-www-form-urlencoded" >

	<fieldset><legend>Quick search</legend>

    	<p>
    <input type="radio" name="cat" id="renting" value="renting" checked="checked" onclick="refreshForm()" >
    <label for="renting">Renting</label>

    <input type="radio" name="cat" id="selling" value="selling" onclick="refreshForm()" >
    <label for="selling">Selling</label>
    </p>
        
    <p>
        <select id="type_id" name="type_id" onchange="updateList(this)" class="inputbox"><option value="0"> </option></select>
                </p>
  	
  	</fieldset>
  	<p><input type="submit" class="button" value="Search" /></p>

  	
	  	
  	<fieldset><legend>Advanced search</legend>
  	
  	<table>
  		<tr>
  			<td class="jea_label"><label for="budget_min">Minimum budget : </label></td>
  			<td><input id="budget_min" type="text" name="budget_min" size="5" /> THB/Month</td>
  			<td class="jea_label"><label for="budget_max">Maximum budget : </label></td>

  			<td><input id="budget_max" type="text" name="budget_max" size="5" /> THB/Month</td>
  		</tr>
  		<tr>
  			<td class="jea_label"><label for="living_space_min">Living space min : </label></td>
  			<td><input id="living_space_min" type="text" name="living_space_min" size="5" /> m²</td>
  			<td class="jea_label"><label for="living_space_max">Living space max : </label></td>

  			<td><input id="living_space_max" type="text" name="living_space_max" size="5" /> m²</td>
  		</tr>
  	</table>
  	<p>Minimum number of rooms  : <input type="text" name="rooms_min" size="1" /></p>
  	
  	<h2>Advantages : </h2>
  	<div id="advantages_list">
      	<div class="clr" ></div>

      	<label class="advantage"><input type="checkbox" name="advantages[0]" value="1" />Air Conditioning</label>
<label class="advantage"><input type="checkbox" name="advantages[1]" value="2" />Swimming Pool</label>
<label class="advantage"><input type="checkbox" name="advantages[2]" value="3" />Car Parking</label>
      	<div class="clr" ></div>
  	</div>	
  	</fieldset>
  	
  	<p><input type="submit" class="button" value="Search" /></p>
  	
    
    <div>
    <input type="hidden" name="Itemid" value="53" />

    <input type="hidden" name="f5a7eb7ee819f58b233ea80ffbb6067c" value="1" />    </div>
  
</form>

</div>
<div id="middle">
<p> </p>
<p><strong>New property!</strong></p>
<p><strong><a href="/undefined/"><img src="/images/com_jea/images/3/main.jpg" border="0" width="274" height="205.5" /></a></strong></p>
<p><strong><br /></strong></p>
</div>
<div id="footer"></div> 
<div class="clearer"></div>

</div>
</div id="background"</div>
</body>
</html>
6

Hi,

If we fix the typos in #wrapper it seems to be working for me.


body{background:red}
#wrapper {
    margin:auto;
    width:960px;
    border: 3px solid #a30d0d;
[B]    overflow:hidden ;
    background-color:#fff;[/B]
}

You missed the semi-colon after the overflow:hidden also.

Or is there some other issue?

7

Thats it, its perfect now :slight_smile: thanks a lot.

I’m going to start using that tool you linked me to.