Need paragraph tag alternative (for image groups)

HTML & CSS
1

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:


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/all-available/thunder-fl/

2

Your idea using paragraphs for the images is a good solution. :slight_smile:

To wrap them in a paragraph is the semantic way; the images are inline elements and should not be siblings to a block element.

3

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

I would do something like this (short of having a slideshow to display the images).


<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.


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

Since you describe a gallery of pics, why not use a list structure?

cheers,

gary

6

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

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.

8

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

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

Readable and meaningful yes, but not easily readable or convenient.

Right now the animals’ vital stats are coded as follows:

<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/all-available/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/ac72/Seijun/Website/main1.jpg
or this:
http://i887.photobucket.com/albums/ac72/Seijun/Website/main2.jpg

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

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

11

here is a screenshot of the feed without styling in case the real feed changes:

12

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 [url=http://en.wikipedia.org/wiki/RDFa]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:


 <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

Whats wrong with spans? and what could I use to replace them?

14

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

The classitis is from wordpress and the thematic theme i use with it.