PDA

View Full Version : Mystery outfield background colors


johnMoss
01-19-2011, 11:26 PM
Its almost embarrassing to ask this question, but for whatever reason I'm getting stumped trying to unify the background colors off this template. Everything is fine withing the containers, I'm referring to the 4 different background fields which exist outside the containers going left & right to fillScreen. I've only been able to modify one of the backgrounds and simply don't understand where the containers are getting their background color commands. It all looks rather obvious, yet changing the background color values has worked on only 1 of the divs. The rest appear to post as FFF but in fact are varying shades of gray.My mission is a unified color...
Anyone?
Thanx!

css below...

/* CSS Document */
body{padding:0px; margin:0px; background:#fff; color:#0066ff; font:12px/14px Arial, Helvetica, sans-serif;}
div, p, ul, h2, h3, h4, img{padding:0px; margin:0px;}
ul{list-style-type:none;}
.clear {clear: both; margin: 0px}
p a{font:11px/14px Tahoma, sans-serif; color:#bf2208; text-decoration:underline}
p a:hover{color:#ff6600;}
/* TOP */
#topContainer{background:#fff url(../images/b_top.gif) 0 0 repeat-x; height:345px;}
#header{background:#fff url(../images/bannerback.png) 0 0 no-repeat; height:344px; position:relative; margin:0 auto; width:773px}
#logo{position:absolute; top:103px; left:85px}
#header ul.menu{position:absolute; top:16px; left:280px; width:470px}
#header ul.menu li{float:left; margin-right:12px;}
#header ul.menu li a{height:36px; display:block; text-indent:-20000px; }
#header ul.menu li a:hover{height:36px;}
#header ul.menu li.home a{width:80px; background:url(../images/home.png) 0 0 no-repeat; }
#header ul.menu li.home a:hover{width:80px; background:url(../images/home_over.png) 0 0 no-repeat;}
#header ul.menu li.about a{width:80px; background:url(../images/about.png) 0 0 no-repeat; }
#header ul.menu li.about a:hover{width:80px; background:url(../images/about_over.png) 0 0 no-repeat;}
#header ul.menu li.faq a{width:80px; background:url(../images/faq.png) 0 0 no-repeat; }
#header ul.menu li.faq a:hover{width:80px; background:url(../images/faq_over.png) 0 0 no-repeat;}
#header ul.menu li.contact a{width:80px; background:url(../images/contact.png) 0 0 no-repeat; }
#header ul.menu li.contact a:hover{width:80px; background:url(../images/contact_over.png) 0 0 no-repeat;}
#header ul.menu li.privacy a{width:80px; background:url(../images/privacy.png) 0 0 no-repeat; }
#header ul.menu li.privacy a:hover{width:80px; background:url(../images/privacy_over.png) 0 0 no-repeat;}
/* MIDDLE */
#middleContainer{background:#FFF url(../images/b_middle.gif) 0 0 repeat-x; height:269px;}
#adsContainer{background:url(../images/b_ads.gif) 0 0 no-repeat; height:269px; position:relative; margin:0 auto; width:721px; padding:0 0 0 52px}
#adsContainer ul {margin: 0 0 0 22px}
#adsContainer ul li{font:11px/16px Tahoma, sans-serif; background:url(../images/arrow1.gif) 0 2px no-repeat; padding-left:21px; margin-bottom:6px}
#adsContainer ul li a{color:#81929b; text-decoration:none;}
#adsContainer ul li a:hover{color:#000}
#ad1{width:231px; height:260px; float:left; position:relative; background:url(../images/b_ad1.gif) 0 0 no-repeat; margin-top:9px}
#ad1 h2{ height:32px; background:url(../images/howItWorks_over1.gif) 0 0 no-repeat; margin: 25px 0 35px 24px; position:relative;}
#ad1 p{width: 175px; margin: 0 0 15px 19px}
#ad2{width:231px; height:260px; float:left; position:relative; background:url(../images/b_ad2.gif) 0 0 no-repeat; margin-top:9px}
#ad2 h2{ height:32px; background:url(../images/ourProducts_over1.gif) 0 0 no-repeat; margin: 25px 0 35px 24px; position:relative;}
#ad2 p{width: 175px; margin: 0 0 15px 19px}
#ad3{width:231px; height:260px; float:left; position:relative; background:url(../images/b_ad3.gif) 0 0 no-repeat; margin-top:9px}
#ad3 h2{ height:32px; background:url(../images/getAQuote_over1.gif) 0 0 no-repeat; margin: 25px 0 35px 24px; position:relative;}
#ad3 p{width: 175px; margin: 0 0 15px 19px}

/* CONTENT */
#content{width:773px; background:url(../images/b_content.gif) 0 0 repeat-y; margin:0 auto;}
#content ul li{font:11px/16px Tahoma, sans-serif; background:url(../images/arrow2.gif) 0 2px no-repeat; padding-left:24px; margin-bottom:6px}
#content ul li a{color:#81929b; text-decoration:none;}
#content ul li a:hover{color:#000}
#leftPan{width: 297px; padding:25px 49px 0 61px; float:left}
#rightPan{width: 327px; padding:25px 0 0 0; float:left}
#welcome h2{ height:31px; background:url(../images/h_welcome.gif) 0 0 no-repeat; position:relative;}
#welcome p.headline{display:block; width:287px; border-bottom:#c0c8cd 1px dotted; border-top:#c0c8cd 1px dotted; font:12px/12px Trebuchet MS, sans-serif; color:#dd137b; padding:5px 5px 5px 3px; text-transform:uppercase; margin-bottom:11px; float:none}
#welcome img{float:left; margin-right:10px}
#welcome p{width:180px; float:left}
#welcome ul{ margin-left: 12px;}

#why h2{ height:31px; background:url(../images/h_why.gif) 0 0 no-repeat; position:relative; margin-bottom:7px}
#why p{width:318px; margin-left:8px; margin-bottom:12px}
#why ul{ margin-left: 19px;; margin-bottom:15px}

/* BOTTOM */
#bottomContainer{background:#FFF url(../images/b_bottom.gif) 0 0 repeat-x; height:93px;}
#footer{background:url(../images/b_footer.png) 0 0 no-repeat; height:93px; position:relative; margin:0 auto; width:773px;}
#footer p{padding: 35px 0 0 0; font:11px/16px Trebuchet MS, sans-serif; font-weight:normal; text-align:center; color:#fff;}
#footer p a{font:11px/16px Trebuchet MS, sans-serif; font-weight:normal; color:#fff; text-decoration:none; padding: 0 5px }
#footer p a:hover{text-decoration:none; background:#fff; color:#000}
.sponsor {
margin: auto;
width: 728px;
padding-top: 10px;
padding-bottom: 15px;
text-align: center;
}
.sponsor img {
margin-top: 5px;
}

DWcourse
01-20-2011, 02:52 AM
Can you put the page online and post a link?

johnMoss
01-20-2011, 03:13 PM
I don't have a host for this one yet... anything else i can do so you can see it? I can't post a zip file here...

DWcourse
01-20-2011, 03:18 PM
Most people aren't going to open a zip file from someone they don't know. And it's a lot of trouble to go through someone else's code line by line or reconstructing things so you can look at it in a browser. Isn't it worth getting a web host for a few bucks so you can get free advice here?

gentleone
01-20-2011, 06:31 PM
I don't have a host for this one yet...
But you do have a host for another one if I read this right? Create a subdirectory and upload everything in there.

Corrosive
01-20-2011, 07:49 PM
Hi John. Please use code tags when posting code in the future. It makes it easier to distinguish and manage that way. Code tags are the # symbol when you make your posts. I have wrapped yours....for now ;)

johnMoss
01-21-2011, 01:34 PM
Gentlemen, thank you for your responses & apologies for my slow returns... I'm down in Vallarta, it's like freezing in the morning & between that & my daughter dragging me off to the beach I am flat out sick... The locals keep referring me to Dr. Pepper (Pimienta)... perhaps I shall break down and go see him today... link posted to
www.lacruzconcierge.com/dreamWeaverTestFile/index.html (http://www.lacruzconcierge.com/dreamWeaverTestFile/index.html)

interesting that the primary image .png file doesn't want to come up, but that notwithstanding, the original question is viewable. You can see the various backgrounds... the server reacts a little slow, may need to give it a sec for everything to come up...

Corrosive, thank you for counsel... It took me a couple minutes to figure out the box = wrapped; again sick & mildly delirious... protocol understood going forward...

domedia
01-21-2011, 01:53 PM
Is is the white background that's the issue?

Corrosive
01-21-2011, 02:16 PM
Corrosive, thank you for counsel... It took me a couple minutes to figure out the box = wrapped; again sick & mildly delirious... protocol understood going forward...

Good man. Hope you feel better soon :)

johnMoss
01-21-2011, 03:18 PM
Referring to the large area just below the gray background field up topside; no... That's the one I can manipulate. It's the others... you can see their background settings in each of the containers, but changing the values = no difference...

Corrosive
01-21-2011, 04:08 PM
The colours are coming from the background images such as b_top.gif and b_middle.gif. Remove those and see what you get. Take a backup first though ;)

johnMoss
01-23-2011, 08:41 PM
Indeed I did see a border in the artwork which matches those colors. I didn't catch it since they'd (authors) set the canvas size to 1 px over the usable section. Thanks...
This design is happily being abandoned for something better; I was working off a single 8 x 11 PSD I was given, just got more materials, so onward... thanx again...