Solved

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

Posted on 2012-04-04
7
163 Views
Last Modified: 2012-04-04
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
Comment
Question by:brucegust
7 Comments
 
LVL 30

Accepted Solution

by:
LZ1 earned 250 total points
ID: 37805695
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
 

Author Comment

by:brucegust
ID: 37805715
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
 
LVL 30

Expert Comment

by:LZ1
ID: 37806000
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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

 
LVL 2

Assisted Solution

by:joshfraser
joshfraser earned 250 total points
ID: 37806064
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
 
LVL 30

Expert Comment

by:LZ1
ID: 37806072
If it is the bottom/footer section, I too can confirm it looks fine cross-browser for me as well.
0
 
LVL 12

Expert Comment

by:Anuradha Goli
ID: 37806444
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
 

Author Comment

by:brucegust
ID: 37806663
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

Active Directory Webinar

We all know we need to protect and secure our privileges, but where to start? Join Experts Exchange and ManageEngine on Tuesday, April 11, 2017 10:00 AM PDT to learn how to track and secure privileged users in Active Directory.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question