SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 111
-
Apr 11, 2009, 06:49 #1
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
CSS - Test Your CSS Skills Number 20
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>
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:Last edited by Paul O'B; Apr 18, 2009 at 07:06.
-
Apr 11, 2009, 07:57 #2
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
Hey, one I can do! Submitted!
-
Apr 11, 2009, 08:30 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
That was quick Eric
Well done that was exactly it
-
Apr 11, 2009, 08:35 #4
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
Yay - Thanks Paul!
-
Apr 11, 2009, 09:11 #5
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Wheres the main content image.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Apr 11, 2009, 09:14 #6
- Join Date
- Apr 2009
- Posts
- 115
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Where do we get the images from?
-
Apr 11, 2009, 09:16 #7
- Join Date
- Apr 2009
- Posts
- 115
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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
-
Apr 11, 2009, 09:22 #8
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
I can't do this quiz because I don't have any images. Sorry.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Apr 11, 2009, 09:22 #9
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I don't have any images
http://www.pmob.co.uk/temp/images/zimg4.jpg
http://www.pmob.co.uk/temp/images/zimg6.jpg
-
Apr 11, 2009, 09:23 #10
- Join Date
- Apr 2009
- Posts
- 115
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Paul.
~
-
Apr 11, 2009, 09:31 #11
- Join Date
- Apr 2009
- Posts
- 115
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I got the 100% height working but making the inner text not transparent is hard
-
Apr 11, 2009, 09:41 #12
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
Apr 11, 2009, 09:42 #13
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Graeme (Centauri) has just given me the correct solution also so another well done
-
Apr 11, 2009, 10:08 #14
- Join Date
- Apr 2009
- Posts
- 115
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Submitted
-
Apr 11, 2009, 11:23 #15
- Join Date
- Apr 2009
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hey
Thanks Paul really good one..
-
Apr 11, 2009, 11:38 #16
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
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.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Apr 11, 2009, 12:20 #17
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
I ccame up with UNIQUE solution. Definately.
Answer posted.Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Apr 11, 2009, 12:26 #18
- Join Date
- Apr 2009
- Posts
- 115
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Another one submitted
-
Apr 11, 2009, 15:21 #19
- Join Date
- Feb 2005
- Location
- from Madrid to Heaven
- Posts
- 8,271
- Mentioned
- 252 Post(s)
- Tagged
- 1 Thread(s)
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!
-
Apr 11, 2009, 19:45 #20
- Join Date
- Dec 2007
- Location
- Carlsbad, California, United States
- Posts
- 3,658
- Mentioned
- 15 Post(s)
- Tagged
- 0 Thread(s)
-
Apr 12, 2009, 00:48 #21
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
whoops, internet down all day yesterday.
gona see what i can do this evening
-
Apr 12, 2009, 04:14 #22
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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
-
Apr 12, 2009, 05:41 #23
- Join Date
- Sep 2008
- Location
- Dubai
- Posts
- 971
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Apr 12, 2009, 07:30 #24
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
still trying
-
Apr 12, 2009, 07:49 #25
- Join Date
- Jan 2007
- Location
- Las Vegas
- Posts
- 10
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I think I'll take a crack at this.
http://www.majin-planet.com - Dragonball Fan Site
Bookmarks