SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Feb 2006
    Location
    uk
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with markup

    Hi

    Looking for some tips how to correctly (semanticly) markup the content in the image.

    Thx in advance


  2. #2
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,506
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    What have you got so far?

  3. #3
    SitePoint Member
    Join Date
    Feb 2006
    Location
    uk
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nothing really, was thinking heading, list items in divs but that doesnt relate the left column to the right.

  4. #4
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    This isn't a site where we write the code for you, sorry to sound blunt but for us to help you we need what you have done so far so we can assist you with making it better. We are not here to do the work for you.

  5. #5
    SitePoint Member
    Join Date
    Feb 2006
    Location
    uk
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SgtLegend View Post
    This isn't a site where we write the code for you, sorry to sound blunt but for us to help you we need what you have done so far so we can assist you with making it better. We are not here to do the work for you.
    Never crossed my mind that someone would wrtie the code for me, Im just looking for pointers to correctly markup the section of the page as its so bespoke. I dont think this forum is exclusivly for "whats wrong with my code" kind of Q and A, I assume that theoretical questions around markup questions can be asked ???

    HTH
    Last edited by Mittineague; Aug 1, 2011 at 10:24. Reason: off-topic removed

  6. #6
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,196
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    No need to get all moody, if you take a step back and read your first post you essentially imply you want us to write something for you just because of your short and sweet wording and the image. Now because you and I got off on the wrong foot i would like to rectify this and assist you, in my option the easiest and most semantic markup i see fit would be a definition list aka <dl>.

    They work in all browsers but sometimes in IE they can be a pain but overall would be the best option for you in my opinion.
    Last edited by Mittineague; Aug 1, 2011 at 10:27. Reason: off-topic removed

  7. #7
    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)
    I would do it as a <table> with <th> for the top row, that's for sure.

    Beyond that, I can see two plausible routes.

    1. Each type of cheese/wine in a cell (using <td rowspan=#> for the cheeses, with the type marked up by <b>.

    2. Each cheese type in a cell, and all accompanying wines in the same cell. Use <dl> within each <td>, with <dt> for the type of cheese/wine and <dd> for the list of varieties within each type. (Technically you could use multiple <dd>s but I probably wouldn't go that far).

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    (using <td rowspan=#> for the cheeses, with the type marked up by <b>.
    Why? Don't we have
    <dl>
    <dt>Hard Mild</dt>
    <dd>Lancashire, Cheshire, Caerphilly</dd>
    </dl>
    or something similar? What's the b going to do?

    Oh wait, one or the other? Since there's still a good content relationship between cheese type and cheese examples, even a <h?> to <p> or <h?> to <ul> setup would still give more (correct) content structure.

    Or, we don't know why it's bold, but whether it was or not, there's still a relationship there that we can mark up in other ways.

    Totally agree on the table... can't think of a way to not use a table while still having the two top headers head each list of header/list pairs.

  9. #9
    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 Stomme poes View Post
    Why? Don't we have
    <dl>
    <dt>Hard Mild</dt>
    <dd>Lancashire, Cheshire, Caerphilly</dd>
    </dl>
    or something similar? What's the b going to do?

    Oh wait, one or the other? Since there's still a good content relationship between cheese type and cheese examples, even a <h?> to <p> or <h?> to <ul> setup would still give more (correct) content structure.

    Or, we don't know why it's bold, but whether it was or not, there's still a relationship there that we can mark up in other ways.

    Totally agree on the table... can't think of a way to not use a table while still having the two top headers head each list of header/list pairs.
    I wouldn't have said the cheese/wine types were headings, and I think it would be wrong to use <h*> elements for them (although I accept that it is arguable, and I won't go to war over it). It's a classic example of where a list heading element would be perfect, but we don't have such a tool at our disposal.

    Yes, you could use list items (whether <ul><li> or <dl><dd>) to mark up the wines and cheeses within each category, but I'm always slightly wary of using them in that way, because you want a comma-separated list, which means making them inline elements and using generated content to get the commas. Sure, it's possible, but it isn't rock solid and there are browsers out there that will barf it up and make a complete pig's breakfast of it. I know you shouldn't use markup to get a particular output format, but sometimes it's better to be practical and accept that the most semantically correct markup doesn't give the best results consistently enough, and that a "second-best" semantic form actually works better in real-world deployment..

  10. #10
    From Italy with love silver trophybronze trophy
    guido2004's Avatar
    Join Date
    Sep 2004
    Posts
    9,506
    Mentioned
    163 Post(s)
    Tagged
    4 Thread(s)
    Looks like the image is gone?


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
  •