SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    site background overlapping Div wrapper.

    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:

    Code:
    #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. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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:

    Code:
    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. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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:

    Code:
    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).
    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?

    Code:
    </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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    No we don;t want server side code Just run your page and then grab the html from "View Source" in the browser.

  5. #5
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    No we don;t want server side code Just run your page and then grab the html from "View Source" in the browser.
    ok,

    Code:
    <?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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

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

    Code:
    body{background:red}
    #wrapper {
        margin:auto;
        width:960px;
        border: 3px solid #a30d0d;
        overflow:hidden ;
        background-color:#fff;
    }
    You missed the semi-colon after the overflow:hidden also.

    Or is there some other issue?

  7. #7
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

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

    Code:
    body{background:red}
    #wrapper {
        margin:auto;
        width:960px;
        border: 3px solid #a30d0d;
        overflow:hidden ;
        background-color:#fff;
    }
    You missed the semi-colon after the overflow:hidden also.

    Or is there some other issue?
    Thats it, its perfect now thanks a lot.

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


Bookmarks

Posting Permissions

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