Spacing text links in a single DIV

slimboyfatz32 · #1 Jan 29th, 2008, 08:02

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 · #2 Jan 29th, 2008, 08:06

You could use the non breaking space:   between each links

slimboyfatz32 · #3 Jan 29th, 2008, 08:23

Quote:

Originally Posted by Monie

You could use the non breaking space:   between each links

cheers , does that validate ok?

slimboyfatz32 · #4 Jan 29th, 2008, 08:24

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

MikeHopley · #5 Jan 29th, 2008, 08:54

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 · #6 Jan 29th, 2008, 09:29

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 · #7 Jan 30th, 2008, 00:32

Quote:

...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 · #8 Jan 30th, 2008, 10:44

many thanks people!!!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Different text spacing in IE than other browsers	rubyfruit	Web Page Design	18	Jan 23rd, 2008 12:31
Positioning Text, Links and Images	DregondRahl	Web Page Design	4	Jun 7th, 2007 11:34
Paid Text Links	joelviztech	Link Building and Link Sales	1	Aug 19th, 2006 09:50

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Spacing text links in a single DIV