How to space text links in a single DIV with CSS

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 !!

 

Place a container for each link inside the content div (or just in the body if you want them to stretch accross the whole page), and set the link container width to 25 per cent or a fixed width. Then center the text inside the divs using text-align:center.
ie.

<style>
#container {width: 1020 px;}
.navlink {width: 25%; text-align:center;}
</style>

<div id="container" />

<img src="header.jpg">

<div class="navlink">Home</div>
<div class="navlink">About Us</div>
<div class="navlink">Contact Us</div>
<div class="navlink">Another Link</div>

body content

Code (markup):

 

What's the point of those classes? If everything in one group have the same class name, then you know you don't need them (what are they being differentiated from?).

<style>
#menu {width: 100%;}/*100% of its container, be that the page, header, whatever*/
#menu li {width: 25%; text-align: center;}/*this would work, but only when there's 4 items... 5 items means 20%, three items means 33.3%, etc*/
</style>

<ul id="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Contact Us</a></li>
  <li><a href="#">Another Link</a></li>
</ul>

Code (markup):

I say #menu li because it's possible there will be other unordered lists and it's not really safe to just say "li" when we only mean the li's inside this particular menu.

 

yes, use an unordered list

<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

and the style

.menu {
display : inline ; /* displays the list in a line instead of vertical */
width : xxx ; /* sets the width of each group of text (which in turn sets the size of the spacing) */
text-align : center /* aligns the text in the center of each group of text. */
}

it should work fine, although I haven't tested it.

 

Ugh, yeah, I forgot that display: inline; under the li which is necessary if this is to be a horizontal menu : ) Thx Will.

 

I may be missunderstanding the question here, but why not just add &nbsp; as required between the links. &nbsp; gives an extra space. Why increase the size of the css file?

 

Because &nbsp; isn't content. It shoule never be in the HTML... but let's assume the guy wanted to use it anyway like many do...

Each space is one space. So, on his let's say 800x600 screen, he needs like 40 &nbsp;s between each of his 4 links. On my 14000px screen, they will not adjust their size to make the menu stretch across my screen, which I thought was the question.

Now he's told by the boss to add two more links. Now what? Every single HTML file, go through and add the two links like you would anyway without CMS, but also change the number of &nbsp;s between each link. Do that a few times to see what works by trial and error.

Getting it to look good in multiple browsers with their stupid font differences as well as screen resolutions with &nbsp; won't fly, as it's considered a little more than the width of a wide letter in whatever the default font is.

For such large spacing differences, &nbsp; is the least flexible. Before I knew better, I would use it occasionally to make a space say before or after a text inside a drop-down or between a hidden span and the visible text afterwards (I'd make the span visible via hover). Now I know better how to do that with CSS too.

I don't see how in this guy's situation the css would get bigger as he should be using a list and the list needs styling anyway... but adding a bit to one CSS file is better than adding a bit to every single HTML file : )

 

Uhm, no. Width does not work on inline elements, unless you count IE's incorrect behavior when in quirks mode. They would need to be inline-block for width to work... also you are targeting the UL instead of the LI, which is just wrong...

 

thats true... forgot about that.
but depends how big a space you want between the words

 

Oops... I keep thinking of li's as blocks cause I used to display:block them, so no set width. Right. Okay,
Hmmm... inline-block doesn't work with someone, either IE or FF, so that's out.

The Li's could be given display: block, width in %, and floated left. I think that makes staircase stacking in IE7 though...
... or the li could stay display:inline and the a's can be floated with % widths (manually or with a script changed as the number of links increase or decrease).

 

Older versions of gecko do not support inline-block, but 99% of them in circulation support the -moz equivalent.

The trick is you need to put this on the ANCHORS, leaving the LI as display:inline. Style the anchor, not the LI.

display:-moz-inline-block;
display:-moz-inline-box;
display:inline-block;

Should work in all browsers - though I'm guessing without seeing ACTUAL code in a layout instead of this psuedocode rubbish.

 

Wait, what? Old versions of gecko? You mean there's a new version that naturally supports inline-block (not moz) ?

 

Maybe FF3 beta : )

 

Aha! Li is not inline! It's something much worse-- a strange "flow" element which acts inlinish by generating the anonymous inline boxes sorta like <p> does but without having the block properties... yuck. Christ, why can't this stuff be straightforeward?? So yes, you can set a width on li, but since they are neither blocks nor inline, the css would need display: block set (or inline block, a strangeness I won't be touching for a while) for the width to take effect.