I’m trying to add bullet points in the Caption where it reads: “Dog Walking, sitting, etc” to appear on a single line. I thought it’d be a cinch, but no matter which code I tried I was doing something wrong. Would appreciate the help. http://nkdogwalking.com/rates.html
It’s not really clear what you are asking. Do you want a dot to the left of each of Dog Walking, Dog Sitting and Puppy Sitting? I need a visual.
What have you tried so far? You could place a background image to the left of each part.
Site is looking nice, by the way. 
I thought & === ampersand?
It does, you know what I meant to say.
- “<” represents the < sign.
- “>” represents the > sign.
- “&” represents the & sign.
- "" represents the " mark.
Why do you think the amp comes after the ampersand?
add bullet points in the Caption where it reads: “Dog Walking, sitting, etc” to appear on a single line.
I am assuming you want it all to display on one line just as it is now but you simply want to add bullets.
If that’s the case just use bullet characters in the html like so -
<caption>[COLOR=Blue]•[/COLOR] Dog Walking [COLOR=Blue]•[/COLOR] Dog Sitting [COLOR=Blue]•[/COLOR] Puppy Sitting</caption>
If that’s the case just use bullet characters in the html like so -
Who wants to listen to a page and hear
“bullet dog walking bullet dog sitting bullet puppy sitting”
?
What’s a bullet dog and a bullet puppy anyway?
I’d consider images or CSS-added content. Unless the word “bullet” means something between each couple of words?
Your code looks good, one other thing I might point out is that you should be using an ampersand in place of &. Mainly in your top menu items (the tabs) is where I see them missing.
http://www.w3.org/TR/html4/charset.html#h-5.3.2
Authors should use “&” (ASCII decimal 38) instead of “&” to avoid confusion with the beginning of a character reference (entity reference open delimiter). Authors should also use “&” in attribute values since character references are allowed within CDATA attribute values.
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Me</a></li>
<li><a href="rates.html">Services [COLOR=Red]&[/COLOR] Rates</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
Who wants to listen to a page and hear
“bullet dog walking bullet dog sitting bullet puppy sitting”
Yeah I was just thinking about that right before you posted and I was unsure what a screen reader would do with it.
Guess I was looking for the easy way out (hangs head in shame)
Whether you use images or bullets it would need to be set up as true list items in a UL to style it.
You could nest a span in a li and set display:list-item; on the span. As we know the bullet gets lost when the li is floated or display:inline
In This Example the bullets are set on the anchor but I could see it working with a span if no anchor was needed.
Naughty, naughty, Sp ! Maybe “pipe dog walking pipe dog sitting pipe puppy sitting” suits you better ?
But seriously, a CSS aural property “don’t read it” would be welcomed? After all, we have “don’t show it” CSS property, don’t we?
I see something about volume and speak here: http://www.w3.org/TR/CSS21/aural.html. Don’t really know if screen readers got to support these?
I’m thinking <span class=“mute”>•</span> here.
???
I thought & === ampersand?
Ahhh, HTML character entities you mean !!!
Yeah, I know of them, just teasing 
Though, I must say, you’re using two amps there for one: & and apm for just &. 
What’s a bullet dog and a bullet puppy anyway?
That would be a Gun Dog
Gun Dog = Hunting dogs trained to retrieve birds after they have been shot. 
Whether you use images or bullets it would need to be set up as true list items in a UL to style it.
Bah!
(instead of caption… I’m using a P here but if it’s a header… that’s a possibility)
<p class=“weirdname”><span>Dog Walking</span><span>Dog Sitting</span><span>Puppy Sitting</span></p>
(looking at that page I’m really starting to think it’s a header… unless it is supposed to be a list of things you do??)
.weirdname span {
padding-left: 1em;
}
.weirdname span:before {
content: "\\2022\\a0";
}
Or, instead of content, background: url(bulletz.png) 0 40% no-repeat;
or whatever.
Maybe “pipe dog walking pipe dog sitting pipe puppy sitting” suits you better ?
Nope, though I tolerate it in actual lists (but personally use images or CSS “content” on all my own sites because they just sounded really weird). Right-angle-bracket, however, is already standard in breadcrumbs, so I leave those in for the same reason “star” tells many people “this field is probably required”.
But seriously, a CSS aural property “don’t read it” would be welcomed? After all, we have “don’t show it” CSS property, don’t we?
I’ve never used aural stylesheets, and I don’t know any user agents who actually know what to do with them. The media type aural has been deprecated… so there’s something else now that nobody supports, lawlz.
Plus, you choose your preferred voice. Aural stylesheets let authors change the voice on you. I hate listening to soft electronic female voices, they just make me go ew. I’d be a little pissed if an author decided some tagline had to be announced as “child”.
Don’t really know if screen readers got to support these?
None that I know of. You choose your own settings: voice, pitch, speed, and what happens with capital letters, and like with Orca you can choose between stuff like “system voice” vs the regular one. But who knows, cause I’ve never even seen a page using aural stylesheets to ever test on actually.
Gun Dog = Hunting dogs trained to retrieve birds after they have been shot.
They don’t flinch when a deafening bang goes off inches from their ears. Amazing.
Bah!
(instead of caption… I’m using a P here but if it’s a header… that’s a possibility)
<p class=“weirdname”><span>Dog Walking</span><span>Dog Sitting</span><span>Puppy Sitting</span></p>
The problem with that though is that it reads as:
Dog Walking Dog Sitting Puppy Sitting
with css turned off.
It’s not proper English as a sentence and it’s surely not a paragraph, though I think you were eluding that you just used a <p> for example only.
(looking at that page I’m really starting to think it’s a header)
I was thinking the same but after looking at the column structure it would not be giving proper headings to the columns. There is only two columns.
The <th>s were already set up in the table, they were just missing the <thead>.
[COLOR=Blue]<thead>[/COLOR]
<tr>
<th>Service</th>
<th>Rate</th>
</tr>
[COLOR=Blue]</thead>[/COLOR]
As I understand it, the <caption> is just "a means for labeling the following table’s content in a visual manner". That being the case I would be more inclined to simplify the caption to this.
<caption>Dog Walking Services and Rates</caption>
Admittedly I am no table expert but that is just how I would see the caption.
I agree with you on caption: even though I saw <caption> in the thread, I didn’t think it was right.
I couldn’t tell if they were column headers either.
Dog Walking Dog Sitting Puppy Sitting
That’s how I was reading it, actually, except the content itself made me see it as comma-separated.
Dog walking, dog sitting (and) puppy sitting.
Maybe it is a list?
I’d like to hear from the OP what the content is expected to do.
Hey ralph! Here we go again, my friend. We’re coming up on a year now since I started coming in here asking for help on my site! Hard to believe it’s been that long. Yeah, I wanted a bullet point after Dog Walking and after Dog Sitting. My code was like this:
caption.li {
display: inline;
}
I tried a few variances on that, too. It doesn’t matter now I guess. I took Rayzur’s advice and put in a different Caption. Now the question is, should that even be a Caption?
Thanks, Rayzur. I remember even testing that on the Validator. I can’t remember why I never changed that. Thanks for pointing that out. I went ahead and changed it. You also mention down below… you question it being a Caption. I think stomme did, too. Do you all think I should change the structure of my Table? Should it be an h2 instead of Caption?
I changed the Caption title to your suggestion. That is a very good idea. Works for me. I mainly did that for SEO purposes… but it should work fine to have it above in the paragraph. Besides, “dog walking services” is a nice searchable phrase, too.
Well, think it of it as a Menu header. So I think you guys are onto something. Maybe the table structure is wrong. I just wanted all three of those services to be on same line… so that people understood I offered those, too. Someone may not want their dog walked, but just for me to take out for a pee and then to just play him inside. So I wanted all three to be in the Caption area. I decided to put that in the description above it instead and took Razur’s advice and changed the Caption to something simpler. Works for me.
Caption seems fine to me (for what you have now), according to what the SitePoint reference says:
As for using an LI, you wouldn’t do it inside the caption itself, but it would be a bit messy if you wanted to have the bullets only on items two and three. All the same, for the record, if you did have a LI inside a caption, you would target it with
caption li {
…
}
Off Topic:
PS – yes, it’s hard to believe it was a year ago that you first posted about this site! O how life is rushing by …
You also mention down below… you question it being a Caption. I think stomme did, too. Do you all think I should change the structure of my Table? Should it be an h2 instead of Caption?
Hi,
I think it could go either way as far as heading or caption.
What I see though is a conflict between using a table for the Walking Services and then using a UL for the Sitting Services. I think the page needs consistency in it’s outline.
Here is your basic outline of the page as you have it now:
<title>Services & Rates for NK Dog Walking</title>
<h1><em>NK</em> Dog Walking</h1>
<h2>Services & Rates</h2>
[COLOR=Red]<caption>Dog Walking Services and Rates</caption>
<h2>Pet Sitting</h2>[/COLOR]
See the inconsistency between the caption (walking services) and the h2 (sitting services)
I would keep the services matching whether I used: headings and ULs, captions and tables, or headings and tables.
Here are a couple of demos I put together, both using tables but one with headings and one with captions.
Services & Rates with Captions
Services & Rates with Headings
Note: I’ve changed the titles on those pages so google doesn’t see your site titles. I am also using a “no-index” meta tag in the page head as well as a robots.txt file in that folder to keep google away.
Now on the first one with captions you see the page outline then becomes this:
<title>[COLOR=Blue]Services & Rates with Captions[/COLOR]</title>
[COLOR=Blue]<h1>[/COLOR]<em>NK</em> Dog Walking</h1>
[COLOR=Blue]<h2>[/COLOR]Services & Rates</h2>
[COLOR=Blue]<caption>[/COLOR]Dog Walking Services</caption>
[COLOR=Blue]<caption>[/COLOR]Dog Sitting Services</caption>
Then using headings it would be similar and it could actually drop to h3s for the services:
(I am using your h2s on the link above so it picks up the BG image you were using)
<title>[COLOR=Blue]Services & Rates with Headings[/COLOR]</title>
[COLOR=Blue]<h1>[/COLOR]<em>NK</em> Dog Walking</h1>
[COLOR=Blue]<h2>[/COLOR]Services & Rates</h2>
[COLOR=Blue]<h3>[/COLOR]Dog Walking Services</h3>
[COLOR=Blue]<h3>[/COLOR]Dog Sitting Services</h3>
If you will use a <tbody> after the <thead> on your tables you can utilize your <col> classes the way they are intended to work without setting the classes on your <tr>s
If you view the page source of both my examples you will see how I changed your tables to this:
[COLOR=Blue]<table class="datatable"[/COLOR] summary="This is a list of the [B]dog walking services[/B] and rates that I offer">
[COLOR=Blue]<caption>Dog Walking Services</caption>[/COLOR]
[COLOR=DarkGreen]<col class="odd" />
<col class="even" />[/COLOR]
[COLOR=Blue]<thead>[/COLOR]
<tr>
<th>Service</th>
<th>Rate</th>
</tr>
[COLOR=Blue]</thead>
<tbody>[/COLOR]
<tr>
<td>15 minutes (Pee Breaks)</td>
<td>$14</td>
</tr>
<tr>
<td>30 minutes</td>
<td>$17</td>
</tr>
<tr>
<td>60 minutes</td>
<td>$30</td>
</tr>
[COLOR=Blue]</tbody>[/COLOR]
</table>
Hope that helps
Thanks so much, Rayzur. I applied all of your suggested changes. I decided to go with h3s. I think those will be better from an SEO perspective… hard to say, just my opinion. I also think it looks better without the caption. It looks better with black on top like that. So I’ve accomplished two things here: better SEO and better consistency. Now I think I need to find a different icon for the h3s. And perhaps the text should now be increased on the h2s. Will have to increase width to do that I think. Would you agree? I’m searching for a leash or perhaps a black silhoutte dog facing the viewer. searching as we speak. . .
This site is making fabulous progress, Mike. Great job!
Yes, the h3s will actually give a semantic outline to the page whereas the captions wouldn’t.
If you take those two links I posted above and run them through the w3c semantics extractor it will show you the page outline. You will see that the captions are not picked up. (bear in mind I was using h2s even though I had suggested the h3s which you have got correct)
I also think it looks better without the caption. It looks better with black on top like that. So I’ve accomplished two things here: better SEO and better consistency. Now I think I need to find a different icon for the h3s. And perhaps the text should now be increased on the h2s. Will have to increase width to do that I think. Would you agree?
I think it looks better without the captions too
Yes, a different icon for the h3s will help give visual separation and if you could use a different icon for “Walking Services” and “Sitting Services” that would be even better.
It’s not set in stone that higher level headings have to be larger text but that is what I consider a general rule of thumb. As a visitor to the page I would expect the h2 to stand out more than the h3. After all, the h3 is the sub-heading of the h2.
You still have two ampersands that need to be put in place.
<title>Services [COLOR=Red]&[/COLOR] Rates for NK Dog Walking</title>
<h2>Services [COLOR=Red]&[/COLOR] Rates</h2>
You also need to use the alt attribute with all your html images when using a strict doctype.
<div id="sidebar">
<p><img src="man-walking-dog-rates.jpg" class="featureimage" [B][COLOR=Blue]alt="#" [/COLOR][/B]width="186" height="282" /></p>
</div> <!-- end sidebar div -->
The target attribute is also deprecated in strict doctypes
<p class="twit">
<a href="http://twitter.com/nkdogwalking" [COLOR=Red]target="_blank"[/COLOR]>
<img class="twitter" src="nk-twitter.png" width="100" height="36" /></a>
</p>
Those changes there should get you a green light on the html
Hi Rayzur. Thanks for all help in correcting some html errors. I went ahead and fixed all of them except for the target attribute. Man, I remember searching for an answer for this before and failed to find one. Do I have to change my document type if I want to keep this? I want links to open in new windows. I can’t seem to find an alternative code for it.