custom css text width for menu

[lipos]

Hi,

I have this problem with my main menu and no idea how to resolve it.
There is the picture:

http://img383.imageshack.us/img383/5418/cssproblembt0.png

I will like to somehow make five menu buttons: "District Information", "Meetings", Audit", "News", "Information".
I have those light balls and I will like to make the text look nice below each light ball.
Two word text button should fit automatically in the area. The areas should be equal for every button.
This is my CSS for this area:


a.mainlevel-nav:link, a.mainlevel-nav:visited {
color : black;
font-size : 11px;
font-weight : normal;
text-decoration : none;
padding-left : 0px;
}

a.mainlevel-nav:hover {
color : #777777;
font-weight : normal;
text-decoration : none
}

Do you have some ideas how I can use CSS to make a custom, or fixed text width?
Any examples how somebody did it?

[Centauri]

This should be fairly easy styling an unordered list of links. Will need a little more info, though - it is difficult to tell from your graphic exactly what text you want for each link button, or what size there is to play with. Can you post a full-size graphic of that area? Also, are the lightbuls a separate graphic, and do you want them to "light up" on hover as well? And is the link text just to be displayed as unbordered text below the link (ie. without any "box" around the text)?

Cheers
Graeme

edit: noticed you said what text you wanted in the post - should the two-word button text-wrap to maintain correct width and look?

[lipos]

OK, let me pu it this way :)
I have something like this:
http://img383.imageshack.us/img383/5418/cssproblembt0.png

I will like to have something like this: (I'm sending a picture of how this picture is cut and how the text is formed in design file)

http://img120.imageshack.us/my.php?image=cssproblem2lh1.png
I will like to stick to design file when it comes to text looks.

Below are the areas that I mention, I will like to generate the width with CSS for each text. I don't need any borders in there. ( this is only an example :) ). The areas would be similar for every "text line" and would be placed under the light ball. If the areas width would be set properly the menu will look as in the design file. Generally, I don't know how to generate the fixed width for the text fields/areas using CSS.

http://img339.imageshack.us/my.php?image=cssdesignis8.png

The light balls could light up, but don't have to. The problem is that this is the Joomla project and all I can do is work with the CSS file.

This is the part of the code of index.php that's generated by Joomla.

http://img168.imageshack.us/my.php?image=cssdesign2mk2.png

As you can see class mainmenu-nav is formatting the links.

I'm sorry if this is confusing, I'm trying to explain this problem as best as I can :) Thank you for your help.

[Centauri]

The generated table-based layout is one with which I never use (prefering semantically correct use of html), but the following should work (or give at least a start point. To set a width, the <a> tags will need to be displayed as blocks, and will require to be floated to put them on the same line. Something like this should work:
a.mainlevel-nav {
float: left;
display: inline;
width: 150px;
text-align: center;
padding: 5px 0;
text-decoration: none;
font-size: 11px;
color: black;
margin-right: 10px;
}
a.mainlevel-nav:hover {
color : #777777;
}

Change the blue highlighted text to suit.

edit: although I said block display, the code above shows inline display - this is for the benefit of IE6 - all other browsers ignore the inline display as floated elements are block level by default.