css 'nowrap' problem.

Goodshape

PROBLEM:
I've got anchors within a paragraph which make up a sub navigation menu.

The paragraph has text-align:center;, which looks best -- and means that making the anchors display:block; and float: left; doesn't work (this would otherwise fix the problem).

Problem is that some 2 or 3 word menu items are wrapping to the next line.

So, I put white-space: nowrap; on the <a>... but now the paragraph doesn't wrap at all... it's just one long line of text (all my anchors) off the end of the page.

In my mind, what I've done should work -- nowrap the text within the <a>, wrap the <a>'s within the <p>'s.

But it's not working... it's nearly 6 O'clock... it's Friday.. I want to go home

halp plz! :pac:


HTML:

<div id="sub-menu>
	<p>
		<a href="#">MENU ITEM 1</a><span></span>
		<a href="#">MENU ITEM 2</a><span></span>
		...etc.
	</p>
</div>

CSS:

#sub-menu { background:url(../images/submenu_topbg.gif) no-repeat 0 0; margin:-1px 0px 20px 0px; padding:8px 0px 0px 0px; }
#sub-menu p { width:900px; overflow:hidden; background-color:#e7e7e7; border-left:1px solid #cccccc; border-right:1px solid #cccccc; padding:5px 20px 7px 20px; text-align:center; }

#sub-menu p span { padding:0px 12px 0px 12px; margin:0px 0px 0px 0px; }
#sub-menu p a { margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; color:#878787; text-decoration:none; white-space: nowrap;}

KJF

The best way to approach navigation menus in my opinion is to use an unordered list.

<ul id="menu">
<li><a href="...">Item1</a>
<li><a href="...">Item2</a>
<li><a href="...">Item3</a>
</ul>

and then float the list elements left with whatever padding you need.

Goodshape

KJF wrote: »

The best way to approach navigation menus in my opinion is to use an unordered list.

Ordinarily I would use unordered lists alight but unfortunately that doesn't solve the problem at hand... floating the list to the left would make the center-alignment of the menu impossible. Same as ::

Goodshape wrote: »

The paragraph has text-align:center;, which looks best -- and means that making the anchors display:block; and float: left; doesn't work (this would otherwise fix the problem).

Thanks, though.

CuLT

Quick/dirty fix: replace the whitespace between the words with  

Another possible way of doing it is to give a fixed width to each a element in the list.

Goodshape

CuLT wrote: »

Quick/dirty fix: replace the whitespace between the words with  

Another possible way of doing it is to give a fixed width to each a element in the list.

There are too many items, which may change from time to time, for the fixed width option to be feasable really.

The   option sounds good though, I'll go for that

Thanks!

Goodshape

Heh... the   fix didn't work in the end. They all ended up on the same line again.

But, it did highlight for me what the real problem was...

...no actual spaces between the anchors in the code that was getting generated

Spaces in there now, and nowrap; working fine. Sometimes you just have to take a step back