Solved

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

Posted on 2012-04-04
7
165 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

729 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