Horizontal list

[spiresgate]

I am trying to make a horizontal list using the folllowing:

<ul>
<li display="inline">
item1
</li>
<li display="inline">
item2
</li>
<li display="inline">
item3
</li>
<li display="inline">
item4
</li>
<li display="inline">
item5
</li>
</ul>

but it comes out as a normal vertical list.

I must be doing something really stupid; but what?

[KDLA]

<li style="display: inline;">

or, you could put it in your css
li {display: inline;}

KDLA

[spiresgate]

Yes, that works for that code, but if I replace Item1 etc with something like


<a href="Beginning.htm"><img src="badge.jpg" width="62" height="59">

then it goes back to the vertical configuration (which is what I had in the first place!)

[KDLA]

Do you have a "display: block" setting for either the img or link tags in another part of your css? That'll override the li setting.
Try assigning your li's a class & putting this in your code:

.inline {display: inline;}
.inline a {display: inline;}
.inline img {display: inline;}

[spiresgate]

I have tracked down the problem: I had some text in the lists with h tags so aparently forcing new lines. If I get rid of the h tags then the text appears next to the image, not below.

What I really want is a horizontal list consisting of pictures with captions below each and the images are clickable to open other links.

How do I do that?

[KDLA]

<ul>
<li>
<a href="">
<img src="file.jpg" /><br />
Text
</a>
</li>
</ul>

[spiresgate]

Thanks again KDLA.

Your code will successfully put the caption below the picture but the pictures refuse to go inline using:

<ul>
<li display="inline">
<a href="Beginning.htm"><img src="badge.jpg" width="62" height="59" />
<br />In the Beginning</a></li>

<li display="inline">
<a href="SportingHeroes.htm"><img src="badge.jpg" width="62" height="59" />
<br />Sporting Heroes</a></li>

<li display="inline">
<a href="Lourdes.htm"><img src="badge.jpg" width="62" height="59" />
<br />The Spiritual Dimension</a></li></ul>

I am trying to emulate using HTML, CSS etc what I have succesfully achieved using Tables at:

http://myweb.tiscali.co.uk/spiresgate/StEdwardsWeb/index.html

Or is this a case where I am better off using Tables anyway?

[KDLA]

Ummm... display="inline" doesn't work, remember?
look at my previous posting as to how to correctly code that style.

[spiresgate]

I tried the variations such as style="display:inline;" with no success even in combination with <br />. I reason anyway that if display="inline" doesn't work then neither should style="display:inline;" or the equivalent in a style sheet.

In the meantime, however, I have come up with:

<li style="float:left; width: 120; text-align:center;">
<a href="Beginning.htm"><img src="badge.jpg" width="62" height="59" />
<br />In the Beginning</a></li>

which seems to do what I want (and wraps text longer than 120 px).

We learn a little more every day!:)