Question

I have menu, that is on two different languages.My problem is that, on each of the languages, the names of the links in the menu, are different length because of the language differences , so what i’m trying to say is.. how can i set the menu to be resized and look like the same on each of the two languages.Because for example :

Lang 1:

Home | About us |

Lang 2:

Αρχική σελίδα | Εταιρεία |

You can see the differences in the length.

Answer 1

I suppose each item is wrapped in an anchor element like this:

<a href="#" class="class">Home</a>

Give the links or their container a certain class and then use that to set the items to a specified width.

a.class { width: 50px; border-right: 2px solid #000; display: block-inline; }

For display:block-inline; see comment.

A common way of building menus is wrapping each anchor element in a list item. Like this:

<ul id="menu">
    <li><a href="#"></a></li>
    <li>...</li>
    <div class="clear"></div>
</ul>

And then targeting list items like this:

#menu li { width: 50px; float: left; }
.clear {clear: both;}

In this scenario you’ll need to know how to work with floats (e.g. why do I need to have that div with clear on it at the end of the list?), but you won’t have the problem with the not so well supported display type “inline-block”