• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 172
  • Last Modified:

How can I change the background color of this part of my page?

screen shot of my flanking white space dilemmaLook at the attached graphic and you'll see my dilemma. I want to eliminate the white space that you see on either side of my center section. I've played with some different things, but keep coming up short. How do I get rid of the white space and fill it with the bgcolor: 52d9c

Here's my stylesheet and if you want to see the whole code for the page, head out to http://www.barefoot-bay.com

Thanks!


#wrapper{margin:0;padding:0;min-height:100%;}
html, body{height:100%;margin:0;}

#header{width:1052px;margin:0 auto;height:252px;position:relative;}
/*this is your header graphic */

#logo{width:1052px;height:252px;}

#page{width:1052px;margin:0 auto;border-top:none;padding-bottom:0px;}
/*this is not necessary. This is the gradient that starts just below the menu in your example. However, the content id that you see below gives you your "tray" */

#content{float:left;width:1052px; padding-top:0px;padding-bottom:0px;min-height:450px; background-color:#ffffff;}

#footer{padding-top:735px; background:#264d9c}
#footer p{text-align:center;font-size:9px;color:#FFF;margin:0;padding:0;background-color:transparent; font-family: Myriad Pro, Microsoft Sans Serif;}
#footer a{font-family: Myriad Pro, Microsoft Sans Serif; font-size: 9px; color: #ffffff;}

#bglayout{height:50%;width:100%;position:absolute;left:0px;top:0px;z-index:-1;}
/*this is your background gradient, starts at the top and goes all the way down*/

#bgtop{margin:0;min-height:1000px;height:100%;background:#252d9c url(images/background_sliver.jpg) repeat-x top;}
/*these are your clouds */
.left{position:relative;width:100%; background-color:252d9c; background:url(images/left_graphic.jpg) no-repeat left top;height:100%;float:left;}
.right{position:relative;width:100%;background:url(images/right_graphic.jpg) no-repeat right top;height:1000px;}
0
brucegust
Asked:
brucegust
2 Solutions
 
LZ1Commented:
I'm not sure which part your talking about exactly.  But I think it's the #content div which is line 13 on your stylesheet.css.  

Try giving it the background you need. The color you give is 1 character short.  A hex value is 6 characters long.
0
 
brucegustPHP DeveloperAuthor Commented:
No, that's the center section and you're right about the hex value. I didn't copy and paste all the characters.

The section of the stylesheet that needs to be altered is going to be line 22-25, I just don't know how. These are the flanking elements of my page, but I can't get them to extend all the way to the bottom of the page.

Thoughts?
0
 
LZ1Commented:
So the thin white border around the center section?

The main problem is that you have nested tables galore.  You should be using divs and semantic HTML and you wouldn't have the white space.  

What are the chances of you being able to change the code?
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
joshfraserCommented:
LZ1, I believe he means the footer section as shown in the screen shot. Unfortunately this footer section displays absolutely fine in the browsers on my PC (IE9 and Chrome), guessing it's an IE8/Mac issue or an IE8 in general issue.

Bruce, have you tried turning compatibility view on your browser?
0
 
LZ1Commented:
If it is the bottom/footer section, I too can confirm it looks fine cross-browser for me as well.
0
 
Anuradha GoliSystems Development / Support SpecialistCommented:
Is this the one you wanted to change
screenshot
If this is the change you required , i just used some sample color for test

Just replace

<ul id="portfolio" class="innerfade" style="position: relative; height: 401px;">

with

 <ul id="portfolio" class="innerfade" style="position: relative; height: 401px;background-color:#5fe34f">

Don't forget to use 6 digit hexadecimal color code.
0
 
brucegustPHP DeveloperAuthor Commented:
Hey, folks!

Figured it out. Rather than trying to change any of the footer settings or the settings that applied to the graphics on the left or right, I just added a background-color to the body tag and BOOM! Problem solved!

Thanks for weighing in!
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now