SitePoint Sponsor

User Tag List

Results 1 to 25 of 27

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Is this placement of <a> and <ul> legal?

    I was trying to get an entire <li> row to be clickable rather than just the text inside it. So I put the <a> tags on either side of the <ul> tags and it works. My question is: is this correct usage, or am I heading into trouble later? Here's the complete test HTML:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    h2, p{
    font-family:Arial, Helvetica, sans-serif;
    }
    .outer {
    	margin:0;padding:0;
    	position:relative;
    	display:table;
    	height: 100px;
    	width: 200px;
    	vertical-align: middle; 
    	text-align: left;
    	border: 1px solid #000;
    	background:#bbb;
    	clear: both;
    }
    .inner {
    	margin:0;padding:0;
    	display:table-cell;
    	vertical-align:middle;
    	position:relative;
    	border: 1px solid #ff0000;
    	padding-left: .6em;
    }
    .inner a {
    	color:blue;
    	text-decoration:none;
    }
    
    </style>
    </head>
    <body>
    <h2>Vertical alignment of elements of different heights</h2>
    <p>Putting the < a > tags around the < ul > tags allows the whole < li > row to be clickable instead of just the < p > text.</p>
    <a href="#" alt=""><ul class="outer"> 
      <li class="inner">
        <p>This is some random text</p>
      </li></ul></a>
    <a href="#" alt=""><ul class="outer">   
      <li class="inner">
        <p>This is some random text<br>This is some random text</p>
      </li></ul></a>
      <a href="#" alt=""><ul class="outer"> 
      <li class="inner">
        <p>This is some random text<br>This is some random text<br>This is some random text</p>
      </li></ul></a>
    </body>
    </html>

  2. #2
    SitePoint Enthusiast Return True's Avatar
    Join Date
    Jan 2012
    Location
    California
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi.

    I suggest using http://validator.w3.org/ to test the validity of your codes.

    Good luck.

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,338
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks! No errors!

    This issue is resolved.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by StevenHu View Post
    Thanks! No errors!

    This issue is resolved.
    Using the code you gave in #1, I get 7 errors and 5 warnings.
    Because of: nesting <ul> inside <li>, using < instead of &lt;, illegal use of alt attribute, using <br> instead of <br />.

  5. #5
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    It's worth noting that while anchors around block level elements wasn't valid before HTML5 it still works in every browser so the validity means nothing really.

    There's also no reason to go around changing doctypes other than validation.

  6. #6
    Non-Member
    Join Date
    Jan 2012
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    It's worth noting that while anchors around block level elements wasn't valid before HTML5 it still works in every browser so the validity means nothing really.

    There's also no reason to go around changing doctypes other than validation.
    I disagree. If it passes the validator then it is legal. If it doesn't then it isn't. If the html is valid then we can argue ad infinitum on whether it is proper semantics or not and that is a different issue alltogether.

    So validation does mean something.

    Sure, code might work in some browsers even if it fails the validator, but to me, publsihing pages with invalid code reflects poorly on the ability of the author of the page. Think of it this way. Just about anyone can build a house and all will probably provide shelter initially, but the poorly built houses will start leaking, falling apart etc much, much sooner than a well built house

    I sometimes go around my competitors' websites and check the validity of the html in at least their home pages. If it is invalid I send them a message through their contact page to tell them their pages are invalid and that they have lost me as a potential customer. If their page is fixed after a few days I highlight their invalid website on my website and recommend people to avoid the site with invalid code.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    It's worth noting that while anchors around block level elements wasn't valid before HTML5 it still works in every browser
    I'm sorry to disagree with you Mark but browsers hate inline elements wrapped around block level elements and I'm seeing more and more errors in the forums now especially as everyone is doing this in html5. IE hates it and will misplace or even hide the element altogether in complicated situations and indeed Mozilla will occasionally hiccough on this. It has happened so often in html 5 layouts that I advise not to use this structure. If you do warp the anchor around the block level element then at least set the anchor to display:block and although this makes it more reliable it does not cure the bug completely.

    What's worse is that the behaviour is erratic and sometimes it works and sometimes it doesn't making a bug that should just be avoided in the first place.

    I don't know what they were thinking when they made this possible in html5 and obviously didn't test how browsers handle it.

    You are right that validation for the sake of validation is a waste of time especially as vendor pre fixes are so widely used these days. Validation is a tool to find errors in the code and fix them and not a badge to be worn .

  8. #8
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    OK...

    #1) Why do you have only one LI inside UL? , even if what you were doing were valid all list items would go to the same link? SO I assume you mean putting the A around the LI, that would be more sensible.

    #2) That is only valid in HTML 5, so you would need to change your doctype and do a few other cross-browser preps


    #3) For what you have, you could simply omit the P tags replace them with the A tags OR replace the P tags with SPANs and wrap an A around all the spans and set the SPANs and the A to to display:block;

  9. #9
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,881
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    A few thoughts ...

    As dresden_phoenix says, that is only valid in (X)HTML5. In earlier versions, <a> can only contain text and inline elements, not block elements like <ul> and <li>.

    And creating a separate list for each bullet point just so that you can wrap <a> tags around the list is a horrible, horrible way of doing it, and completely negates the point of having a list there in the first place.

    What are you putting alt="" attributes on an <a> tag for? They can only be used on <img> – they designate alternative text to be used when the image can't be displayed. Having them here makes no sense.

    There is a very easy way to achieve the goal of making the entire width of the line into a clickable area, that is valid in HTML4 and XHTML1.

    HTML Code:
    <ul class="outer">
    <li><a href="#">Some text</a></li>
    <li><a href="#">More text</a></li>
    <li><a href="#">Lots and lots of text</a></li>
    </ul>
    Code CSS:
    ul.outer a {display:block;}
    You don't need to put a class on the <li>s either, much easier just to put their styles in ul.outer li {...}. And there's no need for <p> for such short text – if you want to increase the spacing between bullets then you can do that with margins and padding on the <li>.

  10. #10
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Very amusing post, but "endagered" is invalid spelling so I'll be boycotting you forthwith.

  11. #11
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Really the pretty painting is usually the request of a the client. Even people who don't know how to work PS (at all) are not learning to do flexible shells for web designs.. they want as a recent forum post to be "able to to fix the text given as per client request". In order words, you do this o r you don't eat. Ignorance is trickling UPHILL.

    My question would be... what makes those LI... if they're LI why do they need P inside them? What makes the text P? If it's all one anchor, what makes it go inside a list?
    Exactly, This was my original response.

    Semantic markup of the content (or a reasonable facsimile of your content) first, bend that markup to your will to make the layout with CSS... then and only then do you start up the goofy paint program to hang graphics on it. The result may not be as artistically pleasing, but its' a HELL of a lot more useful.
    If given the semantic INTENT, a good Art director can cast a flexible and appealing template/interface, even before the actual content is placed. We forget what CSS is for STYLING. If this is considered during the creation of the graphics to support the CSS this is actually quite easy to accomplish and with only minor compromises at most. Again the problem starts with the facts that many clients only understand linking/not liking an oil painting.

    As we concurred before, we don't know the actual semantic intent of the OP. Is he trying to save tags ( as code economy is also twisted into a buzzword by some) because he sees that all links lead to the same URL? Is this beacuse of a poor background graphic/interface design? Is it bad copy and information architecture? Maybe each line is being pulled from a DB... as a LIST of data.. but marketing has decided they all point to the same point of purchase. PSDs are not the only thing that ruin semantics.

  12. #12
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by lyndah
    You normally wouldn't start building a house without a set of architect's plans and so I would never start building a web page without knowing what the desired result (layout) is.
    So I hope you're at least asking for multiple layouts for all those resolutions people have, right? A 320px version, a 480px version, a 600-780px version, a widescreen version and maybe even a TV version?

    If I have the content and know what's considered important by the client for the users, I can mark that shizzle up regardless if the user is viewing on a crappy sleaze1000 connection with Opera as a proxzy browser to save bandwidth, or sitting at a conference using a netbook, or relaxing at home behind a desktop, or being silly and using the Nintendo Wii-mote to move the silly onscreen cursor with great care and little precision to that link or button (yeah a friend of ours watches YouTube videos on his Wii cause the TV's obscenely big).

    I may not CSS it without seeing a layout, and I may end up adding some sandbags or whatever to the markup when I know which UAs I'm expected to support... but the importance of the content and what users MUST be able to do, versus what would be nice for them to do... Lorum Ipsum and a PSD at 1200 pixels wide can't tell us that. That's why I say it's secondary.

    But as Dresden said, clients are the ones who usually require that (a pretty layout), and yes it seems more web developers start with a PSD. But that's them. They're working harder now that "responsive" has become the trendy new buzzword. Or, the graphic designers they're working with are.

  13. #13
    Non-Member
    Join Date
    Jan 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    So I hope you're at least asking for multiple layouts for all those resolutions people have, right?
    I discuss numerous issues with my clients during the planning stage of their website.

  14. #14
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,271
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Did your comment get cut off?

  15. #15
    Non-Member
    Join Date
    Jan 2012
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nope, I accidentally put a comma instead of a full stop at the end. Sorry about the confusion (fixed now)


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
  •