How do I create a horizontal nav-bar with CSS, set to an exact width?

Question

I have a problem that I need help with. All I need to do is
to create a simple text-based horizontal navigation bar using CSS.
I have seen many CSS tutorials online about how to make a
horizontal navigation bar using unordered lists, but they all seem
to either set the bar to be centred or to the full width of the
page, or if they do set it to be a certain width, then the buttons
within that width are centred within pre-defined widths for each
one.
Unfortunately none of these help me - let me explain my
scenario...
I have an area that is exactly 700px wide. In this area I
want to put 5 text hyperlinks.
I want the first text-link to be aligned to the left of my
700px width, and I want the last text-link to be aligned to the
right of the 700px width.
I want the spaces between each of these text-links to all be
the same.
The only definite known width is the overall 700px. I will
not know the width of each text-link, as (a) they are all live
text, and (b) the phrases for each could change.
I have mocked up a quick diagram showing in more detail
precisely what I mean:
http://www.nothowitlooks.com/temp/navbar.gif
Can anyone please help me with this?
Thanks.

Answer 1

.oO(BrettArchibald)
>Oh look, a third person joining the discussion and not
actually proposing any
>solutions to the original query. Just what this thread
needs.
Oh look, a person seeking for help turning into a troll. Just
what this
group needs.
> Well, to be fair, Kim did make a sterling effort in
trying, but just didn't
>manage to fully understand the layout required.
>
> To address your "points":
>
quote:
some things simply can't be done or don't make any sense in
the Web. Even a
>client has to accept that. Let them write wishes to Santa
Clause if they want,
>but they have to accept the rules of the medium they're
working with.
>Period.
> Wrong, wrong, silly comment and wrong.
>
> To elaborate: firstly, with regards to design,
everything can be done, it's
>simply a matter of how.
Only in your fantasy. In practice there are always some
limits enforced
by the used material or technology. You simply can't violate
such basic
rules and laws, even if you would like to.
>Whether you use text, images, tables, CSS, or even
>Flash, the objective is first to design the site with
both your client's and
>their customers needs and expectations, and then to build
it, regardless of how
>difficult-to-code that design may or may not be.
It always looks good on paper, but not every design can be
turned into
practice. This not only applies to web design, but to almost
every kind
of development. Often enough you have to find compromises or
workarounds
if the engineers say "won't work". The problem is that many
designers
don't understand this or don't want to. They're just thinking
and living
in their perfect theoretical world, but have no idea of how
things work
in the real world. And many theoretical things simply don't
work there.
Each medium has its own rules and laws. Some things may work
well for a
printed paper for example, but not in the Web and vice versa.
Of course
you can try to break these rules, but you'll definitely fail.
>You should not compromise your
>design because of a lack of coding knowledge.
It's not lack if coding knowledge if you refuse to try things
that are
impossible or don't make sense. It's quite the opposite,
because you
don't have to waste your time with something that won't work
at all.
>If you don't know how to do it
>yourself, then find out how to do it (which is what I was
*originally* trying
>to do here, remember?).
Quite easy. Surf the web, and if you see something like what
you want,
just have a look at the source code or post the URL here. If
it can be
done, then it already has been done. Just show us an example
and we'll
happily explain it to you.
> Secondly, no, a client does NOT have to accept that
"some things simply can't
>be done or don't make any sense in the Web".
Sure they have. The client is not always king. And if they
insist on
stupid things and always know it better - why the hell are
they hiring
you instead of doing it themselves? If they want their work
to be done
by an expert, they should also _listen_ to that expert and
let him do
his work properly instead of telling him how he should do it.
That's not
going to work.
>Like I said earlier, some clients
>are not interested in hearing about how what they want
cannot be done, and any
>attempts to tell them so only serve to convince them to
take their work, and
>their money, to someone else. Most clients, thankfully,
are adaptable and
>willing to reason. However, some are not, and if these
clients take their money
>elsewhere, you lose the job and you don't get paid. It's
that simple.
Let's say you want a little film to be made about whatever.
Would you
tell the director where he should position the cameras, the
lights and
all the stuff? He already knows _what_ you want to get, so
why don't you
just let him decide _how_ to do it? It's his job! And if he
says that
filming directly towards bright sunlight usually doesn't work
well, you
should respect his expert opinion.
>
quote:
You won't make friends here with such an attitude. Please
stop insulting
>regulars or just leave.
>
> Firstly, I'm not here to make friends. Neither am I here
to make enemies. I am
>here to get help with a coding problem. When people offer
"alternative advice"
>that hinders my progress in finding a solution, I tell
them so. I give back
>what I get.
You asked for advice and you got proper answers. We really
don't need
people here just looking for the answers they want to hear.
Often enough
people are coming here looking for a cure to a particular
problem, while
it would be much easier to avoid that problem right from the
beginning.
Of course if they don't want to hear such alternatives -
their problem.
> Secondly, I was not aware that "regulars" to this site
had any special
>"insult-free privileges" or suchlike that newcomers did
not.
It's not the best idea to bite the hand that feeds you. It's
the group's
regulars who answer almost all of the questions here. And
most of them
also know how to use a killfile.
>I don't care if
>someone is a regular or a newcomer - when I ask a
technical question and
>instead of either potential advice or even silence, I
instead receive
>un-warranted "design advice", I'll make my opinions
known.
So do we. If someone wants something that's not possible or
not going to
work, we'll "make our opinions known". After all that's what
a free
discussion board/forum/group is for.
> As for the "just leave" suggestion for supposedly
"insulting regulars", I
>could very well say the exact same thing to you, for the
reason of not actually
>contributing anything to the discussion that attempts to
address the original
>query of this thread.
> In fact, you know what, I think I will. Here goes:
> Please either propose a solution to my original CSS
problem or just leave.
> There, how was that?
Want to try again?
With pure CSS and text links it can't be done within the
given
constraints. I even doubt that it's possible with a table. So
either
drop the fixed 700px width or the equal space between the
buttons.
> P.S: Seeing as though pedantry seems to be something
you're interested in,
>judging by the "rant" tag comment, I thought I'd point
out that you spelled
>Santa Clause wrong.
You can keep the 'e'. In German we have more than enough of
them.
And if you would be familiar with web design, then you would
have known
where this ironic "error message" came from.
Your turn.
Micha