www.webdeveloper.com
Results 1 to 8 of 8

Thread: weird link problems

  1. #1
    Join Date
    May 2004
    Location
    Sinking Spring, OH, USA
    Posts
    40

    weird link problems

    I'm building a page that has one image link and two text links (all pointing to the same URL).

    http://www.maps-gps-info.com/landingcss.html

    Two questions:

    1) One of the two text links does not make the cursor change to the "pointing hand" when you mouse over it (it remains an I-beam thingy-whatever-you-call-it).

    2) Clicking any of the links does not turn them red. However, after being taken to the page that the link points to and then hitting the "back" button, mousing over that link then turns it red and it remains red after removing the cursor.

    How to fix???
    Attached Files Attached Files

  2. #2
    Join Date
    Feb 2004
    Location
    Slovenia
    Posts
    230
    1. The image that should be like link.
    Take a look at this code:
    PHP Code:
    <img src="http://www.maps-gps-info.com/image-files/geko201whbkgs.jpg" alt="Garmin Geko 101 GPS receiver" width="120" height="200"
    This is your code for the seccond image!

    But is should be like this:
    PHP Code:
    <a href "the link to the page">
    <
    img src="http://www.maps-gps-info.com/image-files/geko201whbkgs.jpg" alt="Garmin Geko 101 GPS receiver" width="120" height="200"></a
    But it is easier to use relative path to the image.

    Just look at the source code of the first image!

    2. Your links:
    You have to edit your CSS to this ->
    #your divs a {
    /*define the style*/
    color: #000;
    }

    #your divs a:hover{
    color: #FF0000;
    }

    #your divs a:visited{
    color: #999999;
    }
    That should help for the collor of the links. It is working for me
    Last edited by Webfreak; 06-07-2004 at 01:05 AM.
    "There are only two forces in the world, the sword and the spirit. In the long run the sword will always be coquered by the spirit!" Napoleon Bonaparte

  3. #3
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Your links are wrong. <a> tags are inline elements, <p> and <div> tags are block level elements.
    Block level elements should not go inside inline elements.
    Every fight is a food fight when you’re a cannibal.

  4. #4
    Join Date
    May 2004
    Location
    Sinking Spring, OH, USA
    Posts
    40
    Thanks lavalamp - that was pretty simple, wasn't it? So, I learned something.

    Webfreak, I am not clear on your instructions about the CSS. Could I see a specific example of how to integrate it?

    Thanks!

  5. #5
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    He just means use CSS instead of that old invalid code in your body tag. Put this in your head section and get rid of ALL the attributes in your body tag:
    Code:
    body{
      margin:0;
      padding:0;
      background:#ffffff url(http://www.maps-gps-info.com/imgs/backimage.gif) repeat top left;
    }
    
    a, a:link{
      color:blue;
    }
    
    a:visited{
      color:purple;
    }
    
    a:focus, a:hover, a:active{
      color:red;
    }
    Every fight is a food fight when you’re a cannibal.

  6. #6
    Join Date
    Feb 2004
    Location
    Slovenia
    Posts
    230
    I am sorry but I have made a kind of typing mistake. I have written the code for collors wrong. It should be only one # not ##.

    P.S: I would also suggest that you try to validate your HTML code. This process can hlep you out to solve lots of problems.
    "There are only two forces in the world, the sword and the spirit. In the long run the sword will always be coquered by the spirit!" Napoleon Bonaparte

  7. #7
    Join Date
    May 2004
    Location
    Sinking Spring, OH, USA
    Posts
    40
    Thanks for sticking with me, guys. I'm trying to be a good student (really).

    I made changes and now it's doing something slightly different:

    1) The image and its text link do not go red for hover or active.

    2) The other text link goes red for hover and takes me to its proper destination, but when I return via the back button, the text link is still red.

    Also, is there a way to take the embedded style and put it in the external CSS document?
    Attached Files Attached Files

  8. #8
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Originally posted by myrrh
    1) The image and its text link do not go red for hover or active.
    They do for me, but then I was using a good browser. In IE the border of the image does not change colour so I wrote some more styles for that.

    Originally posted by myrrh
    2) The other text link goes red for hover and takes me to its proper destination, but when I return via the back button, the text link is still red.
    That's because the focus is still on that link and the styles tell a:focus to be red. I have taken that off in the new styles but now it becomes a bit of an accessibility issue.
    If someone was tabbing through your links they would not know where they were up to because a link with focus would just look the same as a normal link.

    Originally posted by myrrh
    Also, is there a way to take the embedded style and put it in the external CSS document?
    It's called copy and paste.
    Attached Files Attached Files
    Every fight is a food fight when you’re a cannibal.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles