PDA

View Full Version : CSS Opacity Woes


Blue_Vision
04-02-2009, 02:16 AM
Ok, so... I'm just learning css and rebuilding my quickly thrown together and slow loading apple iweb site into a proper dreamweaver site. However, in iWeb... apple seems to have found a way that I can have opacity set to say 70 in the css (I add a filter to for IE) and it only affect the one element I'm working with. IOW... I have a tiled background with a solid colored square semi-transparent where I can put the text etc and the tiled background can still be seen slightly underneath. But I don't want the text or anything else effected.

When I do this in dreamweaver using almost the same css and html for that particular thing it makes it so everything else that I'm adding to the page is also semi-transparent. I've read this is a normal behavior and that there are little work arounds but all of them seem to have problems with different browsers from what I hear (clear text etc). So... any ideas on how apple is accomplishing this with its iweb sites or any ideas on how I should do it? I keep searching through apples code but I see nothing different that stands out other then the fact that they reference a GIANT .js at the top of the page and maybe that controls things somehow?

I can't post the site here because its a commercial site and I don't have permission to do that but if you would like to see the current iweb source code or what I'm trying to accomplish then you can PM me or email me at blue_vision@mac.com and I'll give you a link to the site.

Otherwise... any tips on how to best solve my problem so I can continue re-writting this in dreamweaver would be appreciated :)

edbr
04-02-2009, 02:59 AM
its does sound like the javascript is doing it. whether apple ,DW or notepad its all just a question of code.
i would rather make the image transparent in a photo editor and then use it as background

Blue_Vision
04-02-2009, 03:22 AM
Problem with that is I'd have to make a bunch of them separate sizes due to the amount on the different webpages instead of just typing in a quick size in the html. Plus it would need to be a pretty large .png (700px by around 800px) and I'm afraid of that file size slowing things down alot more then a simple code would.

IE 6 hates png's also which I suppose I could change with some code at the top of the page I think but still... seems alot better if I can do it without it having to take the time to access and image and post it up with the file size.

This is a photography website so it has pretty large gallery images already loading with blank .pngs over them protecting the images to some degree. I'm already kinda loaded with file sizes...

any input on that?

Is there some type of javascript that people sell online for cheap that I can drop in a folder and reference or something to fix this prob? Or here is apples javascript, should I be hunting in there for a solution?

http://www.me.com/st/1/sharedassets/2.0.4/Common/Scripts/Site/iWebSite.js

(looks kinda crazy...LOL)

Thanks!

edbr
04-02-2009, 03:29 AM
Im sure there is , yahoogle there is probably a free javascript or jsquery solution.
i am not familiar with apple but can you not use there framework still?

Blue_Vision
04-02-2009, 03:34 AM
even the word "framework" is throwing me for a loop...LOL.

Only reason I wasn't attempting to use that entire sheet in the site is because its sooooooo large that I'm thinking it might majorly slow my site down plus it might screw with other things.

I don't know ANYTHING about js files but I'm thinking maybe there is one thats ONLY relating to this one thing I need done and is a paragraph long or so?

I'll google around but if you guys got any other ideas then please advise...

Blue_Vision
04-02-2009, 07:34 AM
well, I think I found a solution with the .png's that I didn't realize or think about.

Here is a link to some type of CSS fix I think and the .png idea:

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

He also has another story on that site about opacity and all this.

Anyways, since its a solid color... I can make a tiny opaque .png image and use it as the background image. Since its a solid color etc it doesn't appear to effect its quality and I can make the image so small that it should be a quick load from what I gather.

Correct?

edbr
04-02-2009, 07:54 AM
sounds good to me. actually if i've done this in the past i used a jpeg

Blue_Vision
04-02-2009, 09:01 AM
how could you pull off transparency with a jpeg?

edbr
04-02-2009, 09:38 AM
sorry i was wandering not transparancy. i meant that the opacity. creating a layer reducing the opacity the using that