SitePoint Sponsor

User Tag List

Page 4 of 5 FirstFirst 12345 LastLast
Results 76 to 100 of 111
  1. #76
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    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.
    Last edited by kohoutek; Apr 18, 2009 at 09:08.
    Maleika E. A. | Rockatee | Twitter | Dribbble



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

  3. #78
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul!
    Maleika E. A. | Rockatee | Twitter | Dribbble



  4. #79
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #80
    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)
    Pretty cool solutions...Man I want the next quiz today .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #81
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    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.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  7. #82
    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)
    New quiz Paul, new quiz! I want to attempt it before work :O.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #83
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)

  9. #84
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,179
    Mentioned
    234 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    background-color:rgba(0,0,255,0.4);
    That's completely new for me. Thank you.

  10. #85
    Non-Member
    Join Date
    Apr 2009
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I love how he misspelled Ryan Reese (Reece) after he's been here after all this time

  11. #86
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by a2K View Post
    I love how he misspelled Ryan Reese (Reece) after he's been here after all this time
    Whoops sorry Corrected now

  12. #87
    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)
    :O Paul!!!
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #88
    SitePoint Member Takechiro's Avatar
    Join Date
    Apr 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great CSS i try to my web page is cool.

  14. #89
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    RyanReese
    :O Paul!!!
    hahah, love your reaction Ryan.

    paul misspelled mine too, but thats absolutely understandable. xD

  15. #90
    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)
    Lol thanks . I have read your name about 50 times yet I can't get past 3 letters of spelling.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  16. #91
    SitePoint Zealot enyasmith's Avatar
    Join Date
    Apr 2009
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul
    That was interesting test! I can't fix image at the exact place where you placed it.

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

  18. #93
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

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

  20. #95
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  21. #96
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  22. #97
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I see you've found answers yourself but I'll answer quickly anyway

    Quote Originally Posted by rbfree View Post
    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

  23. #98
    SitePoint Zealot
    Join Date
    Jan 2008
    Location
    Hot Springs, Montana
    Posts
    195
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  24. #99
    SitePoint Enthusiast
    Join Date
    Nov 2007
    Location
    San Francisco Bay Area
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Thierry :: @thierrykoblentz
    tjkdesign.com | ez-css.org | css-101.org

  25. #100
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    nice one thierry koblentz


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
  •