A Little help with my CSS

[zettabyte]

Hey Guys , I'm not that great at coding I can just do enough to get by
Here is my problem , I'm running a Content rotation module . Which is looking in a spefic section and pulling the first couple of lines from the story.

here is what I want to do I have to have a Image at the top of all my stories and then the Module will have a pretty picture to display , But I want to Overlay The Next couple of lines over that picture ussing css , If this is hard to understand i made some pictures to help express what i'm saying

Example story

Heading
Text text
Blah Blah Blah

And I want CSS to Draw a shaded Box Over the Image and Move the text Into it

Example Story with expected results


Any Ideas how to achieve this ?

for my site http://adrenalinereviews.com/

[jamiemac2005]

Hey, if you position the text below the image then something like this would put it above the image:

position:absolute;
/*of course you just need to change the value below*/
top: -50px;

the colouring wouldn't be to hard but you'd have to make sure you keep the values a little darker than you'd expect them to come out(because of their opacity)

color: #00FF00;
background-color: #333333;

you'd want it to be the same size as the image, now the transparency is hard to get right on all browsers(but this will cover a few[IE, FF and Opera]):

filter:alpha(opacity=85);
-moz-opacity:.85;
opacity:.85;

Of course changing the values would be necesary,
give it a go and post a link if you need more help.

Cheers,
Jamey

[dm01]

Keep in mind this won't validate for a while. What Jamey has proposed is CSS Level 3, the new standard that has not been implemented yet. Some parts of CSS Level 3 have been implemented by browsers, but the problem is different parts have been implemented by different browsers. I would put the text in the alt="" attribute, so that everyone can see it if the image doesn't work. The filter: alpha should work in the three major browsers.

Also, the -moz-opacity property has been abandoned, and is no longer considered valid CSS Level 2.1.

[jamiemac2005]

ah, sorry i haven't brushed up on my CSS in a while and opacity and transparency have always been unclear subjects.

Cheers for clarifying,
Jamey

[dm01]

I never really understood transparency either. I use Fireworks if I need shading done. :)

I have started reading the CSS Level 3 and the XHTML 2.0 Working Groups, but I haven't contributed anything because I still suck at that kind of coding.

[jamiemac2005]

Originally Posted by dm01

I use Fireworks if I need shading done. :)

Ditto haha.

[dm01]

I found this today while on an unrelated quest: http://www.w3schools.com/Css/css_image_transparency.asp

I can't believe I have never found this page before.

[jamiemac2005]

Thanks for posting the link =]

Surprised i've never stumbled across it either, very helpful though.

Cheers,
Jamey

[Jaxo]

Wanted to throw out another option that can be supported even by ie6. Although I have not tried it yet the link below goes through a tutorial on some of the capabilities of jQuery. Seems simple enough. I will be working it into my next project some how just so I can play around with it.

http://www.webdesignerwall.com/tutor...for-designers/

Check it out, hope it can help you.

[dm01]

Useful for a more advanced developer, perhaps. I like to stay away from JavaScripts because mine have the unfortunate tendency to break when I least want them to.

[jamiemac2005]

Originally Posted by dm01

...mine have the unfortunate tendency to break when I least want them to.

Yet again ditto... Anyway it's best practice to write unobtrusive javascript which your page does not rely on. The fade seems to be something you rely on so sticking away from JS is clever.