CSS - Test Your CSS Skills Number 20

**kohoutek** · Apr 18, 2009 08:12

Originally Posted by YuriKolovsky

i spotted it too, but as it was not part of the quiz solution, i ignored it.

Yurikolovski, can you post your solution? Paul said it was a different approach. Would love to see it.

**Paul O'B** · Apr 18, 2009 08:16

Here it is:

Yurikolovsky:

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>CSS Quiz 20 - YuriKolovsky</title>
<style type="text/css">
* {
    margin:0;
    padding:0
}
html, body {
    height:100&#37;;
}
p {
    margin:10px 10px 20px;
    position:relative;/*ie life-support*/
    color:#fff;
}
.outer { /* non transparent with position and shape*/
    width:50%;
    margin:50px auto;
    border:5px outset red;
    position:relative;/*layering*/
    z-index:1;/*layering*/
}
.darnit {
    overflow:hidden;/*webkit life-support, p margin blank fix*/
    background-color:rgba(0, 0, 255, 0.4);/*modern browser fun time, if only ie supported this...*/
    width:100%;/*ie6 life-support*/
}
.outer img {
    float:left;
    margin:10px;
    display:inline;
    position:relative;/*ie life-support*/
}
p.view {
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    right:0;/*heard this might help ie6*/
    top:0;
    margin:0;
}
</style>
<!--[if IE ]>
<style type="text/css">
.darnit {
background-color:blue;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)" 
}
</style>
<![endif]-->
</head>
<body>
<div class="outer">
    <div class="darnit">
        <p><img src="../../../testing2/images/zimg4.jpg" width="300" height="300" alt="Sea View">Opaque/semi-transparent background with solid color/colour text. 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>
</div>
<p class="view"><img src="../../../testing2/images/zimg6.jpg" width="100%" height="100%" alt="Sea View"></p>
</body>
</html>

Normal version:

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>CSS Quiz 20 - YuriKolovsky</title>
<style type="text/css">
* {
margin:0;
padding:0
}
html, body {
height:100%;
}
p {
margin:10px 10px 20px;
position:relative;
z-index:3;
}
.outer {
border:5px outset blue;
width:50%;
/*overflow:hidden;*/
margin:50px auto;
position:relative;
z-index:3;
color:#fff;
}
.outer img {
float:left;
margin:10px;
display:inline;
position:relative;
z-index:3;
}
p.view {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
z-index:1;
margin:0;
}
.opaque {
background:blue;
opacity:0.4;
/*background-color:rgba(0,0,255,0.4); would be ideal if IE supported it*/
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width:100%;
z-index:2;
}
</style>
<!--[if IE ]>
<style type="text/css">
.outer{overflow:hidden;}
.opaque {
filter: progidXImageTransform.Microsoft.Alpha(Opacity=40);
-ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=40)";
height:999em;
}
</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 class="opaque"></div>
</div>

<p class="view"><img src="../../../testing2/images/zimg6.jpg" width="100%" height="100%" alt="Sea View"></p>
</body>
</html>

**kohoutek** · Apr 18, 2009 08:16

Thanks, Paul!

**YuriKolovsky** · Apr 18, 2009 08:32

whoops came in late!
ill explain the solution in plain english as i promised.

background-color:rgba(0,0,255,0.4);

