Spacing text links in a single DIV

[slimboyfatz32]

Hi ,

If i have a single DIV what is the easiest way to evenly space text links with CSS , the method i found spaced each individual word ... i was looking for something more like this ....


Home About Us Contact Us


ps.i am looking for more spacing than is shown here though in the example

many thanks !!

[Monie]

You could use the non breaking space:   between each links

[slimboyfatz32]

Originally Posted by Monie

You could use the non breaking space:   between each links

cheers , does that validate ok?

[slimboyfatz32]

or is there anything you could within a CSS style ??

[MikeHopley]

This is not a good choice of markup. Use a list instead:

Code: Select all

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
...
...
</ul>

Then use CSS to format this as you please -- make it horizontal, remove the bullets, whatever.

[welshstew]

you can try the following as a starting point and go from there:

Code: Select all

#navigation {
    margin: 0 auto;
    text-align: center;
    width:800px;
    height: 40px;
    overflow: hidden;
    }
ul.nav {
    list-style: none;
    margin: 0;
    padding-top: 10px;
    }
ul.nav li {
    display:inline;
    color:#000066;
    width:800px;
    }
ul.nav li a:link, ul.nav li a:visited {
    font: Verdana, Arial, Helvetica, sans-serif;
    color: #ff6600;
    padding: 4px 10px 3px 10px;
    text-decoration: none;
    }    
ul.nav li a:hover {
    font: Verdana, Arial, Helvetica, sans-serif;
    color: #ff0000;
    text-decoration: none;
    background-color: #fff;
    padding-bottom: 1px;
    }

then add

HTML: Select all

<div id="navigation">
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About us</a></li>
...
...
</ul>
</div>

[Monie]

...what is the easiest way to evenly space text links with CSS

You should ask how to do a CSS styled menu
Welsh explained it CRYSTAL clear...

[slimboyfatz32]

many thanks people!!!