Пропорциональная ширина у блочных элементов

[photograf]

Есть элементы меню:

 
<div class="panel">
	<a class="tpanel" href="#">главная</a>
	<a class="tpanel" href="#">о нас</a>
	<a class="tpanel" href="#">продукция</a>
	<a class="tpanel" href="#">наши услуги</a>
	<a class="tpanel" href="#">партнеры</a>
	<a class="tpanel" href="#">контакты</a>
 </div>

их описывают свойства CSS:

  
.tpanel{
  display: block;
  float: left;
  padding: 20px 20px;
  text-transform:uppercase;
  width:100px;
  height:20px;
  vertical-align: middle;
  margin-top: 39px;
}

и все это вложено в wrap {width:900px}

Вопрос заключается в следующем:

Если оставить как есть, то из-за разного текстового наполнения ( "о нас" меньше чем "наши услуги") возникает визуальный широкие пробел между блоками.

Подскажите или натолкните на мысль - как сделать так, чтобы пустое расстояние между ними было визуально равное.

P.S. понятно, что можно ручками указать каждому отдельному размер и таким образом выровнять их, но возможно есть более элегантное и красивое решение?

P.P.S. решил добавить картинку для большей наглядности:

Edited March 8, 2011 by photograf

[swetlana]

а зачем им вообще display: block?

пусть остаются инлайновыми.

если нужно, чтобы высота была 60px, то можно же сказать line-height: 60px; а заодно и white-space:nowrap, чтобы случайно не упало в две строки и не накосячило в высоту.

[psywalker]

1. Меню надо делать на списках UL-LI

2. Можно между пунктами поставить одинаковые отступы. Не вижу тут проблем.

[swetlana]

и ещё: зачем каждой ссылке писать class="tpanel"? это ж лишний мусор (если только нет более глубокой задумки). Их и так можно опознать по родителю.

  psywalker said:

1. Меню надо делать на списках UL-LI

традиционно так принято, но ведь не обязательно. Просто <nav> с набором ссылок тоже вполне семантичен.

[psywalker]

  swetlana said:

традиционно так принято, но ведь не обязательно. Просто <nav> с набором ссылок тоже вполне семантичен.

Ещё немножко, и я буду с вами соглашаться. Вы почти победили

[photograf]

У меня еще есть такой кусок:

a.tpanel {
		 text-decoration: none;
		 color: #000000;
		 text-align: center;
		}

a.tpanel:hover{
	   background: #0BB7FF;
	   color:#FFFFFF
	 }

Поэтому и присваивал для каждого <a> класс

Edited March 8, 2011 by photograf

[swetlana]

этот кусок ни в коей мере не объясняет лишнего кода.

[photograf]

Ушел медитировать =)

Спасибо)

[SelenIT]

  Quote

как сделать так, чтобы пустое расстояние между ними было визуально равное

Это не поможет?

[wanntuzz]

это не такой код, там таблица должна быть

[photograf]

http://photograf.h18.ru/

Внешний вид у страницы должен быть вот такой. Кроме, как я уже говорил, пробелов между кнопками меню.

Ага, там и есть таблица. Где-то глубоко внутри. Очень глубоко.

Только ручками кодировку надо указать UTF-8, а то у них передается браузеру по-умолчанию 1251

Edited March 11, 2011 by photograf

[photograf]

Решил min-width: 80px; вместо заданой ширины

пробелы между пунктами стали одинаковыми