CSS - Test Your CSS Skills Number 20

**Paul O'B** · Apr 11, 2009, 05:49

CSS - Test Your CSS Skills Number 20 : Quiz now Ended - Solution posted in post #74

As the quizzes have been a bit quiet lately I have made this one very simple and should be solved in a matter of minutes so it should be suitable for all to have a go.

If you look at the first screenshot (opacity-faded.jpg) you will see that an attempt has been used to use the CSS "opacity" property on the background of the centred box with the unfortunate effect that not only has the background become transparent (as was required) but the inner foreground image and foreground text has also become transparent making the text hard to read and the image look bad.

Your task is to stop the inner content from becoming transparent and if you look at the second screenshot (opacity-full.jpg) you can see how it is supposed to look.

Your task is to make this work in IE6+, Firefox3, Opera and Safari (latest versions). You must use the opacity property and not transparent background pngs to achieve the effect.

The centred box must be a fluid width and height and cannot be a fixed height and width. It must grow and expand with content and screen resize.

I will give you the code for the first version with the faded text so that you have the general structure and the opacity properties to use but you can change it or use your own. As usual no scripting and no hacks apart from the ones I will supply below.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
html, body {
    height:100%;
}
p {
    margin:10px 10px 20px
}
.outer {
    border:5px outset blue;
    width:50%;
    overflow:hidden;
    background:blue;
    margin:50px auto;
    opacity:0.4;
    position:relative;
    z-index:2;
    color:#fff;
}
.outer img {
    float:left;
    margin:10px;
    display:inline;
}
p.view {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:1;
    margin:0;
}
</style>
<!--[if IE ]>
<style type="text/css">
.outer{
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)" 
}
</style>
<![endif]-->
</head>
<body>
<div class="outer">
    <p><img src="../../testing2/images/zimg4.jpg" width="300" height="300" alt="Sea View">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut mauris. Nunc quis enim non mauris tincidunt convallis. Fusce id nulla vitae nibh consequat hendrerit. Fusce dictum placerat tellus. Curabitur bibendum mattis eros. Nam lectus. Pellentesque sagittis. In rhoncus, tortor sit amet pellentesque tempor, eros mi vestibulum erat, ac eleifend lorem sem eu lacus. Duis lobortis arcu quis risus. Curabitur diam. Cras orci nulla, consequat rhoncus, fringilla vel, venenatis nec, nulla. Nunc sed risus nec dolor hendrerit bibendum venenatis nec, nulla. Nunc sed risus nec dolor hendrerit bibendum.. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ut mauris. Nunc quis enim non mauris tincidunt convallis. Fusce id nulla vitae nibh consequat hendrerit. Fusce dictum placerat tellus. Curabitur bibendum mattis eros. Nam lectus. Pellentesque sagittis. In rhoncus, tortor sit amet pellentesque tempor, eros mi vestibulum erat, ac eleifend lorem sem eu lacus. Duis lobortis arcu quis risus. Curabitur diam. Cras orci nulla, consequat rhoncus, fringilla vel, venenatis nec, nulla. Nunc sed risus nec dolor hendrerit bibendum. </p>
</div>
<p class="view"><img src="../../testing2/images/zimg6.jpg" width="100%" height="100%" alt="Sea View"></p>
</body>
</html>

As mentioned above you can change the code to suit as much as you like but my original answer doesn't change more than half a dozen lines at most. However see what you can come up as all methods will be of interest. You will have to use your own images for the example and if you can make a prettier example then mine then all the better

Remember your answer should work with any amount of content and work in a fluid width and height elements. There is no need to duplicate the text content either (as in other previous quizzes).

Do not post your answers here but PM them to me so that others can have a go without seeing your answers.

Any questions just ask and remember this is just for fun

Solutions to the quiz will be posted later in the week (or longer) depending on how it goes

Have fun .

Paul

