Методика вёрстки горизонтальных меню с текстом

[clavin]

Допустим есть некое горизонтальное меню в виде макета. Меню на макете занимает какую-то фиксированную ширину, но в реальном HTML-документе, оно конечно же может становиться или шире или уже в зависимости от размеров шрифтов у пользователя. Все элементы меню надо делать текстовыми.

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

Обычно в Firefox, когда изменяешь размеры шрифта, то такие меню просто разваливаются и становятся бесполезными. Бэкграунд у элементов данного меню остаётся на месте или где-то около того, а текст уезжает в сторону, переносится на новую строку и всплывают другие подобные некрасивости.

Может такие меню следует делать фиксированным шрифтом, отдельно от всего содержания страницы, чтобы оно не портилось? Есть универсальное решение?

Я пока вижу одно из возможных решений, это делать все размеры меню относительными (относительно размеров шрифта в em), но такой способ тоже не всегда работает, так как если ширина меню увеличится сильно, то его элементы начнут переезжать на следующую строку.

p.s.

Как я понимаю, способ верстать все элементы меню как inline-block не очень подходит, так как такой способ очень зависим от шрифтов. Возможно делать элементы блочными и со свойством float лучше. Какие-то идеи по этому поводу?

Edited May 6, 2011 by clavin

[psywalker]

Ну почему-же? Можно делать вкладки с запасом, щас покажу свою работу, как пример: http://psywalker.ru/Portfolio/BestHome/main-page.html

[clavin]

http://psywalker.ru/Portfolio/BestHome/main-page.html

Это меню вообще с помощью позиционирования сделано, учитывая, что в центре есть элемент, который всегда нужно по центру выдерживать. И у текста есть возможность увеличиваться, что не всегда присуще меню

[psywalker]

http://psywalker.ru/Portfolio/BestHome/main-page.html

Это меню вообще с помощью позиционирования сделано, учитывая, что в центре есть элемент, который всегда нужно по центру выдерживать. И у текста есть возможность увеличиваться, что не всегда присуще меню

Ну я тебе просто идею подкинул. Чтобы ты суть понял. Просто делай всегда запас.

[EnvIT]

Я пока вижу одно из возможных решений, это делать все размеры меню относительными (относительно размеров шрифта в em), но такой способ тоже не всегда работает, так как если ширина меню увеличится сильно, то его элементы начнут переезжать на следующую строку.

p.s.

Как я понимаю, способ верстать все элементы меню как inline-block не очень подходит, так как такой способ очень зависим от шрифтов. Возможно делать элементы блочными и со свойством float лучше. Какие-то идеи по этому поводу?

Я пока что отталкиваюсь от интерфейсов и делаю так (IE 8+):

		<div class="nav">
			<a href="#">
				<span>Пункт навигации</span>
			</a>
			<a href="#">
				<span>Пункт навигации</span>
			</a>
			<a href="#">
				<span>Пункт навигации</span>
			</a>
			<a href="#">
				<span>Пункт навигации</span>
			</a>
			<a href="#">
				<span>Пункт навигации</span>
			</a>
			<a href="#">
				<span>Пункт навигации</span>
			</a>
			<form class="search" action="" method="">
				<input type="text" value="Что ищем?" />
				<input type="reset" value="x" />
				<input type="submit" value="Искать" />
			</form>
		</div>

где div.nav в будущем будет заменен на nav из html5

body, div, a, form, input {
	box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

div.nav {
	height : 1%; 
	overflow : hidden;

	margin : 2px;
	padding : 6px 2px;

	background-color : #eee;

	border-width : 1px;
	border-style : solid;
	border-color : #d1d1d1;
	border-radius:3px;
} 

div.nav a {
	float : left;

	margin : 0 3px;
	padding : 2px 6px;

	border-width : 1px;
	border-style : solid;
	border-color : transparent;
	border-radius : 3px;
}

div.nav a:hover, div.nav a:focus {
	background-color : #f9f9f9;
	border-color : #d1d1d1;
}

div.nav a span {
	white-space : nowrap;
	color : #333;
	font-size : 12px;
	line-height : 14px !important ;
	font-family : Tahoma, Arial, sans-serif;
}

div.nav form.search {
	float:right;
	height:24px;
	overflow:hidden;

	margin:0 3px; 
	padding:0;
}

div.nav form.search input {
	display:block;
	float:left;

	margin:0;
	padding:0 6px;

	border-style: solid;
	border-color: #D1D1D1;

	color: #666;
	font-family:Tahoma, sans-serif; 
	font-size:11px;

}
div.nav form.search input[type="text"]  {
	height:24px;

	border-width:1px;

	line-height:22px !important; /* fix-bug in ie7 */
}

div.nav form.search input[type="reset"] {
	border-width:1px 1px 1px 0;
}

div.nav form.search input[type="submit"] {
	width:49px;

	border-width:1px 1px 1px 0;
	border-top-right-radius:3px;
	border-bottom-right-radius:3px;
}

div.nav form.search input[type="submit"], div.nav form.search input[type="reset"] {			
		cursor:pointer;

		height:24px;

		background-color: #E7E7E7;
		background-image: none;	
}

div.nav form.search input[type="submit"]:hover, div.nav form.search input[type="submit"]:focus,
div.nav form.search input[type="reset"]:hover, div.nav form.search input[type="reset"]:focus {
	border-color: #B0CCF2;
	background-color: #C6DCF6;
}

При масштабировании элементы съезжают, решается с помощью js. Суть в том, чтобы динамически сравнивать размеры div.nav и внутренних элементов, если они не умещаются, делаем то, что делают в windows 7. Создаем после последнего помещающегося элемента выпадающее меню, в которое помещаем наши не поместившиеся ссылки.

Вот собственно сейчас прорабатываю элемент из html5 <nav>, к которому всегда будет добавляться скрипт из библиотеки...)