[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

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

Posted on 2012-04-04
7
Medium Priority
?
169 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 1000 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
Technology Partners: 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 1000 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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 …
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 tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

649 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