Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Sidebars & Widgets (http://forum.bytesforall.com/forumdisplay.php?f=14)
-   -   Background CSS for overlaid new widget areas (http://forum.bytesforall.com/showthread.php?t=11866)

Wimbledon Dec 23, 2010 11:46 AM

Background CSS for overlaid new widget areas
 
Site created with Atahualpa 3.5.3 and Wordpress 3.0.1 here:

www.lotuseterneforum.com

I have created two widget areas:
  1. HeaderArea, which is split into two cells.
  2. HeaderBG, which is currently colored green and is one cell. HeaderBG is greater in height than HeaderArea.

If you look at the site, you will see the second "HeaderArea" cell at the top which holds a 468x60 ad. You will also see img.logo ("Lotus Enthusiast") on the left side.

I am trying to move the green-colored HeaderBG behind HeaderArea and img.logo, to create a background behind the two. HeaderBG needs to span the entire width of the layout, which is fixed at 1189px. When positioned lower, HeaderBG does already span the layout with its green color.

How do I force the color of HeaderBG to be "shown through" the empty spaces in HeaderArea and img.logo?

For maximum clarity, here is a rendering of what I am trying to accomplish:

http://i851.photobucket.com/albums/a...iew/Mockup.png

Here are the relevant CSS inserts I already have:

img.logo {
position: absolute;
top: 30px;
left:18px;
z-index: 59;
}

div#text-6.widget{
position: absolute;
top: 30px;
right: 18px;
z-index:60;
}

div#headerbg.bfa_widget_area{
background: #097054; [This is the green color]
height: 100px !important;
z-index:55;
position: absolute;
top: 25px;
}

Without success, I have tried to add the following to img.logo and div#text-6.widget:

background: transparent !important;

Can anyone figure out what I'm doing wrong? What else should I try?

I greatly appreciate any help!

lmilesw Dec 23, 2010 01:19 PM

As a start use a width in the following as shown. You will have to tweak the measurements. Also I would try to use relative positioning where possible. If you want the green to be slightly transparent you could add opacity: .8 (or .7 or .9 etc.) to the code
HTML Code:

div#headerbg.bfa_widget_area{
background: #097054;                [This is the green color]
height: 100px !important;
z-index:55;
position: absolute;
top: 25px;
width: 1189px;
}


Wimbledon Dec 23, 2010 01:29 PM

Perfect, what a simple fix!

I will definitely work on the relative positioning as well.

Thanks :)

Wimbledon Dec 24, 2010 10:17 PM

Quote:

Originally Posted by lmilesw (Post 52875)
I'd try to use relative positioning where possible.

I decided to work on the relative positioning, as I said I would.

For the logo, I am working with this CSS now:

img.logo {
position: absolute;
top: 40px;
left: 2%;
z-index: 59;
}

Yet when I changed the position to relative, I see this:

http://i851.photobucket.com/albums/a...vedDownHmm.jpg

Somehow, it appears the header images were also moved down unlike the absolute positioning scenario. To remedy this, I tried replacing top with:

top: -40px;
bottom: 40px;
bottom: -40px;

Nothing seems able to replicate the look accomplished by absolute positioning, as you can see on the live site now. I tried studying W3 Schools but cannot find my error. What else should I be doing to make the relative positioning work? I also tried different CSS IDs for the logo area, from Firebug.


All times are GMT -6. The time now is 07:57 PM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.