is like opacity, but only affects the background color (doesn't work on images, only color backgrounds)
so you can add that to the container, and only the container will have a semi transparent background, while the contents remain full opacity.

this doesn't work in IE. (or old versions of mozilla, opera)
so for IE i used the position:relative trick on the IE filter property (that paul mentioned earlier)

for the IE opacity filter to apply opacity only to the container and not the contents, the container has to NOT have a position.
while the contents must have position:relative/position:absolute.

this broke the layout in ie, so i added a extra container div which did have position which contained the opaque div that contains the text/images.

note: initially it was the .opaque div that had the opacity (and still does for ie), but eventually the extra div (.darnit div) ended up having all the opacity on it.

**RyanReese** · Apr 18, 2009 13:23

Pretty cool solutions...Man I want the next quiz today

.

**kohoutek** · Apr 18, 2009 13:38

Originally Posted by YuriKolovsky

whoops came in late!
ill explain the solution in plain english as i promised.

background-color:rgba(0,0,255,0.4);

is like opacity, but only affects the background color (doesn't work on images, only color backgrounds)
so you can add that to the container, and only the container will have a semi transparent background, while the contents remain full opacity.

this doesn't work in IE. (or old versions of mozilla, opera)
so for IE i used the position:relative trick on the IE filter property (that paul mentioned earlier)

for the IE opacity filter to apply opacity only to the container and not the contents, the container has to NOT have a position.
while the contents must have position:relative/position:absolute.

this broke the layout in ie, so i added a extra container div which did have position which contained the opaque div that contains the text/images.

note: initially it was the .opaque div that had the opacity (and still does for ie), but eventually the extra div (.darnit div) ended up having all the opacity on it.

Thanks for the explanation. I'm definitely going to experiment a bit with your solution as I've never really dabbled with rgba.

**RyanReese** · Apr 19, 2009 06:23

New quiz Paul, new quiz! I want to attempt it before work :O.

**Paul O'B** · Apr 19, 2009 07:13

New quiz Posted

**molona** · Apr 19, 2009 11:18

Originally Posted by YuriKolovsky

background-color:rgba(0,0,255,0.4);

That's completely new for me. Thank you.

**a2K** · Apr 19, 2009 12:54

I love how he misspelled Ryan Reese (Reece) after he's been here after all this time

**Paul O'B** · Apr 19, 2009 12:58

Originally Posted by a2K

I love how he misspelled Ryan Reese (Reece) after he's been here after all this time

Whoops sorry

Corrected now

**RyanReese** · Apr 19, 2009 13:42

:O Paul!!!

**Takechiro** · Apr 19, 2009 22:23

Great CSS i try to my web page is cool.

**YuriKolovsky** · Apr 20, 2009 04:02

RyanReese
:O Paul!!!

hahah, love your reaction Ryan.

paul misspelled mine too, but thats absolutely understandable. xD

**RyanReese** · Apr 20, 2009 06:30

Lol thanks

. I have read your name about 50 times yet I can't get past 3 letters of spelling.

**enyasmith** · Apr 23, 2009 21:47

Hi Paul
That was interesting test! I can't fix image at the exact place where you placed it.

**Paul O'B** · Apr 24, 2009 02:30

Originally Posted by enyasmith

Hi Paul
That was interesting test! I can't fix image at the exact place where you placed it.

Which image are you having problems with?

**rbfree** · May 23, 2009 08:17

I'm trying to unpack these solutions and tighten up my understanding of a few issues. May I ask someone to give a bit of direction? Please excuse the utter n00bness of these questions.

Re. Paul's solution,
1: Why the empty div (with class="opaque").
2. Why is the paragraph with the sunset image the last element within the body?

Re. Erik's solution,
1. Again, why the empty div (id="apdiv")?

Thanks to anyone for any help.

**Paul O'B** · May 23, 2009 09:12

Hi rbfree,

1) The empty div with class of opaque is necessary because it holds the transparent background. Transparency works as a "whole" on all the elements within a parent. All children get the transparency whether they like it or not.

To circumvent this issue the transparency is applied to an empty div that has no children. It is then placed under the content that needs a transparent background. There will be no "inherited" transparency because the div has no children and therfore the text sitting on the opaque background is not affected and remains at 100% solid.

The trick in the quiz was to make sure that this absolutely placed transparent element keeps pace with the fluid content above it. (This is explained in previous posts).

2) That has nothing to do with the quiz and I just stuck an image at the end of the html and positioned it so that it stretched with the viewport (to a degree) and shrunk or grew as required unlike abackground image which just stays put. I dont know why I bothered to tell you the truth because it's a horrible effect

It's always best to have your absolute elements at the end of the html in the current stacking context because IE gets confused and will ocassionally hide them. This is a common problem in IE and therefore its best to have the absolute element at the end of it's current stacking context (not outside it).

re Erik 1) Same as my answer 1 above

**rbfree** · May 23, 2009 14:41

Thanks Paul, for helping me get this. Could I ask for one last clarification. What mechanism allows the two divs (classes "content" and "opaque"). What's confusing me is how the two divs are able to occupy the same area.

Also, do I have it correctly that the div (opaque) with the opacity property falls below the content div due to its low z-index (1)?

If these questions have obvious answers, please excuse and ignore. I'm going back to the books to revisit positioning next, so maybe I'll answer my own question soon.

Anyway, thanks

rbfree

**rbfree** · May 23, 2009 15:42

Thanks, Paul, for the help on understanding this problem. Revisiting positioning helped me answer the above

questions, at least for the present. Now I'll go try to apply this stuff. Best!! rbfree

**Paul O'B** · May 24, 2009 03:21

I see you've found answers yourself but I'll answer quickly anyway

Originally Posted by rbfree

Thanks Paul, for helping me get this. Could I ask for one last clarification. What mechanism allows the two divs (classes "content" and "opaque"). What's confusing me is how the two divs are able to occupy the same area.

The opaque div is absolutely positioned and absolute elements are removed from the flow. This means other elements don't care about it and it can be placed within its stacking context wherever you like and other content will just flow over it.

A stacking context is created by the nearest positioned parent (e.g. a parent that is either position:absolute itself or more often than not has position:relative applied just for this purpose).

If the parent is position:relative then the absolute element is placed in relation to that parent and not the viewport.

The trick in the quiz was to make the absolute element keep track with the parent's size and this was explained above in the quiz answers.

Also, do I have it correctly that the div (opaque) with the opacity property falls below the content div due to its low z-index (1)?

Yes positioned elements can have z-index applied to control which element overlaps another. The rules are more complex than this and you can find out more in the reference on z-index and stacking contexts.

Hope that helps

**rbfree** · May 24, 2009 15:58

Paul,

This information definitely helps. Thanks! I also spent several hours re-reading the Meyer text on floating and positioning... and lots of other revisits to this and that in my refs that seemed relevant. Now, I need to sort of review it all as I apply it. But, it's making sense. Again, many thanks -- rbfree

**thierry koblentz** · May 25, 2009 12:00

I am late to the party, but I have a solution that does not require the extra element in the markup and that works in FF2.

http://tjkdesign.com/test/sitepoint.html

**YuriKolovsky** · May 25, 2009 14:02

nice one thierry koblentz

User Tag List

Thread: CSS - Test Your CSS Skills Number 20

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions