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've included a picture instead.

 

 

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.

Yep, it's all possible! You may have some problems with transparency in old ie browsers, idk- thats from my experience. But everything else should be pretty simple.

 

Opacity for header - http://www.w3schools.com/Css/css_image_transparency.asp

 

For the header, I would suggest using three images- a left header (for the curve), a 1px width image that repeats across the width, and a right header(for curve). This way it can be liquid.

 

From there, images in the header won't adopt the transparency, i believe. So you should be good. If you want to add transparency, you can inherit it or just add it again.

 

Good luck!

Thanks for the quick reply!

 

Good point with the corners and the x axis tile for the liquid heading, i'll give that a go... Will I need to include any hacks to make the heading transparent in most browers?

 

I did try the alpha filter code (filter:alpha(opacity=) but I couldn't seem to stop the inheritance...

You best using a semi transparent png.

 

The inheritence is a big issue with css, and it's not worth the hassle, plus it's a css3 property, and not fully supported by chrome (and the other browser that runs off the same engine i assume?), as well as older browsers etc.

 

Using a png will work from ie6+ (with a little js hack).

Thanks Bocaj,

 

so png's allow transparencies, and are widley supported? Could you point me in the direction to this JS Hack?

I'm considering going back to the drawing board because I think i'm a bit out of my depth. I would pay for a professional's assistance, but I haven't got much in the way of funds at the moment.

Only me again, would something like this help?

 

http://allinthehead.com/retro/338/supersleight-jquery-plugin

 

Since your available for 'small' projects and always seem to answer my posts, I might consider giving you my jobseekers pay check this month in exchange for assistance hehe

 

Thanks again,

Nick

Yeah, if your already using the jquery library for other bits and bob's, otherwise calling the jquery library for a single script i tend to find slightly excessive.

 

You can use the google hosted jquery library though which is something i cannot recommend enough. As more people do this, users will only have to visit one website using google hosted code to have it cached, greatly reducing load times. Plus you save a nice little chunk on bandwidth which is never a bad thing

 

Here's something to look at, although this is probably very excessive, it has had my interest for a while, i've never used it, but think it's cool none the less. It's supposed to try and make IE6 act like IE7. http://dean.edwards.name/IE7/ Although it'd require js enabled and not something i'd recommend. Just thought you might like to take a snoop at it.

 

Remember that if your doing a specific fix like in this case, use conditional comments to target the appropriate versions of IE only.

 

If your using jquery then that looks like what you want, however if there's no other jquery present, and none planned for the foreseeable future, then i'd recommend a stand alone script.

Ah ok... I don't know anything about javascript, where could I get the single script?

I might need some js for a large custom navagation bar as well, would I just put it all in together in the head of my document?

Seriously dude, you have two options and like anything in life options are good.

 

Break your site into mini projects and achieve a solid consistent learning curve.

 

Set yourself up a few folders on your computer, and call the root folder "codeLibrary" or something similar. This is when you start your journey into web design / development.

 

This is one of your favourite folders on your computer. It is best buddies with "designLibrary" and "otherMaterial" lol name your folders appropriately thats all im saying okie. so....

 

Within your code library folder, you make a new folder and call it "front end" within there you have a folder called "html", a folder called "CSS" and a folder called "js"

 

This could go on all day but you get the idea.

 

Within your html folder, basically you keep default page markup, maybe a transitional doc type with a list of tags in the page like a form etc and similarly maybe a strict doc type marked up appropriately. (hope that makes sense, if not different doc types have different rules all based around html standards) transitional is where the front end coder is supporting older browsers and strict is the way forward. Think of it like your ps2 being backwards compatible with PS1 games.

 

So more things you could include in your html folder, could be a repeating header, the markup required to use a javascript transparency fix for ie6, maybe a link to the google jQuery library.

 

Anyway you get my point.

 

 

 

 

The second option is to, try and bite off just a little more you can chew and get very tired and frustrated. I was lucky - i just do things a small bit a time by nature. I used to spend days trying to master the most stupid of Photoshop effects.

 

Alright, good luck - this is a forum. We are here to help each other.