ParkerComics Website - Page 4

Fifthfiend · 01-26-2009, 06:46 PM

Quote:

Originally Posted by Nikose Tyris

Oh see I did this instead and it worked fine:

www.parkercomics.com

Code:

Style: opacity;0.7

Internet Explorer says your opacity can go get fucked.

Nikose Tyris · 01-26-2009, 06:48 PM

Yeah I just noticed that, I was about to verify Opera and Safari.

Well fuck me with a can. I'm going to take Blue's stuff instead cause I'm sure it will look nicer.

bluestarultor · 01-26-2009, 06:56 PM

Remember, the article said that all the major browsers need different opacity statements. You'll have to work those in.

Nikose Tyris · 01-26-2009, 07:14 PM

Hey you know what would be super awesome

like doing the code for me and then me being all "Wow look at the great job blues did" and me memorizing what you did.

because I'm feeling like a kid lost at the mall and I think my inner child is going to get molested.

h4x.m4g3 · 01-26-2009, 07:24 PM

I.E. hates opacity, I recommend taking a thin image slice (5 px high) and setting it to repeat-y for the background of those boxes. Also you might want to declare classes and put your styling into a .css file, it'll make it a lot easier to change later.

Some more css hints and tips

.class1 element{
all elements within a particular class i.e. .class1 a:link would be all anchor tags within an element with class1.

a.class1{
All anchor tags that are of class 1.

.class1 .class2{
all class 2 within a class 1

attribute: set !important;

!important basicly says ignore any other styling of this type on this element unless its !important as well. Doesn't work in i.e. 6. This is especially useful since some browsers parse css different, most go with what was last specified but there are times when the browser goes with what's most specific i.e.

td.class1{color:#ffffff;}
.class1{color:#000000;}
Which color is used may vary depending on browser.

bluestarultor · 01-26-2009, 08:43 PM

Tell you what. You add a class="translucent" to all the tags you want to have alpha and toss this into your head section:

Code:

<style type="text/css">
.translucent {filter: alpha(opacity=70); -moz-opacity: 0.7; -khtml-opacity: 0.7; opacity: 0.7}
</style>

I'll continue trying to figure out what is and isn't CSS-valid in a bit, but that should get you the transparency you want anywhere you need it.

synkr0nized · 01-27-2009, 01:07 PM

It would be much easier to include the semi-transparent boxes in the image background itself, using some divs if you want to split up the image and to align the text where you want (in those boxes). It'd then be transparent in any browser. I've done a design like that before (example 1 [very old, poor design that put EVERYTHING in that square area] was an experiment of using CSS mixed with in-code transparency tags that worked differently in various browsers and ultimately became irritating, example 2 [kept for many years before my current layout] does it with images in backgrounds instead of trying to deal with browser nuances in CSS, making for cleaner and simpler CSS).

Also, don't use purple as your link color over purple backgrounds.

Nikose Tyris · 01-27-2009, 01:58 PM

Quote:

Originally Posted by synkr0nized

Also, don't use purple as your link color over purple backgrounds.

Knew that and fixing it asap.

01-27-2009, 01:07 PM	#37
synkr0nized synk-ism Join Date: Nov 2003 Location: throughout the Wired Posts: 6,857	It would be much easier to include the semi-transparent boxes in the image background itself, using some divs if you want to split up the image and to align the text where you want (in those boxes). It'd then be transparent in any browser. I've done a design like that before (example 1 [very old, poor design that put EVERYTHING in that square area] was an experiment of using CSS mixed with in-code transparency tags that worked differently in various browsers and ultimately became irritating, example 2 [kept for many years before my current layout] does it with images in backgrounds instead of trying to deal with browser nuances in CSS, making for cleaner and simpler CSS). Also, don't use purple as your link color over purple backgrounds. __________________ Find love. Last edited by synkr0nized; 01-27-2009 at 01:12 PM.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

01-26-2009, 07:24 PM	#35
h4x.m4g3 Lakitu Join Date: Nov 2003 Posts: 2,152	I.E. hates opacity, I recommend taking a thin image slice (5 px high) and setting it to repeat-y for the background of those boxes. Also you might want to declare classes and put your styling into a .css file, it'll make it a lot easier to change later. Some more css hints and tips .class1 element{ all elements within a particular class i.e. .class1 a:link would be all anchor tags within an element with class1. a.class1{ All anchor tags that are of class 1. .class1 .class2{ all class 2 within a class 1 attribute: set !important; !important basicly says ignore any other styling of this type on this element unless its !important as well. Doesn't work in i.e. 6. This is especially useful since some browsers parse css different, most go with what was last specified but there are times when the browser goes with what's most specific i.e. td.class1{color:#ffffff;} .class1{color:#000000;} Which color is used may vary depending on browser.