SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    I've got some code here, peep it...

    Yo,

    can someone please clean this up...I need multiple rollovers using css...and I need the css to be contained in the html code not an external css file:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    <!--
    div a:hover { background-image: url("http://www.w3.org/Icons/valid-css.gif"); width: auto;}
    div a { background-image: url("http://www.w3.org/Icons/valid-xhtml11.gif"); width: auto;}
    -->
    </style>
    <title>CSS Rollover
    </title>
    </head>
    <body>
    <p>Hover your mouse over the W3C image to see it change; you also need a Transparent *.gif called: dotclear.gif</a>
    <div>
    <p>
    <a href="#"><img src="dotclear.gif" width="88" height="31"
    border="0" /></a>
    </p>
    </div>
    </body>
    </html>

    I don't get how the transparent .gif is working here...I need help with this.

    Thanks.

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since the image is a background image, the <a> element needs something in it or it will be empty. By using a transparent 1x1 GIF, and autostretching it to the dimensions of the W3C icons, you make the <a> element the same size as the background image.

    The reason for this 'trick' is that there needs to be something to click on inside the <a>.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Thanks so much for replying...yes, but how do I position the background image into the cell I want? If I put it next to the clear.gif it just makes a double image...one from the style code and the other from the html code.

    thanks

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What cell? There is no table in your code sample. A reasonable position would be in the upper left-hand corner of the link, so you could alter the CSS like this:
    Code:
    div a:hover { background-image: url("http://www.w3.org/Icons/valid-css.gif") }
    div a { background: transparent url("http://www.w3.org/Icons/valid-xhtml11.gif") no-repeat left top }
    (The width:auto rule is pointless, since the <a> element is inline.)

    You don't need to specify the background images anywhere else in your HTML.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Evangelist
    Join Date
    May 2005
    Posts
    411
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,

    Ok...maybe I should leave my mouth shut, instead of removing all doubt, nonetheless, I must say...Can I use this css within a html layout with tables? This page is not strictly css, it is full of wonderful html tables, cells and all that good crap.


    thanks.

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure, put the <a> element inside a <td> and modify the CSS selector. I assume this icon link will be in one specific table cell, so give it an ID:
    HTML Code:
    <td id="icon"><a href="#"><img src="dotclear.gif" width="88" height="31"></a></td>
    Then use this CSS:
    Code:
    #icon a {background: transparent url("http://www.w3.org/Icons/valid-xhtml11.gif") no-repeat left top}
    #icon a:hover {background-image: url("http://www.w3.org/Icons/valid-css.gif")}
    #icon a img {border:0}
    (Note how I moved the border="0" attribute to the CSS as well.)
    Birnam wood is come to Dunsinane


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
  •