Help with <li> inline

[eLePHANT]

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

[ralph.m]

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.

[Rayzur]

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>&bull; Dog Walking &bull; Dog Sitting &bull; Puppy Sitting</caption>

[Stomme poes]

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?

[Rayzur]

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 "&amp;" (ASCII decimal 38) instead of "&" to avoid confusion with the beginning of a character reference (entity reference open delimiter). Authors should also use "&amp;" 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 & 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.

[noonnope]

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?

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">&bull;</span> here.

[noonnope]

Your code looks good, one other thing I might point out is that you should be using an ampersand in place of &.

???

I thought & === ampersand?

[Rayzur]

I thought & === ampersand?

It does, you know what I meant to say.

• "&lt;" represents the < sign.
• "&gt;" represents the > sign.
• "&amp;" represents the & sign.
• "&quot; represents the " mark.

Why do you think the amp comes after the ampersand?

[noonnope]

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

[Rayzur]

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.

[Stomme poes]

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.

[Rayzur]

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

<thead>
    <tr>
        <th>Service</th>
        <th>Rate</th>      
    </tr>
</thead>

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.

[Stomme poes]

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.

[eLePHANT]

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.

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?

Your code looks good, one other thing I might point out is that you should be using an ampersand in place of &.

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.

I agree with you on caption: even though I saw <caption> in the thread, I didn't think it was right.

Maybe it is a list?

I'd like to hear from the OP what the content is expected to do.

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.

[ralph.m]

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?

Caption seems fine to me (for what you have now), according to what the SitePoint reference says:

http://reference.sitepoint.com/html/caption

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 …

[Rayzur]

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>
<caption>Dog Walking Services and Rates</caption>
<h2>Pet Sitting</h2>

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>Services &amp; Rates with Captions</title>
<h1><em>NK</em> Dog Walking</h1>
<h2>Services &amp; Rates</h2>
<caption>Dog Walking Services</caption>
<caption>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>Services &amp; Rates with Headings</title>
<h1><em>NK</em> Dog Walking</h1>
<h2>Services &amp; Rates</h2>
<h3>Dog Walking Services</h3>
<h3>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:

<table class="datatable" summary="This is a list of the dog walking services and rates that I offer">
    <caption>Dog Walking Services</caption>
    <col class="odd" />
    <col class="even" />             
    <thead>
        <tr>
            <th>Service</th>
            <th>Rate</th>      
        </tr>
    </thead>
    <tbody>
        <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>
    </tbody>
</table>

Hope that helps

[eLePHANT]

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.

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

[Black Max]

This site is making fabulous progress, Mike. Great job!

[Rayzur]

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.

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 & Rates for NK Dog Walking</title>

<h2>Services & 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" alt="#" 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" target="_blank">
<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

[eLePHANT]

Yes, the h3s will actually give a semantic outline to the page whereas the captions wouldn't.

I think it looks better without the captions too

The target attribute is also deprecated in strict doctypes

<p class="twit">
 <a href="http://twitter.com/nkdogwalking" target="_blank">
<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.

[Rayzur]

Do I have to change my document type if I want to keep the target attribute?

I want links to open in new windows.

I can't seem to find an alternative code for it.

If you want to use the target attribute then yes you will need to change doctypes.

Maybe you want your links to open in new windows but have you stopped to think that the majority of your visitors will not. Put yourself in their position, have you ever been on a site that has links opening up in new windows, it's irritating isn't it. I get the feeling that they think I'm going to lose my way back to their site. The user should be the one to decide if they want a new window. There are plenty of times (especially when I have a search page open in google) that I DO WANT a new tab or window. In that case I right click and choose how I want to open it.

If you want to keep a strict DTD and you think you absolutely have to force a new window on the user then js will be your next best alternative. Have a read through these articles.

The target attribute and opening new windows
Using JavaScript instead of target to open new windows

They should help you see what the fuss is all about.

[eLePHANT]

If you want to use the target attribute then yes you will need to change doctypes.

Maybe you want your links to open in new windows but have you stopped to think that the majority of your visitors will not. Put yourself in their position, have you ever been on a site that has links opening up in new windows, it's irritating isn't it. If you want to keep a strict DTD and you think you absolutely have to force a new window on the user then js will be your next best alternative. Have a read through these articles.

They should help you see what the fuss is all about.

For now, I'm going to take those target attributes out. It's now certified as a strict XHTML doctype by W3C. Whooo! Thanks, Rayzur. I appreciate all your help in this thread. You guys are a real godsend here. I always used that target attribute because of my background in internet marketing. I don't do much of that anymore, though. So it's an old habit. I was always under the impression that if you don't open outgoing pages in a new window, you've now lost that visitor to someone else's website. They may not return. But with a site like this one, with no ads, I don't think that's an issue.

[Stomme poes]

I was always under the impression that if you don't open outgoing pages in a new window, you've now lost that visitor to someone else's website. They may not return.

Meh, depends on if your visitors are all IE6 users (no tabs) or not. Nowadays many of the browsers turn new windows into new tabs out of the box anyway. Back when the majority of the web had links as new windows, and browsers only had a new window as that option, what you learned in marketing was more correct. Nowadays the emphasis is on, let visitors decide how to deal with links and that they DO use the back button.

I guess the absolute worst thing is mixing the two. If I'm on a site that opens everything in a new window/tab (like SitePoint) I can get used to ctrl-w-ing everything, but then comes a link that just goes forward, and I'm already used to ctrl-w and whoops! Just closed everything dammit now I don't remember where I was etc...

Conversely if I'm on a page that's mostly regular links and then I get a new window link in one of my other browsers where I don't have tabs-as-default set up, I don't notice there's a new window and when I'm done and close everything there's like another browser still open and I'm like wtf did that come from? and then I lose hair.

There can be a good idea for when someone's clicking a link while in the middle of doing something, like filling out a form... tho then having the new window be smaller and look like a popup makes more sense I think.

[eLePHANT]

Meh, depends on if your visitors are all IE6 users (no tabs) or not. Nowadays many of the browsers turn new windows into new tabs out of the box anyway. Back when the majority of the web had links as new windows, and browsers only had a new window as that option, what you learned in marketing was more correct. Nowadays the emphasis is on, let visitors decide how to deal with links and that they DO use the back button.

Thanks for you insight, Stomme. I wish that all new windows that open would open in new tabs. Boy was I behind the times with that bit of code... IE6!

[Stomme poes]

I wish that all new windows that open would open in new tabs.

For yourself, you can set that up in your browser in your preferences.