SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Extremists Beware! Rockrz's Avatar
    Join Date
    Mar 2001
    Location
    In God's Country!
    Posts
    1,317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How'd they do that???

    Does anyone know how the designer of this page ( http://www.camisade.net/news/journal.shtml ) was able to make the text links appear to go down when you put your cursor over them?

    I thought this was a KooL trick, and would love to know how to do this.
    .

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    They probably didn't it's either just the text-decoration: none; was used thus the text moved, or the CSS posistion value of the a:hover.

    a:hover {
    color:#ffffff;
    position:relative;
    left:1px;
    top:1px;
    }

  3. #3
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think this is a well-known 'side-effect' of having the colours or text decoration changed. I don't think it was intentional

    -Sam
    Sam Hastings

  4. #4
    Extremists Beware! Rockrz's Avatar
    Join Date
    Mar 2001
    Location
    In God's Country!
    Posts
    1,317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, that's a different effect than just having the text link change colors.

    The link is definietly moving down when you place your cursor over it.

    Maybe xhtmlcoder's deal will work. I'll try it.
    .

  5. #5
    Extremists Beware! Rockrz's Avatar
    Join Date
    Mar 2001
    Location
    In God's Country!
    Posts
    1,317
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works!

    xhtmlcoder's style tag worked like a charm.
    All links, including text links, move down when you place your cursor over them.

    I've never seen this in a style tag. I used to do this with javascript.

    Thanks, guys.
    .

  6. #6
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,294
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by xhtmlcoder
    They probably didn't it's either just the text-decoration: none; was used thus the text moved, or the CSS posistion value of the a:hover.

    a:hover {
    color:#ffffff;
    position:relative;
    left:1px;
    top:1px;
    }
    Yup. This was what was in the css (unless xhtmlcoder cheated and peeked )
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  7. #7
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    I didn't cheat Rockrz asked how they achieved that result so obviously I looked at their CSS it's not that I couldn't recreate that effect.

    I just wanted to make sure I answered the question that was set; being certain they weren't using JavaScript or that it was results of an unintentional CSS inheritance.


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
  •