SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 45 of 45
  1. #26
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Thanks Simon - That's an interesting approach and you correctly detailed the method required.

  2. #27
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    <snip>I'll have to give thanks in advance to Gary because I think once, a long time ago on another forum, he mentioned the technique (which was always way more work than the other image replacement scenarios lawlz but maybe here it has its place : )
    Huh? My methods are simpler by far than other replacement techniques, and they pose absolutely zero accessibility problems (unlike Paul, who poses problems right and left )

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  3. #28
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    how about you post your methods here gary?

    (at least when the quiz ends)

    Off Topic:


    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.
    so very true

  4. #29
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Gary has sent me some code and I will post it with the other entries when finished

    Thanks Gary.

    If anyone else wants to have a go then let me know otherwise I'll probably round this quiz up tomorrow as it's been about a week now.

    I'm interested in any solutions even if they don't meet the requirements I've set as long as they are of interest. I have some really odd ones up my sleeve

  5. #30
    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)
    Give me until thursday, I work 11-5 tuesday-thursday so I have all3 evennings to give it a shot. I haven't even started yet.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #31
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Give me until thursday, I work 11-5 tuesday-thursday so I have all3 evennings to give it a shot. I haven't even started yet.
    Off topic: I work 7:30am to 5:30pm each day watching 13 children ages ranging from 3 months to 5 years old. I'm a landlord for my nearby triplex (rental property). I still continue to model on the side. I work on my web design biz every moment I get (which is usually 4:00am to 6:30am). I have another side web design job I'm putting together. I have two boys (5yr and 3yr old), and one more on the way (maybe a girl?). Oh yeah, and a wife (believe me, that counts as a job!). So far I've been able to massage it all into place. But lately, I fear I've reached the end of my available time. I seem to be balding more rapidly lately.

    I'm looking forward to see the results. The site I'm currently working on is using a transparent logo. I had to resort to text-indent -999em for IE6/7 because I new no better. So this is perfect timing!

  7. #32
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Quote Originally Posted by RyanReese View Post
    <snip> I work <snip>
    Quote Originally Posted by EricWatson View Post
    Off topic: I work [a lot more]<snip>
    *giggle*

    *te-hee snicker snicker*


    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  8. #33
    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)
    Quote Originally Posted by gary.turner View Post
    Off Topic:




    *giggle*

    *te-hee snicker snicker*


    cheers,

    gary
    Lol that was funny.

    Longest I ever worked was 7:30 in the morning till midnight.

    And yes he got fired (eventually) for child labor laws (I was still 17 at this time and working at KFC)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #34
    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)
    Nevermind lost motivation-dang books =/. Post the answers whenever.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #35
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:


    I work too

    xD

  11. #36
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Solution Time:

    Ok time to wrap this up as no more entries are forthcoming.

    (Remember this was just a quiz and I don't advocate any of these methods.)

    This has been a good exercise and has thrown up some interesting points and browser inconsistencies so thanks to Erik J for setting it in the first place and for all those that took part or watched on the sidelines.

    Here is one solution
    :
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Transparent Image Replacement</title>
    <style type="text/css">
    body {
        background:#cfc url(gradient.gif) repeat-x 0 0;
    }
    #replaced-h a, #replaced-v a {
        display:inline-block;
        border:1px solid #363;
        width:360px;
        height:48px;
        overflow:hidden;
        background:url(e15b608ecd.gif) no-repeat 0 0;
        color:#242;
        font:bold 32px comic sans ms;
        text-decoration:none;
    }
    #replaced-h a:hover, #replaced-v a:hover {
        background-position:-360px 0;
        color:#66c;
    }
    #replaced-h img, #replaced-v img {
        border:0;
        width:360px;
        height:0;
    }
    #replaced-v a {
        background:url(2653c046a8.gif) no-repeat 0 0;
    }
    #replaced-v a:hover {
        background-position:0 -50px;
    }
    </style>
    </head>
    <body>
    <h1>Transparent Image Replacement</h1>
    <p>The idea is <b>to use an image to push the replaced text out of sight</b>. With CSS on, the text is pushed 
        out and hidden outside the container. As the container now is "empty" a transparent background can be used. 
        An images off setting should also remove the html image and only the styled text should appear.</p>
    <p>In the html is put any image set to zero size and a header text. The image then gets a width by CSS to push 
        the text out to be hidden by overflow on the container. The container holds the transparent background. With 
        CSS off only the text will show because the image has zero lengths in the html.</p>
    <h2 id="replaced-h"><a href="#"><img src="e15b608ecd.gif" width="0" height="0" alt="">Replaced Heading</a></h2>
    <h2 id="replaced-v"><a href="#"><img src="2653c046a8.gif" width="0" height="0" alt="">Replaced Heading</a></h2>
    </body>
    </html>
    The idea was to add an image in the html which pushes the text out of the way as overflow:hidden is used on the container. If images are turned off then the text slides back into view as required.

    This method doesn't cater if only some images are missing but works if all images are missing or switched off and does perform better than other replacement methods.

    However it should be argued that as the image is content anyway then the alt and title attributes would have been enough and the text in the anchor not needed anyway.

    Of course having an image in the html isn't as easy to change as a background image so another method is to use a spacer gif instead and stretch it with css and apply a background image to the transparent spacer gif. This allows the image to be changed from the CSS without touching the html.

    Winner:

    A few of you spotted the img trick especially as you should have been able to see the border around the 1px gif on the screenshots I posted so i'm going to award the first entry I received as the winner which was Kravvitz. So well done Kravvitz

    Special thanks to all the following who sent me entries.

    Yurikolovsky, Stomme Poes, zcorpan and Gary Turne
    r.

    Before I post the entries you may be interested in a few tricks we picked up along the way that were probably outside the scope of the quiz.

    There is a method (trick) of using transparent images and still hiding the text by using a fixed background position to hide the text. This means that the text is hidden but the background that shows still matches the background behind.

    This will only work over one background of course but could be useful for certain things. Here is an example.

    Another method of supplying the image was by using the content property to insert generated content. This had the benefit of not requiring any extra mark up in the html but ony works in modern browsers of course. You will see examples in some of the entries that follow shortly.

    Another attempt to avoid missing images was to supply them inline using data urls. This meant the image could never be missing but again only works in some browsers. In Firefox the following is pretty robust.

    Here is an example:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Transparent Image Replacement</title>
    <style type="text/css">
    body{
        background:#cfc url(gradient.gif) repeat-x 0 0;
    }
    #image-bg a{
        display:inline-block;
        border:1px solid #363;
        padding-top:50px;
        width:360px;
        height:0;
        padding-top:0;
        height:50px;
        overflow:hidden;
        color:#242;
        text-decoration:none;
        font:bold 32px comic sans ms;
    }
    #image-bg a:before{
        display:inline;
        content:url("data:image/gif;base64,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");
    }
    </style></head><body>
    
    <h1>Transparent Image Replacement</h1>
    <h2 id="image-bg"><a href="#" title="Don't click here">Replaced Heading</a></h2>
    
    </body></html>
    There were many other versions along the way with various comonents from each example.

    One of the things we noticed while testing all these examples that was if you turn off page styles in Firefox from the main menu (View, Page style, No Style) rather than disabling styles with the webdev toolbar then not only was all the css turned off but you also lost the height and width attributes placed in the image tags.

    This ruined the effect where we had set the images to have zero width and height in the html and were over-riding it with css. Using the disabled styles from the webdev however allowed the images to remain at zero width and thus work properly with the methods used.

    It just shows that you can never be sure how someone is viewing your page as there are so many options.

    The entries will follow in the next post.

    Thanks for taking part once again and hope you had some fun at least.

  12. #37
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Kravvitz:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Transparent Image Replacement</title>
    <!-- Created: 2009-10-15 -->
    <style type="text/css">
    body {
      background:url(css_quiz_29_gradient.gif) repeat-x 0 0;
    }
    
    h2#replaced a {
      background: url(css_quiz_29_heading.gif) no-repeat 0 0;
      width: 360px;
      height: 50px;
      overflow: hidden;
      white-space: nowrap;
      text-decoration: none;
      display: block;
    }
    
    h2#replaced a:hover {
      background-position: -360px 0;
    }
    
    h2 img {
      height: 50px;
      width: 100&#37;;
      border: 0 none;
    }
    
    </style>
    </head>
    <body>
    <h1>Transparent Image Replacement</h1>
    <h2 id="replaced"><a href="#"><img src="transparent-pixel.gif" width="1" height="1" alt="">Replaced Heading</a></h2>
    <p>Replace the heading with one of the attached transparent gif images. The images display 
        area is 360x50 px with horizontal or vertical sprites. The replacing image must show the 
        body background under but the replaced heading can't show at all when css is on.</p>
    <p>The replacing must work in all major browsers. The only change allowed in the html is to 
        add <strong>one</strong> element. The css is up to you.</p>
    <p>As a bonus object you can add switching the sprites in the image on hover. The replacing 
        takes place in an anchor only to make IE6 support a hover effect.</p>
    </body>
    </html>
    Yurikolovsky:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Transparent Image Replacement</title>
    <style type="text/css">
    body{    background:url(gradient.gif) repeat-x 0 0 orange;}
    #replaced a {
     position:relative;
     width:360px;
     height:50px;
     overflow:hidden;
     border:solid red 1px;
     display:inline-block;
     background:url(2653c046a8.gif);
    }
    #replaced img {
     width:100%;
     height:100%;
     border:0;
     visibility:hidden;
    }
    </style>
    </head>
    <body>
    <h1>Transparent Image Replacement</h1>
    <!--i could add  onerror="this.style.display = 'none'" to the img tag, it would make it work in IE, but how could i do this with CSS...-->
    <h2 id="replaced"><a href="#"><img src="spacer.gif" />Replaced Heading</a></h2>
    <p>Replace the heading with one of the attached transparent gif images. The images display
        area is 360x50 px with horizontal or vertical sprites. The replacing image must show the
        body background under but the replaced heading can't show at all when css is on.</p>
    <p>The replacing must work in all major browsers. The only change allowed in the html is to
        add <strong>one</strong> element. The css is up to you.</p>
    <p>As a bonus object you can add switching the sprites in the image on hover. The replacing
        takes place in an anchor only to make IE6 support a hover effect.</p>
    </body>
    </html>

    Stomme Poes:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Transparent Image Replacement</title>
    <style type="text/css">
    body {
        background: url(http://stommepoes.nl/squiz/gradient.gif) repeat-x 0 0;
    }
    img {
        border: 0;/*  vertical-align: middle; */
          }
    h2 {
        width: 360px;
        height: 50px;
    }
    h2 a {
        position: absolute;
        width: 360px;
        height: 50px;
        margin-left: 20px;
        color: #000;
        text-align: center;
        overflow: hidden;
    }
    * html h2 a {
        background: url(http://stommepoes.nl/squiz/logototaal.gif) 0 0 no-repeat;
    }
    h2 a:focus, h2 a:hover {
        color: #00f;
        background: url(http://stommepoes.nl/squiz/logototaal.png) 0 -50px no-repeat;
    }
    h2 a:active {
        color: #f00;
        background: url(http://stommepoes.nl/squiz/logototaal.png) 0 -101px no-repeat;
    }
    * html a:hover, * html a:active {
        background-image: url(http://stommepoes.nl/squiz/logototaal.gif);
    }
    a img {
        position: relative;
        left: 0;
        top: 0;
        letter-spacing: .3em;
        font: normal 25px/50px georgia, times, "times new roman", serif;
    }
    * html a img {
        left: -999px;
        text-indent: 999px;
    } /*display: none;*/
    a:focus img, a:hover img {
        top: -50px;
        line-height: 150px;
    }
    a:active img {
        top: -101px;
        line-height: 251px;
    }
    </style>
    </head>
    <body>
    <h1>Transparent Image Replacement</h1>
    <h2><a href="http://google.nl" title="to the googles! ...but ze do nossing!"><img src="http://stommepoes.nl/squiz/logotrans.png" width="360" height="50" alt="Teh g00gl3z!"></a></h2>
    <p>Replace the heading with one of the attached transparent gif images. The images display area is 360x50 px with horizontal or vertical sprites. The replacing image must show the body background under but the replaced heading can't show at all when css is on.</p>
    <p>The replacing must work in all major browsers. The only change allowed in the html is to add <strong>one</strong> element. The css is up to you.</p>
    <p>As a bonus object you can add switching the sprites in the image on hover. The replacing takes place in an anchor only to make IE6 support a hover effect.</p>
    </body>
    </html>

    Zcorpan:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Transparent Image Replacement</title>
    <style type="text/css">
    body {
        background:url(gradient.gif) repeat-x 0 0;
    }
    #replaced:before {
        content:url(spacer2.gif);
    } /* should be a transparent image */
    #replaced {
        height:50px;
        width:360px;
        overflow:hidden;
        background:url(2653c046a8.gif) no-repeat 0 0
    }
    #replaced:hover {
        background-position:0 -50px
    }
    </style>
    </head>
    <body>
    <h1>Transparent Image Replacement</h1>
    <h2 id="replaced"><a href="#">Replaced Heading</a></h2>
    <p>Replace the heading with one of the attached transparent gif images. The images display 
        area is 360x50 px with horizontal or vertical sprites. The replacing image must show the 
        body background under but the replaced heading can't show at all when css is on.</p>
    <p>The replacing must work in all major browsers. The only change allowed in the html is to 
        add <strong>one</strong> element. The css is up to you.</p>
    <p>As a bonus object you can add switching the sprites in the image on hover. The replacing 
        takes place in an anchor only to make IE6 support a hover effect.
    Basically it boils down to pushing down the text with a transparent image and then have overflow:hidden on the container, and then use background image for the real image. The transparent image can be inserted with :before { content:url(spacer.gif) }
    
    http://software.hixie.ch/utilities/js/live-dom-viewer/saved/280</p>
    </body>
    </html>
    Gary Turner:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          xml:lang="en">
    <head>
      <meta name="generator"
            content=
            "HTML Tidy for Linux (vers 7 December 2008), see www.w3.org" />
      <meta http-equiv="Content-Type"
            content="text/html; charset=utf-8" />
    
      <title>Transparent Image Replacement</title>
     <!--
     browser   css x img   !css x img  !css x !img  css x !img  hover
    
    FF            y            y           y           y         y
    IE7/8         y            y           y*          y*        y
    IE6           y            y           y*          y*        n
    Safari4**     y            ?           ?           ?         y
    Opera10**     y            ?           ?           ?         y
    
    * IE does alt text really badly.
    ** Safari and Opera not tested for broken css/img.
     
     
     
     -->
     
      <style type="text/css">
    /*<![CDATA[*/
      body {
        background: url(sitepoint/gradient.gif) repeat-x 0 0;
        }
    
      h2 {
        font: bold 36px "comic sans MS" serif;
        height: 50px;
        margin-top: 0;
        overflow: hidden;
        }
    
      a {
        color: black;
        text-decoration: none;
        }
    
      a img {
        border: none;
        }
    
      a:hover img {
        margin-top: -50px;
        }
    
      /*]]>*/
      </style>
    </head>
    
    <body>
      <h1>Transparent Image Replacement</h1>
    
      <h2 id="replaced"><a href="#"><img src="sitepoint/2653c046a8.gif"
           alt="Replaced Heading"
           title="" /></a></h2>
    
      <p>Replace the heading with one of the attached transparent gif
      images. The images display area is 360x50 px with horizontal or
      vertical sprites. The replacing image must show the body background
      under but the replaced heading can't show at all when css is on.</p>
    
      <p>The replacing must work in all major browsers. The only change
      allowed in the html is to add <strong>one</strong> element. The css
      is up to you.</p>
    
      <p>As a bonus object you can add switching the sprites in the image
      on hover. The replacing takes place in an anchor only to make IE6
      support a hover effect.</p>
    </body>
    </html>

  13. #38
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Wow, data urls, never knew of them but i see Huge potential with them!
    because sending the image with the css in one file will significantly reduce the need for css related background images! very interesting!

    and thanks again for hosting there quizzes paul.

  14. #39
    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)
    When will be new quiz?
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #40
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I'll post one on the weekend

  16. #41
    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)
    Quote Originally Posted by Paul O'B View Post
    I'll post one on the weekend
    Yep...
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  17. #42
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Yep...
    I didn't think it appropriate to start a new quiz with Dan passing away that weekend but I'll post a new quiz in the next couple of days.

  18. #43
    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)
    Quote Originally Posted by Paul O'B View Post
    I didn't think it appropriate to start a new quiz with Dan passing away that weekend but I'll post a new quiz in the next couple of days.
    Good thinking Paul
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  19. #44
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    the 30th quiz should be something special, having a round number and all.

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


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
  •