SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    make a div a link?

    What is the 'recommended' way of making a div a link?

    <a href="www.sitepoint.com"><div id="myDiv"></div></a>
    The above does not validate with the W3

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Put the anchor inside the div, set it to display: block and give it the width and height of the div.

  3. #3
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <div id="myDiv"><a href="www.sitepoint.com"style="display:block; height:100px; width:50px;"></a></div>

    like so? never put a height and width on an anchor, just looks strange to me is all.

  4. #4
    SitePoint Evangelist
    Join Date
    Apr 2006
    Location
    Halifax, Canada
    Posts
    498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Height and width normally wouldn't affect an anchor because it is diaplayed inline. Setting it to 'display: block' lets you style it like you would a <div> or another block element. If you want, you can even leave the div="myDiv" out.
    Paul Butler.org
    JSSpamBlock - Reduce WordPress spam.

  5. #5
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    <a href="www.sitepoint.com"><div id="myDiv"></div></a> won't validate because putting block level elements inside inline ones isn't allowed. Something else you could do is:

    <a href="www.sitepoint.com"><span id="mySpan"></span></a>

    and give the span display:block;

    But simply giving the anchor display:block; and giving it height and width is the neatest way.


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
  •