SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ok to use whole div as link, or risky?

    Hello,

    Code:
    <a href="blah.html">
      <div><p></p><img></div>
    </a>
    I was wondering if it was ok to proceed that way, or if it was a risky practice as, from what I gathered, this is only acceptable in html5?


  2. #2
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    HTML 4 states that only inline elements may be placed inside an "a", a "div" is a block element therefore it may not be placed there. But you could style an inline element such that it would appear to be a block.

    If you really want to do this, HTML5 gives you full liberty to.

  3. #3
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,617
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    You could make the <a> a block-level element and forgo the use of the <div>
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Force Flow View Post
    You could make the <a> a block-level element and forgo the use of the <div>
    How? <a> is an inline element, regardless of what display properties you give it, and so it can never contain block-level elements such as <p>.

    My preferred solution is to wrap an <a> round the most obvious bit of the <div> to be clickable, and style it accordingly. You can then slap onClick="window.open( '/file.htm','_top' ); return false;" on the <div> to make the whole lot clickable for people with Javascript (those without can still click on the <a>. This is a perfectly accessible solution, as well as being semantically and structurally valid.

  5. #5
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    I don't understand why you would want to do this...

  6. #6
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Black Max View Post
    I don't understand why you would want to do this...
    So that a user can click anywhere inside the div (instead of just the link, or the image, or a bit of text).

    I'm going the html5 way. Is there a polyfill to use for older browsers, or it going to be ok?


  7. #7
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    No older browsers will not understand and have no reason to since Fred is still non-normative.

  8. #8
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    Provide a simple text link at the bottom. When JavaScript is enabled hide the link and handle the click with JavaScript.
    The only code I hate more than my own is everyone else's.

  9. #9
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rhgiant View Post
    So that a user can click anywhere inside the div (instead of just the link, or the image, or a bit of text).
    There are a number of ways to do this besides putting a div inside a link. Your HTML 5 way is one.

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    are the DIV and P even neccessary? What's the CONTENT?

    I mean, if you want it as a block, put the P around the whole thing, lose the DIV (or keep the div and lose the P if the text isn't an actual grammatical paragraph), moving the anchor INSIDE your block-level container, set the anchor to display:block, the image to display:block... and if you need an extra styling hook toss a span or two in there.

    Though that's guessing wildly as we don't know what the content is -- so telling you what the proper HTML is... well... I mean, is that actually a paragraph of text? Is that actually a content image? Why does it need a DIV? (you can style the anchor as block even if it remains inline-level)...

    ... Oh, and skip the bloated HTML 5 nonsense, unless you REALLY feel the need to go back to 1997 on coding practices.

  11. #11
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    The html without elements added for styling purpose would be that:

    Code:
    <h1>Title</h1>
    				
    <img src="sky.jpg">
    
    <p>This is some text.</p>
    <p>And This is some more text.</p>
    <p>And there may be more, I can't say for sure.</p>
    <h1> is above <img>, both on the left. All the paragraphs are on the right. And the whole would actually be a link.

    I can't come with something better than:


    Code:
    <a href="#">
    
     <div id="main">
    
       <div id="intro">
    
         <h1>Title</h1>
    				
           <img src="sky.jpg">
    
       </div>
    
       <div id="content">
          <p>This is some text.</p>
          <p>And This is some more text.</p> 
          <p>And there may be more, I can't say for sure.</p>
       </div>
    
      </div>
    
    </a>
    And I float around various elements to reach what I want.

    Doesn't look good to me.

    I managed to get rid of some divs by using multiple <a>. Didn't seem like a good option either.

    If someone can come up with a 2011 coding practice to do this, I'd be grateful.


  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,529
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Here's how to do it way back to IE6 (although Ie6 doesn't get the hover effect.)

    Basically the anchor is absolutely positioned over the content and makes the whole link area active. if you don't want the link text to show then just position the span offscreen.

    A similar technique was used in an old css quiz and in this transparent overlay quiz.

  13. #13
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I'd have to see it rendering or the entire page, but...

    1) I suspect sky.png is presentational, so it doesn't even BELONG in the HTML.

    2) as paul mentioned, absolute positioning an anchor over the entire area would easily handle it.

    3) I very much doubt your div#header is necessary, or div#main for that matter... You've got four perfectly good block level containers in the form of H1 and three P, what's with all the DIV? I can understand the last one to group the P together if they're related, but apart from that? Not so much.

  14. #14
    SitePoint Zealot
    Join Date
    Jul 2011
    Posts
    199
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul: Thanks a lot, Paul. Works like a charm.

    @d60: I could get rid of all my divs thanks to your harshness. Now, how should I recognize a presentational image from a... what, non-presentational image (what would be the terminolgy?). I'm working on a page where different types of skies (I know it sounds weird) are commented. Images of skies accompany the commentary. Would that qualify as presentational or not? Anyway, I'm left with few options: the skyies/comments are generated through php a loop, and there's no way to know how many skies will be added by users in the future. I doubt I can handle dynamic images names through css.

    Two questions, guys:

    1) (maybe a bit of a challenge?), is it possible to have links within that overlapping link that are actually clickable, leading to another target than the overlapping one?

    2) If I don't have a "more" type of text to put whithin the <span> in Paul's example, which part of the text should be used as anchor? There's no bit of text that really stands out, or that could exist as a "conclusion" that you'd be likely to put whithin the <a>. So, I feel like I'm back to square one. The whole text should be the anchor.

  15. #15
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by rhgiant View Post
    Now, how should I recognize a presentational image from a... what, non-presentational image (what would be the terminolgy?). I'm working on a page where different types of skies (I know it sounds weird) are commented. Images of skies accompany the commentary. Would that qualify as presentational or not? Anyway, I'm left with few options: the skyies/comments are generated through php a loop, and there's no way to know how many skies will be added by users in the future. I doubt I can handle dynamic images names through css.
    My rule of thumb is: does the page still work and make sense without the image there? If it does then the image is presentational, and so should ideally be called by CSS. (Sometimes that doesn't work so well, such as where you're floating an image in amongst text - I wouldn't generally add an empty element just to put a background-image on it, so in some cases you're OK to add it in the HTML).

    If the page doesn't all work or make sense without the image then it should be in the HTML. Examples might include illustrations to accompany an article, a photo gallery, icons that aren't listed in the text.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,529
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by rhgiant View Post
    1) (maybe a bit of a challenge?), is it possible to have links within that overlapping link that are actually clickable, leading to another target than the overlapping one?
    Yes you could have links in the prose but you would have to stack your elements carefully and adjust z-indexes to match. The text should have no z-index or stacking context and that would allow the absolutely positioned anchor to go on top. Then you can give inner links position:relative and a higher z-index than the absolute one.

    Of course the question would be why?

    Either the whole thing is one destination or its not. It would be confusing for it to be both at the same time.

    The same goes for not having a clearly defined link and users will be wondering whether its just a hover effect (as many block seem to be these days). Once you start making your visitors think then you've dropped the ball.


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
  •