Форум Сайтостроение Веб-строительство

CSS и правильная постройка меню с длинными названиями

Z
На сайте с 19.12.2011
Offline
16
Zbt
2184

Привет. Задача передо мной стоит следующая - сверстать меню.

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

Контейнер в котором будет меню ограничен по размеру в пикселях.

Иду стандартным путём: 

	<ul>

		<li><a href="#">Длииинная фраза на две строки</a></li>

		<li><a href="#">About</a></li>

		<li><a href="#">Clients</a></li>

		<li><a href="#">Contact Us</a></li>

       <ul>



li {

	display: inline-block;

	float: left;

	background-color: #ffffff;

	height: 40px;

	width: 150px;

	text-align: center;

	margin-right: 5px;

	padding-top: 15px;

	}

Кнопки получаются одинакового размера, однако проблема заключается в первом пункте с длинной фразой в менюшке.

Как правильно сделать чтоб фраза нормально переносилась на вторую строку, а не с половины слова?

Поставить <br> неправильно.

Joker-jar
На сайте с 26.08.2010
Offline
166
Joker-jar
#1

Если перенести на новую строку, то нарушится же условие "кнопки должны быть одинаковой ширины и высоты"?

[Удален]
#2

Только сделать кнопки длиньше ну тогда нарушится структура. По другому не как. Пробуйте сократить название.

Joker-jar
На сайте с 26.08.2010
Offline
166
Joker-jar
#3

Есть вариант задать нужную ширину, пунктам меню задать стили white-space: nowrap и overflow: hidden. При наведении курсора на пункт меню отображать панельку с полным текстом. Подобное я делал на сайте http://energyprofs.ru/ смотрите пункты блока "Мониторинг прессы" на главной

Google тестирует новый дизайн Поиск по Google Местам Google тестирует новый дизайн
Olldman
На сайте с 21.04.2010
Offline
79
Olldman
#4
Как правильно сделать чтоб фраза нормально переносилась на вторую строку, а не с половины слова?

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

Z
На сайте с 19.12.2011
Offline
16
Zbt
#5

Да в результате проблема оказалась в том что смотрел с непоставленными шрифтами и т.д.

Когда всё сделал, то кнопки вышли нормальные. Высота/ширина фикс и 2 строки нормальный на большой фразе.

[Удален]
#6
Zbt:

display: inline-block;
float: left;

бред какой-то 😕

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий