SitePoint Sponsor

User Tag List

Page 3 of 5 FirstFirst 12345 LastLast
Results 51 to 75 of 111
  1. #51
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    darnit... wanted to do it, only made it work in all except ie6 in my coffee break.
    and now its too late at night.

    i will finish this, tomorrow, so pls let it run.

  2. #52
    Non-Member
    Join Date
    Apr 2009
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's only monday There is still plenty of time before this quiz is over

  3. #53
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I'll take a crack at this

  4. #54
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey thnks for this test..still tryin

  5. #55
    SitePoint Member Neckar Unrivaled's Avatar
    Join Date
    Jan 2007
    Location
    Las Vegas
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, just when you think you know all there is, you learn something new XD Yeah I look forward to the next one. I had quite amount of fun doing this.
    http://www.majin-planet.com - Dragonball Fan Site

  6. #56
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I have another correct solution from Yurikolovsky - Well done

  7. #57
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    k, this quiz was way too hard for me (because of my obvious lack of "simple thought")
    and my solution too complex.
    but im happy that it works in all ie6+, plus all modern browsers (and i could make it work in ie5.5 with some extra code, i think...)

    supports transparent, and non transparent borders.
    AND it works with unlimited sizes, shapes and colors, without problem!


    learned lots of stuff, will post the stuff i learned when this quiz ends

    p.s. oh, and i did come up with the common solution too, which worked everywhere except ie6, but never got past this screenshot, so i went a different route.
    this common solution, does support more browsers...

    the solution is so obvious...when you know it.

  8. #58
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I just needed to use 2 properties (fed to IE6) to fix it. If you want a spoil then PM.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #59
    Non-Member
    Join Date
    Apr 2009
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the temptation is too much To figure this quiz I had the general idea and I was super close, and one simple google and I had to change two lines of code to a different element and my solution was fixed. I think I am going to start on the other quizzes. Any good recommendations?

  10. #60
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I think I am going to start on the other quizzes. Any good recommendations?
    Quiz 9 was fun

  11. #61
    Non-Member
    Join Date
    Apr 2009
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Answer submitted

  12. #62
    SitePoint Enthusiast Aken's Avatar
    Join Date
    Oct 2007
    Location
    Racine, Wisconsin, USA
    Posts
    99
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made a solution that works fine in all browsers, however it relies on a set height for one element, which can cause a vertical scroll bar, and would need to be changed if the contents of that element ever exceeded the set height.

    I'm sure there's a better way to do it, but alas, I had to go to bed eventually

    It was hard to keep myself from using jQuery and stuff just to make things fun, lol.
    Eric Roberts - Racine, WI Web Design & Development
    www.cryode.com

  13. #63
    Non-Member
    Join Date
    Apr 2009
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still waiting for a response I wonder where he is

  14. #64
    SitePoint Addict
    Join Date
    May 2006
    Location
    Amsterdam
    Posts
    206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice, practical challenge. Thanks again Paul!

    Found a very strange issue in IE6 regarding position, float and image ... I've never experienced it before but I imagine it's already know. I'll mention it when the quiz is over.

    I do wish though that CSS would "logically" allow a child element to re-set it's opacity to a value above its parent ... anyone know why this is not the case?

  15. #65
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by molona
    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!
    Same here. There were two quizzes I'd started trying, and just ran out of time.

    However, I still keep up on them, and just used the Quiz Yuri had come up with for a client's page (the one with a clickable box with background hover properties). I have something similar to this, but the loose width/height part will surely come in handy, so keeping my eye on this one too.

    I do wish though that CSS would "logically" allow a child element to re-set it's opacity to a value above its parent ... anyone know why this is not the case?
    I've wondered the same thing. Every time someone says "CSS was written by designers, nor programmers" this is something I point to (if designers had written CSS, of course opacity could come back up in a child).

    I think they don't "reset" because everyone looks at their parents to see what 100% opacity is. So for a child to regain opacity when a parent is 50% opaque, they'd have to look back at the grandparent, because right now as far as they are concerned, that 50% opacity really = 100%.

    It might have something to do with looking back up the DOM, same reason we can't haz parent selectors.

  16. #66
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    danNL
    I do wish though that CSS would "logically" allow a child element to re-set it's opacity to a value above its parent ... anyone know why this is not the case?
    i know why, and i can explain it.
    but it would spoil the fun of the quiz, so if you solved it, i can pm you my final solution, that (sort of) explains it.

    and ill give an example when this quiz ends.


    edit:

    Stomme Poes
    However, I still keep up on them, and just used the Quiz Yuri had come up with for a client's page (the one with a clickable box with background hover properties). I have something similar to this, but the loose width/height part will surely come in handy
    Yessss xD

  17. #67
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I have another 2 entries (DanNl and AliT) that are very close but fail in IE6 - It shouldn't take much to fix them Well done anyway for getting that far.

  18. #68
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Dannl
    I do wish though that CSS would "logically" allow a child element to re-set it's opacity to a value above its parent ... anyone know why this is not the case?
    The way "opacity" works is that the whole parent child block is calculated and then opacity is applied to the whole lot in one go. There is no inheritance at play and the reason that it can't be undone.

  19. #69
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    As Paul said it is a bit of a trick

    He gave a hint in the beginning post by saying saying he had to switch up some styles. 6 I believe.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  20. #70
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B
    The way "opacity" works is that the whole parent child block is calculated and then opacity is applied to the whole lot in one go. There is no inheritance at play and the reason that it can't be undone.
    yes that pretty much sums it up.


    @all who are still trying

    if you reached the "screenshot stage", and have it working in all except ie6, then USE COMMON SENSE, to get it to work in ie6

    i know most lack this ability, like me. then you will have to come up with some other, more difficult solution.


    edit:
    plus paul always gives out hints in his posts, like post #1, #28, #68

  21. #71
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS vermand

  22. #72
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Late entry from Erik J which passes with flying colours

    I'll post the solutions on Saturday (as its' getting late now) and a new quiz on Sunday so stand by

  23. #73
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    yay!

  24. #74
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,788
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Solution Time

    Time to end the misery and look at the solutions to this quiz

    You should have soon realised that it's impossible to stop the transparency once you've applied it because as I mentioned before the whole parent child block is calculated and transparency is applied as a whole which means there is no inheritance as such at play here. All elements will always be transparent and you can't stop them.

    While that's true for opacity it's not quite true for IE's proprietary alpha filter and you can stop the foreground content becoming transparent by using position:relative. This is of course non standard behaviour and not much use for other browsers.

    The solution is to separate the transparency from the elements that you want to remain non transparent and then absolutely place the transparent element underneath the content. To maintain position with the static content you just need the parent to be position relative and then set the height and width to 100% and it will keep track with the content nicely and the transparency is kept all by itself.

    Of course IE6 doesn't play ball very nicely and doesn't understand 100% height for an absolute element based on it's relatively placed parent's height (neither does it understand top: 0 and bottom:0 at the same time). Therefore we cheat and supply a height that is bigger than we will ever need and simply hide the overflow by using overflow:hidden on the parent.

    This works well and is exactly the same technique that I use for my equal column methods as shown in this old demo.

    Here is my original solution to this quiz. I tidied it up a little and fixed the margin collapse and missing semi-colon that only one of you spotted

    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%;
        background:#040308;
    }
    body{padding:1px 0 0}/* stop margin collapse and force vertical scrollbar */
    p {
        margin:10px 10px 20px
    }
    .outer {
        width:50%;
        overflow:hidden;
        margin:50px auto;
        position:relative;
        z-index:3;
    }
    .outer .content {
        border:5px outset red;
        position:relative;
        z-index:4;
        color:#fff;
    }
    .outer img {
        float:left;
        margin:10px;
        display:inline;
        position:relative;
    }
    p.view {
        position:absolute;
        width:100%;
        height:100%;
        left:0;
        top:0;
        z-index:1;
        margin:0;
    }
    .opaque {
        position:absolute;
        left:0;
        top:0;
        height:999em;/* we could have used bottom:0 but IE doesn't understand that so we need to use a height bigger than we ever need and the extra height is hidden by the overflow:hidden on the parent.*/
        width:100%;
        background:#a8473e;
        opacity:0.4;
        z-index:1;
    }
    </style>
    <!--[if IE ]>
    <style type="text/css">
    .opaque{
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40)
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)" 
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="outer">
        <div class="content">
            <p><img src="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>
        <div class="opaque"></div>
    </div>
    <p class="view"><img src="images/sunset.jpg" width="100%" height="100%" alt="Sea View"></p>
    </body>
    </html>
    Winners:

    As we had a lot of entries for this quiz I will only post a few of the answers but if you wish your code to be seen then please feel free to post it.

    As all answers were pretty much the same I have decided that the top three winners will be the first ones I received and therefore congratulations to Eric Watson, Centari and A2K. Also a special mention to Yurikolovsky as his solution was different to the others and is worth a mention.

    Congratulations to all the following who also entered and got it right (or nearly got it right).

    Neckar Unrivalled, RoObear, Ryan Reese, Kahoutec, AlIt, DanNl, Erik J.

    (If I've missed anyone then just shout and I'll give you a mention).


    Eric Watson:
    entry 1
    entry 2

    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>{ visibility: inherit; } CSS Opacity Made Simple!</title>
    <!-- http://www.visibilityinherit.com/forums/test20.html -->
    <!-- http://www.visibilityinherit.com/forums/test20b.html -->
    
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    body {
    background:url(../code/images/opacity-bg.jpg);
    font-weight:bold;
    }
    p, h1, img {
    position:relative;
    padding:10px;
    }
    img {
    float:left;
    }
    #box {
    position:relative;
    margin:50px auto;
    width:50%;
    border:2px solid #000;
    overflow:hidden;
    }
    #apdiv {
    position:absolute;
    top:0;left:0;bottom:0;
    width:100%;
    background:#ccc;
    opacity:.5;
    -ms-filter:"alpha(opacity=50)";
    filter:alpha(opacity=50);
    }
    * html #apdiv{height:999em;}
    </style>
    </head>
    <body>
    
    <div id="box"> 
    <div id="apdiv"></div>
    <h1>No Transparent Text/Image!</h1>
    <img src="../code/images/adriana2.jpg" alt="">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean gravida. Sed blandit, neque non adipiscing sagittis, tortor nisi consequat eros, a posuere sem augue sit amet nibh. Morbi at leo. Vestibulum porta, eros id congue molestie, leo eros facilisis neque, at ullamcorper nisi mauris non quam. Suspendisse vel erat vel nulla molestie egestas. In sit amet mauris quis eros elementum semper. Curabitur suscipit molestie nibh. In euismod ligula vel diam pharetra feugiat. Morbi suscipit fermentum elit. Curabitur imperdiet urna eu sapien.</p>
    
    </div>
    
    </body>
    </html>
    Centauri:
    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%;
        position: relative;
    }
    p {
        margin: 10px 10px 20px;
        position: relative;
    }
    .pad {
        height: 50px;
    }
    .outer {
        border: 5px outset blue;
        width: 50%;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
        z-index: 2;
        color: #fff;
    }
    .shim {
        background: blue;
        opacity: 0.4;
        position: absolute;
        left: 0px;
        width: 100%;
        height: 100%;
        bottom: 0px;
    }
    .outer img {
        float: left;
        margin: 10px;
        display: inline;
        position: relative;
    }
    p.view {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1;
        margin: 0;
    }
    p.view img {
        vertical-align: bottom;
    }
    </style>
    <!--[if lt IE7 ]>
    <style type="text/css">
    .shim {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)" ;
    height: 999em;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="pad"></div>
    <div class="outer">
        <div class="shim"></div>
        <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>
    A2K
    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>Quiz Time</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    html, body {
        height:100%;
    }
    #container2  
     {  
         width:50%;  
         color:#FFFFFF;  
         position:relative;  
         margin:50px auto;  
         border:5px outset blue;
         z-index:2;
         overflow:hidden;  
     }  
    #container2 .transparency  
     {  
         opacity:0.5;  
         -moz-opacity:0.5;  
         width:100%;
         position:absolute;  
         top:0;  
         left:0;  
         bottom:0;
             background:blue;
    }  
    .content  
     {  
         position:relative;  
     } 
    #container2 img {
        float:left;
        margin:10px;
        display:inline;
            position:relative;
    }
    p.view {
        position:absolute;
        width:100%;
        left:0;
        top:0;
        z-index:1;
        margin:0;
    }
    </style>
    <!--[if IE ]>
    <style type="text/css">
    #container2 .transparency{
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; 
    height:999em;
    }
    </style>
    <![endif]-->
    </head>
    <body>
     <div id="container2">  
         <div class="transparency"></div>    
         <div class="content">  
               <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>
           
         </div>    
     </div>  
    <p class="view"><img src="../../../testing2/images/zimg6.jpg" width="100%" height="100%" alt="Sea View"></p>
    </body>
    </html>
    Erik J
    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>Quiz #20 / Erik J</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
        height:100%;
    }
    p {
        margin:10px 10px 20px;
    }
    .outer {
        position:relative;
        z-index:2;
        margin:50px auto;
        border:5px outset blue;
        width:50%;
        overflow:hidden;
        color:#fff;
    }
    .outer div {
        position:absolute;
        z-index:-1;
        top:0;
        left:0;
        width:100%;
        height:999em;
        background:blue;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
     filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
        opacity:.4;
    }
    .outer img {
        display:inline;
        float:left;
        margin:10px;
    }
    p.view {
        position:absolute;
        z-index:1;
        left:0;
        top:0;
        margin:0;
        width:100%;
        height:100%;
    }
    </style>
    </head>
    <body>
    <div class="outer">
        <div></div>
        <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>
    Kohoutek:
    entry
    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>Semi-Transparency without Background Image</title>
    <!-- http://rockatee.com/temp/transparency.html -->
    <style base="" type="text/css">
    * {
        margin:0;
        padding:0
    }
    html, body {
        height:100%;
    }
    p, h1 {
        margin:10px 10px 20px;
    }
    .outer {
        border:5px #472d11 solid;
        width:50%;
        margin:50px 0 0 0;
        position:absolute;
        color:#fff;
        top:0;
        z-index: 2;
        overflow:hidden;
        left:25%;
    }
    .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;
    }
    .container {
        position: absolute;
        width:100%;
        height:9999px;
        z-index: -1;
        background: #472d11;
        top:0;
        opacity:0.4;
    }
    </style>
    <!--[if IE ]>
            <style type="text/css">
                .container{
                    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40)
                    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)" 
                }
            </style>
            <![endif]-->
    </head>
    <body>
    <div class="outer">
        <h1>Testing Semi-transparent Background</h1>
        <p><img src="IMG_0406.jpg" alt="rusted sign" height="300" width="300">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.</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.</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.</p>
        <div class="container"></div>
    </div>
    <p class="view"><img src="IMG_0065.jpg" alt="fence" height="100%" width="100%"></p>
    </body>
    </html>
    Congratulations to all and if you want to post your code then feel free to post away or provide a link to a live version

    There will be a new quiz posted on Sunday which you may find a little sticky
    Last edited by kohoutek; Nov 1, 2011 at 17:21. Reason: typo

  25. #75
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I tidied it up a little and fixed the margin collapse and missing semi-colon that only one of you spotted
    i spotted it too, but as it was not part of the quiz solution, i ignored it.


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
  •