help with CSS menu - wrap words

[DonnaNJ]

On this site

http://www.omegawomenscenter.com/clients/


You can see the horiz menu across the top. We want to add a few more items ... but there is no room.

If I could make the words Insurance Information be on two lines and Contact Us/Directions wrap to two lines - then I could fit in two more nav items.

I tried setting a width but that didn't work.

Normally I'd add a   between the words in the ... but this is automated - I have no control over this.

How can I  force it to be on two lines ?

Thanks

Donna

[sn3p]

You could use dropdowns in the menu or just name the button "Contact" to shorten it.
Maybe it helps if you change font-face, because Comic sans is not realy a compact font.

If you want the contact button (or any other button) to display in 2 lines you could do the following.

Edit your menu template and give every button (list item) an ID, like this:

id}"[/b] ...>

After that make some adjustments to your CSS:

Code: Select all

#globalnav li {
  list-style: none;
  display: block;
  float: left;
  background-color: #a395ad;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 0;
}

#globalnav a {
  display: block;
  background-color: #a395ad;
  padding: 6px;
  color: #FBF0BF;
  text-decoration: none;
  margin: 0 2px;
  text-align: center;
  border: 1px solid #ffffff;
}

#globalnav #but-7 {
  width: 100px;
}

Replace #but-7 with the actual ID of the contact button and change the width if needed.
You can also adjust other buttons this way if you like.

A downside to making it 2 lines is the button will be heigher then the others, so you might want to adjust the whole menu/button height.

Hope it helps.