Slightly complicated, transparent header, if this is at all possible?

[blindcat]

Hi everyone,

I've jumped in the deep end a bit because I haven't got a great deal of knowledge on css but I would really like to give this a try.

Basically I would like a transparent header and footer so my patterned background can show through. I will also need to add layers on top that don't inherit the opacity from it's ancestor (like a flash logo, menu text and a content box sandwiched inbetween the header and footer).

If all this isn't too much already, I also wouldn't mind a slight liquid layout using the mix/max property and maybe a drop shadow.

Can anybody drop me a hint of where to start? Maybe suggest some quick code or point me in the right direction? I've been trying to work this out for ages now!

I'm sure some of you would like to look at some code, but because my attempts so far have been rather useless, I included a picture instead.

<snip>

Any help and feedback is much appriciated, even to tell me i'm asking a bit too much, it's all good!

Thanks for your help.

[edited by: swa66 at 9:44 am (utc) on Mar. 27, 2009]
[edit reason] No personal URLs please see ToS [/edit]

[swa66]

Welcome to WebmasterWorld! [webmasterworld.com]

Rounded corners: This is for the future CSS3, but it's already usable today in FF, safari and chrome (no IE, not even the freshly made IE8):

.widget {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px; /* CSS3 */
}

Note that validators might bark about the use of CSS3 and vendor specific stuff.

A transparent background is what you seem to be after.

Either: use a png to achieve that. Again legacy IE versions will give you headaches, there are a number of fixes out there but I don;t remember any of them to be able to deal with a tiled background image.

Either: fake it: make a non-translucent background in you graphic editing software and use that. (might be the easiest solution for legacy IE versions)

opacity is a CSS2 property but it'll affect all children of the element it is applied to. And to top it off, Legacy IE versions do not support it.

Drop shadows are something for CSS3 as well: e.g. [w3.org...] but this is way too soon.

Over a busy background with a fluid design there isn't an easy way to fake this (overa white one it would), so I think you best bet at getting some depth in it is to use differently colored borders like:

 border-bottom: 1px solid #555;
 border-right: 1px solid #555;
 border-left: 1px solid #ccc;
 border-top: 1px solid #ccc;

(this works together with those that already support rounded corners.

[blindcat]

Hi, thanks for the informative reply.
So is there a way to possibly keep the background synced to the header (becuase it obviously retracts depending on the browser size and ends up mismatched.) If so I would cheat for now until the time is right.

I did manage to make a text box transparent in IE with grey borders, using the alpha property. Is there an easy way to lay a div over the top and cancel the inheritance?

Thanks,

[edited by: eelixduppy at 3:52 pm (utc) on Mar. 27, 2009]
[edit reason] snipped link [/edit]