How to add a hyperlink to this...

Discussion in 'HTML & Website Design' started by ian_batten, Oct 7, 2007.

0
  1. #1
    Hi guys,
    I was wondering how (or ever if...) I would be able to make this dl act as a hyperlink. Here is the code:

    <dl style="border: 1px solid #efefef; padding: 4px; background: #F7F7F7">
    <dt>text goes here</dt>
    </dl>

    So, basically when you over over the dl, you can click on it and it links you to wherever the link is.

    The idea is that this dl (which is a modified snippet of some search engine code I am using), when you do a search, the whole dl will be a link, not just the URL of the website that has come up in the search results.

    I was also hoping it could have a different colour when the user hovers over it. If it is not possible using dl's (only using them as there were in the default code), then how else would it be possible?

    I guess the kind of effect I want is similar to that you see on google adsense ads (only eg I could think of right this second), where there is the text and the link, but the whole cell is a hyperlink. Preferably I don't want to use javascript, but if needs be, I will.

    Thanks in advance!
    Ian
     
    ian_batten, Oct 7, 2007 IP
  2. Monty

    Monty Peon

    Messages:
    1,363
    Likes Received:
    132
    Best Answers:
    0
    Trophy Points:
    0
    #2
    What about this :

    <a href="http://www.example.com"><dt>text goes here</dt></a>
    Code (markup):
    The whole cell is a link.

    For the color change on hover, I think you'll have to define a style

    a:hover{
	color: red;
}
    Code (markup):
    in an external style sheet or in the header section.:

    <STYLE type="text/css">
a:hover{color: red;}
 </STYLE>
    Code (markup):
     
    Monty, Oct 7, 2007 IP
  3. ian_batten

    ian_batten Well-Known Member

    Messages:
    1,991
    Likes Received:
    106
    Best Answers:
    0
    Trophy Points:
    185
    #3
    Thanks for your input Monty.
    I tried that, and it didn't actually work. All it did was make the text inside the dt into a hyperlink, as opposed to the whole cell.
     
    ian_batten, Oct 7, 2007 IP
  4. Monty

    Monty Peon

    Messages:
    1,363
    Likes Received:
    132
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Then, I'm afraid I don't understand what you want, because with this code snippet :

    <html>
<body>

<STYLE type="text/css">
a:hover{color: red;}
 </STYLE>
<dl style="border: 1px solid #efefef; padding: 4px; background: #F7F7F7">
<a href="http://www.example.com"><dt>text goes here</dt></a>
</dl>

</body>
</html>
    Code (markup):
    The whole grey area, (the cell ?) behave as an hyperlink.
     
    Monty, Oct 7, 2007 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    What the?!?

    <a href="http://www.example.com"><dt>text goes here</dt></a>

    and you don't see a problem with this code? Like say... a block level element inside a inline one? Like putting tags between DL and DT which is invalid HTML?

    Of course, the lack of a DD is also invalid code, though I assume you are adding that in the future? Is a DL even the right type of list here?

    The answer is to reverse it:
    <dt><a href="http://www.example.com">text goes here</a></dt>

    and set the anchor to display:block so it auto-expands to the width of the container. You MIGHT have to play with overflow and/or haslayout to get IE to let you click on the whole thing.
     
    deathshadow, Oct 7, 2007 IP