PS. : In case you missed the other tests you can find them here:
test 1: test 2: test 3: test 4: test 5: test 6: test 7: test 8: test9: test10: test11: test12:
test13: test 14: test 15: test 16: test 17:test18 test 19:

**PicnicTutorials** · Apr 11, 2009, 06:57

Hey, one I can do! Submitted!

**Paul O'B** · Apr 11, 2009, 07:30

That was quick Eric

Well done that was exactly it

**PicnicTutorials** · Apr 11, 2009, 07:35

Yay - Thanks Paul!

**RyanReese** · Apr 11, 2009, 08:11

Wheres the main content image.

**a2K** · Apr 11, 2009, 08:14

Where do we get the images from?

**a2K** · Apr 11, 2009, 08:16

You will have to use your own images for the example and if you can make a prettier example then mine then all the better

I don't have any images

**RyanReese** · Apr 11, 2009, 08:22

I can't do this quiz because I don't have any images. Sorry.

**Paul O'B** · Apr 11, 2009, 08:22

I don't have any images

You can link to (or copy) these:

http://www.pmob.co.uk/temp/images/zimg4.jpg
http://www.pmob.co.uk/temp/images/zimg6.jpg

**a2K** · Apr 11, 2009, 08:23

Thanks Paul.

~

**a2K** · Apr 11, 2009, 08:31

I got the 100% height working but making the inner text not transparent is hard

**Paul O'B** · Apr 11, 2009, 08:41

Originally Posted by a2K

I got the 100% height working but making the inner text not transparent is hard

Keep trying - I'm sure you'll get the answer soon

**Paul O'B** · Apr 11, 2009, 08:42

Graeme (Centauri) has just given me the correct solution also so another well done

**a2K** · Apr 11, 2009, 09:08

Submitted

**siddhi** · Apr 11, 2009, 10:23

Hey

Thanks Paul really good one..

**RyanReese** · Apr 11, 2009, 10:38

I'm being stupid today. I'll rest today and try again tomorrow. Funny thing is Eric and about 50 other people have documented it but I'm failing. Oh well, tomorrow is another day.

**RyanReese** · Apr 11, 2009, 11:20

I ccame up with UNIQUE solution. Definately.

Answer posted.

**a2K** · Apr 11, 2009, 11:26

Another one submitted

**molona** · Apr 11, 2009, 14:21

No, I am not trying. I need to stay focused on my project. I am not trying. I missed the last ones already. I am keeping myself away from this! I need to work

Best of luck to all participants. Snif!

**PicnicTutorials** · Apr 11, 2009, 18:45

Originally Posted by RyanReese

Funny thing is Eric and about 50 other people have documented it

Only two others (three including Pauls) that I'm aware of.

**YuriKolovsky** · Apr 11, 2009, 23:48

whoops, internet down all day yesterday.
gona see what i can do this evening

**Paul O'B** · Apr 12, 2009, 03:14

Hi,

I have entries from A2k, Ryan and Roobear but they are just not quite correct but well done to all anyway

A2k's is very nearly there but needs to work in IE6.

Ryan has used duplicate content which I said not to use.

Roobear is nearly there but needs to fix a scrollbar and height problem.

To recap the layout must work without a set height and the screen size is fluid so content can grow and expand as required (without a scrollbar appearing on the content). The layout must also work in IE6 which needs a very slight change to other browsers.

Thanks to all that have had a go so far

**runrunforest** · Apr 12, 2009, 04:41

This is one of the problems I encountered not so long before. Yet I have no idea how to fix this. I am looking forward to your answer, especially the one that makes it work in ie6.

**YuriKolovsky** · Apr 12, 2009, 06:30

still trying

**Neckar Unrivaled** · Apr 12, 2009, 06:49

I think I'll take a crack at this.

The SitePoint Forums have moved.

User Tag List

Thread: CSS - Test Your CSS Skills Number 20

Thread Tools

Display

CSS - Test Your CSS Skills Number 20

Bookmarks

Bookmarks

Posting Permissions