SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need paragraph tag alternative (for image groups)

    Hi,
    I maintain a rescue website for dogs. Each dog has its own page with a group of images displayed at the top of the page and a few paragraphs of text displayed below. I need to have a 20px space between the group of images and the text. The text is enclosed in p tags, and the p tags have 20px bottom margins (css styled). The result is:
    Code:
    image image image
    (want 20px space here)
    <p>text</p>
    (20px space)
    <p>more text</p>
    (20px space)
    If i give the p tags a 20px top margin it messes up my formatting on pages without any images. I can enclose the images in p tags and get the desired look, but its not very semantic. Using two br tags also works, but again, I dont think this is proper, semantic-wise. What other options do I have? Is there some html equivalent of the p tag for objects like images?

    For reference:
    http://wolfdogrescue.net/adoption/al...le/thunder-fl/

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your idea using paragraphs for the images is a good solution.

    To wrap them in a paragraph is the semantic way; the images are inline elements and should not be siblings to a block element.
    Happy ADD/ADHD with Asperger's

  3. #3
    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)
    Possibly the next nearest alternative would be a DIV to wraparound the image itself but the P for the descriptive paragraphs is correct. Some people would even go as far to use a definition list for the dog's vital statistics.

  4. #4
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would do something like this (short of having a slideshow to display the images).

    Code:
    <div class="dogsImages">
       <img src="images/rover.jpg" />
       <img src="images/rover2.jpg" />
       <img src="images/rover3.jpg" />
    </div>
    
    <p>
    Rovers paragraph one
    </p>
    
    <p>
    Rovers paragraph two
    </p>
    
    <p>
    Rovers paragraph three
    </p>
    Then you just give the class dogsImages a margin bottom of however many px you want it to be.

    Code:
    .dogsImages {
      margin-bottom:20px;
      }

  5. #5
    Resident curmudgeon bronze trophy gary.turner's Avatar
    Join Date
    Jan 2009
    Location
    Dallas
    Posts
    990
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Since you describe a gallery of pics, why not use a list structure?

    cheers,

    gary
    Anyone can build a usable website. It takes a graphic
    designer to make it slow, confusing, and painful to use.

    Simple minded html & css demos and tutorials

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I considered a using a list structure, but that would mean having to put styling in to float the images beside one another, get rid of bullets, and get rid of the list indentation. It would also mean adding list tags before and after every image for every post by hand. I usually have to add several new animals at a time each with 3 or 4 pictures, and that would add up pretty quick (time-wise).
    I will continue using paragraph tags if that is considered semantic. I was under the impression that they were only for blocks of text.

  7. #7
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will continue using paragraph tags if that is considered semantic. I was under the impression that they were only for blocks of text.
    Tommy Olsson (AutisticCuckoo) is the expert in semantic web design, and IIRC he have said that content images is equivalent to its alt-text (and always should be for accessibility reasons) and therefore is more appropriate wrapped in a paragraph than in a division. You can likewise semantically insert images into text, by the way.
    Happy ADD/ADHD with Asperger's

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    Some people would even go as far to use a definition list for the dog's vital statistics.
    Thanks for this tip. I tried this out and it worked fine on the website with some formatting, but unfortunately it makes the feed very cumbersome to read since without css, the whole thing reverts to a traditional definitions list look.

    It would be great though if I could wrap some other sort of tag around the headings of the vital stats ("age", "gender", etc) to show that they are important and so I could quickly format their color and weight in css without using a lot of span tags. Header tags won't work since they insist on their very own line just like dt tags... What other sort of html tags are there that can delineate certain text as being "special" and that WON'T make any instead visual changes to whatever they are wrapped around?

  9. #9
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    Header tags won't work since they insist on their very own line just like dt tags...
    Actually if you have a list of key-value pairs like age, gender, name, etc... I would totally use a definition list.
    Yes, without CSS they make new lines because they are blocks, like headers do, but the content itself, while looking funny, is still readable and meaningful without the CSS. I mean, in my text browser, it should make sense, and I'd disagree that the meaning changes if the associated value of "5" with the key of "age" is not on the same line.

    You could stretch it to call it a two-column table, but... that's stretching it for me.

    If you posted some of either the content (even dummy content to protect the innocent is fine) or current code, we could bandy about ideas better, since of course content lives in context : )

  10. #10
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Readable and meaningful yes, but not easily readable or convenient.

    Right now the animals' vital stats are coded as follows:
    Code:
    <dl class="stats">
    <dt>Gender:&nbsp;</dt><dd>Male</dd>
    <dt>Age:&nbsp;</dt><dd>3 years</dd>
    <dt>Loc:&nbsp;</dt><dd>Florida</dd>
    <dt>Status:&nbsp;</dt><dd>Available</dd>
    <dt>Contact:&nbsp;</dt><dd><a href="mailto:XXX">XXX</a></dd>
    </dl>
    and it's styled to display like so:
    http://wolfdogrescue.net/adoption/all-available/ (main page) and http://wolfdogrescue.net/adoption/al...le/charley-fl/ (individual page)

    If my css didn't load completely and the list styling was lost, the main page would look something between this:
    http://i887.photobucket.com/albums/a...site/main1.jpg
    or this:
    http://i887.photobucket.com/albums/a...site/main2.jpg

    And an individual page would look something between this:
    http://i887.photobucket.com/albums/a...te/single1.jpg
    or this:
    http://i887.photobucket.com/albums/a...te/single2.jpg

    Here is the feed page without extra styling:
    http://feeds.feedburner.com/wolfdogrescuenet

  11. #11
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here is a screenshot of the feed without styling in case the real feed changes:
    http://i887.photobucket.com/albums/a...site/feed1.jpg

  12. #12
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I can't comment on feeds, mostly because I got too enraged to learn that Mozilla did this thing where it overrode author stylesheets for feeds because they knew better or something... arg.

    For the main url (all-available)
    http://stommepoes.nl/lynx1.png
    http://stommepoes.nl/lynx2.png
    http://stommepoes.nl/lynx3.png
    http://stommepoes.nl/lynx4.png

    My biggest problem using Lynx is using it on pages where either really bizarre tags are used, really strange source order, or text that is created by Javascript. SitePoint and similar forums are kinda weird, they're built in tables and Lynx knows how to render a table, kinda : )

    When using something like a screen reader, the tags you choose matter more: those assistive devices know what a header is, what a link is, what a table is, what a form is, what a list is... and can use those as navigation hooks etc. The benefit a definition list has is that it says "there's a key-value style relationship between what's in the dt and what's in the dd".

    Something that occurred to me was the use of <strong> if you weren't going to use dt's or headers, however like using a 2-column table, it seems incorrect to use here. If CSS-off styling is that important to you, then a ul with strongs around the keys would keep things in one line, and still be a listing of pup stats. But I wouldn't like it nearly as much, semantically. Strong doesn't say "key", it just says "something's more important about this" which isn't quite correct here.

    If cooper doesn't show up in this thread, then I'll say it: your site looks like a good candidate for something like microformats or RDFa. You're displaying data in a regular format and it would be cool to let other devices (such as google for example) be able to use meta data to understand the type of data you're displaying.

    *edit er, maybe not: you already have a lot of classitis going on already:
    Code:
     <div id="post-1349" class="hentry p1 post publish author-admin category-all-available category-female category-male category-urgent tag-kim comments-closed pings-closed y2010 m04 d05 h15 slug-puppies-or">
    That's a lot of classes... microformats alone can add a lot more, plus spans everywhere. : (

  13. #13
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whats wrong with spans? and what could I use to replace them?

  14. #14
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    No, I meant that microformats makes very liberal use of spans, so if you used them you'd have a lot more of them... I wasn't saying you had too many of them now (and you do have classitis but I wonder if it's from a CSS grid system type of thing?).

  15. #15
    SitePoint Enthusiast
    Join Date
    Apr 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The classitis is from wordpress and the thematic theme i use with it.


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
  •