SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Where do I put my A:Link, A:Visited, etc in IMG

    Hi,

    I am pretty new to CSS, I understand the basics but I do not understand where I would define the A:Link, A:Visited, A:Hover, A:Active for an image that links to a new url.

    I have a thumbnail of an image (linking to a larger image) and what I want to happen is when the user rolls over the text I want the border to change colour.

    So far I have:
    img.IMAGEBORDER {border: 1px solid;border-color:#FFFFFF}

    I have been working on this for quite a while without any luck. Especially when FF and Opera display what I want correctly but IE fails to do so. I just want to know how to do it properly instead of guessing and using sloppy CSS/HTML.

    Thanks!

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Hi,

    because CSS selectors can't go upwards - they can only keep narrowing down.. if that makes sense - you need to put the class on the parent.
    Code:
    <a href="" class="thumb"><img src="examplle.gif" height="20" width="20" alt=""></a>
    The CSS
    Code:
    a.thumb img {
      border: 1px solid white;
    }
    a.thumb:hover img, a.thumb:focus img {
      border: 1px solid red;
    }
    Note: You can only add the :hover etc.. psuedo classes to the a element - Internet Explorer 6 and below doesn't support it on any other element.

  3. #3
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great!

    I think I need to practice my syntax a bit and look into the "psuedo classes"

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,122
    Mentioned
    29 Post(s)
    Tagged
    2 Thread(s)
    Well,

    If it helps to understand the selectors e.g. '#example a.thumb img'

    A word by itself is a 'tag name' - like img above
    a word after a '.' is a 'class name'
    a word after a '#' is an 'id'
    And wherever the spaces are it could be said to mean 'is a parent of'

    So the above selector would.. select
    any image within an anchor(with class="thumb") IF it is within another element with id="example".

    My very breif intro to selectors

  5. #5
    SitePoint Enthusiast
    Join Date
    Dec 2006
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    haha thanks for the recap,

    I did learn all the selectors but I forgot them because I didnt practice/use them up to this point. I think I just need to start making a few sample sites and keep practicing.


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
  •