Increase spacing between words

[Kurt]

I'm trying to make a simple navigation menu which so far looks like this:



I initially tried to make this with the spry menu widgit (see post which is going nowhere here: http://www.webforumz.com/css-forum/5...nu-bar-etc.htm), but kept running into so many challenges that it seems much easier and more sensible to make this with plain html text and make each word a link.

All I need to do is increase the space between each word. I tried just hitting the space bar (um ...) but that didn't work. So I made a .css class called "nav", assigned it to these words, and changed the Block: Word Spacing setting to 5 px, then 10 px, then 100 px but nothing changed. (However, changing the letter spacing property does affect the text, so I know the nav class is assigned.) What am I doing wrong?

Thank you.

[alexgeek]

could put margins between the words

[MikeHopley]

Word spacing (CSS code example: word-spacing: 2em;) will only affect the words within each text node. For example, it will affect the spacing in "Viewer Mail", but not the spacing between "Home" and "Images".

I'm assuming these are list items <li>. Just add padding or margins.

[jpmitchell]

Like Mike suggested. I would make sure your code looks like this:

Code: Select all

<ul id="navigation">
  <li><a href="index.html">Home</a></li>
  <li><a href="images.html">Images</a></li>
  <li><a href="multimedia.html">Multimedia</a></li>
  <li><a href="the-arts.html">The Arts</a></li>
  <li><a href="forum.html">Forum</a></li>
  <li><a href="viewer-mail.html">Viewer Mail</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

Now assuming your CSS looks something like this:

Code: Select all

#navigation li {
float: left;
list-style: none;
text-align: center;
}

#navigation a {
color: #fff;
font-size: 1.3em;
text-decoration: none;
}

If your code looks something like that, then there is are two easy ways to do it.

1. You could add padding to each <li> (say 10 pixels to each side), by making the above look like this:

Code: Select all

#navigation li {
float: left;
list-style: none;
padding: 0 10px;
text-align: center;
}

#navigation a {
color: #fff;
font-size: 1.3em;
text-decoration: none;
}

I do however recommend doing this next method.

2. Make the links blocks and setting a width, by making the original CSS code like this:

Code: Select all

#navigation li {
float: left;
list-style: none;
text-align: center;
}

#navigation a {
color: #fff;
display: block;
font-size: 1.3em;
height: 20px;
text-decoration: none;
}

In that last method, you can add padding or set the height to anything you'd like. That makes the links more button like instead of just hyperlinked text.

Hopefully that helps answer your question.

- James