SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    PHP Guru lampcms.com's Avatar
    Join Date
    Jan 2009
    Posts
    921
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is it OK to use div tag as a link?

    Is it OK to turn div into a link?

    I mean, something like this:
    <a href="/index.php?a=addblogpost&amp;editflag=1&amp;mid=872"><div class="icn edit">&nbsp;</div></a>

    Here I have a div that will have a nice 'edit' icon using the external css (background-image)

    So Is it OK to just ue the div as a content of the link instead of a more traditional way of using img tag as a link?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, it's not okay. It's utterly invalid and you never know how browsers may interpret it.

    An inline-level anchor element cannot have a block-level division as a child element.

    You can use a <span>, though, which is the inline equivalent of a <div>. The span should contain the text, e.g., 'edit'. Then you can set a background image for the <a> element and hide the span off-screen. This will make you link accessible even for text browsers, dial-up users, screen reader users, and others who cannot perceive images.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just for Sharedlog's info: it will be valid in HTML5.

  4. #4
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Sharedlog.com

    Here is a valid option:
    Tommy was referring to something like this...
    Code CSS:
    div {
    	position: relative;
    	width: 200px;
    	height: 100px;
    	border: 1px solid blue;
    }
    	div a {
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100&#37;;
    		height: 100%;
    		background: url(" ");
    		text-indent: -9999px;
    	}
    Code HTML4Strict:
    <div>
    	<h2>heading</h2>
    	<p>content... <a href="#">.....</a></p>
    </div>

    @kofkof
    A lot of questionable things are valid in HTML5

  5. #5
    PHP Guru lampcms.com's Avatar
    Join Date
    Jan 2009
    Posts
    921
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cooper.semantics View Post
    @Sharedlog.com

    Here is a valid option:
    Tommy was referring to something like this...
    Code CSS:
    div {
    	position: relative;
    	width: 200px;
    	height: 100px;
    	border: 1px solid blue;
    }
    	div a {
    		position: absolute;
    		top: 0;
    		left: 0;
    		width: 100%;
    		height: 100%;
    		background: url(" ");
    		text-indent: -9999px;
    	}
    Code HTML4Strict:
    <div>
    	<h2>heading</h2>
    	<p>content... <a href="#">.....</a></p>
    </div>

    @kofkof
    A lot of questionable things are valid in HTML5
    This look cool. I'll try it.

  6. #6
    SitePoint Member
    Join Date
    Jul 2009
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A lot of questionable things are valid in HTML5
    I couldn't agree more, trust me on this... Nonetheless, since it's the orientation HTML is taking now, I think it's just fair to let Sharedlog know that things are changing and that in a couple of years, this line of code will (most probably) be considered completely valid.

  7. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    HTML 5 allows you to stick a skyscraper into a matchbox (or the HTML equivalent at least) - how utterly stupid.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SQL Consultant gold trophysilver trophybronze trophy
    r937's Avatar
    Join Date
    Jul 2002
    Location
    Toronto, Canada
    Posts
    39,327
    Mentioned
    63 Post(s)
    Tagged
    3 Thread(s)
    <analogy type="absurd">
    <observation>
    it'd hafta be a pretty big matchbox
    </observation>
    </analogy>
    rudy.ca | @rudydotca
    Buy my SitePoint book: Simply SQL
    "giving out my real stuffs"

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by r937 View Post
    <analogy type="absurd">
    <observation>
    it'd hafta be a pretty big matchbox
    </observation>
    </analogy>
    <observation type="reallyabsurd">
    HTML 5
    </observation>
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


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
  •