Increase spacing between words

Kurt · #1 (**permalink**) Sep 9th, 2007, 22:45

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 · #2 (**permalink**) Sep 9th, 2007, 23:00

could put margins between the words

MikeHopley · #3 (**permalink**) Sep 9th, 2007, 23:10

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 · #4 (**permalink**) Sep 9th, 2007, 23:37

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Words Women Use (Read This)	Wicca	Webforumz Cafe	1	Jun 13th, 2008 20:39
regardind see-saw moment of words	pushpendramadan	Website Planning	5	Jan 7th, 2008 04:48
Help with key words	Wombat	Starting Out	4	Jul 17th, 2007 08:10
Gre words and vocabulary builder	hawashp	Free Web Site Critique	7	May 25th, 2007 08:33
write words on pictures	jenjen1018	Web Page Design	10	Dec 19th, 2003 18:17

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Increase spacing between words