SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    Mar 2002
    Location
    Bristol, UK
    Posts
    2,240
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making a DIV into a link

    Hi all,

    I'm making a navigation bar using DIVs at the moment, and I want to know how to make the whole DIV act as the link, rather than just the text inside it.

    I believe this is not valid XHTML so I'm not going to try it:

    Code:
    <a href="http://www.example.com"><div>Example Page</div></a>
    I'm sure I've seen it done before, using CSS. Can someone enlighten me?

    Thanks

    -Sam
    Sam Hastings

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    Svj
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is better
    <div><a href="http://www.example.com">Example Page</a></div>

    And you shouldn't make the div act as a link, you should make the link inside the div look like more than just a text link, i.e. add background-color, border, padding etc (or whatever you prefer) to the <a> tag

    I hope it's not too unclear what I mean
    What I'm trying to say is: Don't change cursor etc for the div to make it "behave" like a link, add formatting to the link instead

  3. #3
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <div><a href="http://www.example.com">Example Page</a></div>
    as jofa suggested. additionally, add a CSS rule for your link that includes
    Code:
    display: block
    redux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com


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
  •