SitePoint Sponsor

User Tag List

Page 1 of 5 12345 LastLast
Results 1 to 25 of 111
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,517
    Mentioned
    182 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>
    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:
    Attached Images Attached Images

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    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!

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,517
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    That was quick Eric

    Well done that was exactly it

  4. #4
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Yay - Thanks Paul!

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Wheres the main content image.
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  6. #6
    Non-Member
    Join Date
    Apr 2009
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where do we get the images from?

  7. #7
    Non-Member
    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
    I don't have any images

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 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

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,517
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

  10. #10
    Non-Member
    Join Date
    Apr 2009
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul.

    ~

  11. #11
    Non-Member
    Join Date
    Apr 2009
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I got the 100&#37; height working but making the inner text not transparent is hard

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,517
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by a2K View Post
    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

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,517
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Graeme (Centauri) has just given me the correct solution also so another well done

  14. #14
    Non-Member
    Join Date
    Apr 2009
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Submitted

  15. #15
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post

    Hey

    Thanks Paul really good one..

  16. #16
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 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

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,746
    Mentioned
    11 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

  18. #18
    Non-Member
    Join Date
    Apr 2009
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Another one submitted

  19. #19
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,264
    Mentioned
    246 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!

  20. #20
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Funny thing is Eric and about 50 other people have documented it
    Only two others (three including Pauls) that I'm aware of.

  21. #21
    Hibernator YuriKolovsky's Avatar
    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

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,517
    Mentioned
    182 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

  23. #23
    SitePoint Guru
    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.

  24. #24
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    still trying

  25. #25
    SitePoint Member Neckar Unrivaled's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •