Резиновое меню

V_R

V_R

Гуру форума
Регистрация
15 Май 2008
Сообщения
247
Реакции
92
Стоит следующая задача: создать меню, которое бы тянулось по всей ширине есть код:
HTML: 
<div class="main-menu">
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">Javascript</a>
    <a href="#">Вебмастеринг</a>
    <img src="blank.gif" width="100%" height="1" alt="" />
</div>
.main-menu {
  text-align: justify !important;
  }
Все хорошо но если пункты меню состоят не из одного слова, то все слова растягиваются равномерно.Есть ли решение подсскажите?
 
Вот что то похожее на то что вам нужно
Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nav</title>
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}
body {
	font: 12px/1.8 Arial, Helvetica, sans-serif;
	background-color: #fff;
	min-width: 980px;
}
ul {
	margin: 0;
	padding: 0;
	float: left;
	width: 100%;
    list-style: none;
}

ul li {
	float: left;
	width: 12%;
}
ul a {
	line-height: 2.1em;
	text-decoration: none;
	color: #000;
	float: left;
	display: block;
	text-align: center;
	border-left: 1px solid #000;
	width: 100%;
}
ul a:hover {
	color: #FF0;
	background: #F00;
}
ul .first a {
	border: none;
}
.container {
	background: #0F0;
	padding-left: 20%;
	overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
  <ul>
    <li class="first"><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Javascript</a></li>
    <li><a href="#">Вебмастеринг</a></li>
    <li><a href="#">News&nbsp;CSS</a></li>
  </ul>
</div>
</body>
</html>
 
Kub спасибо конечно да твое решение работает но:
<li><a href="#">News&nbsp;CSS</a></li>
&nbsp; - не есть хорошо для поисковиков
 
Тогда убираем &nbsp; и дописываем к ul a правило white-space: nowrap;
Код: 
ul a {
	white-space: nowrap;
}
 
Сверстайте таблицей и не парьтесь :)
 
Это резиновое меню обсуждается в этом блоге
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.

Сам автор блога, предлагает решение в виде добавления, &nbsp; между словами, в комментариях пишут о багах в фаерфоксе, если картинка отсутствует.

Да и действительно, чем резиновая таблица не угодила?
Я таблицы очень успешно применяю в блочной joomla, когда переделываю шапки.

От таблиц отказываются лишь по одной причине - это не отображение содержимого таблицы, пока все элементы таблицы не загрузятся, а в меню, то нет тяжёлых элементов в виде фоток и т.п., так что, для меню, таблицы идеально подходят.
 
V_R написал(а):
Стоит следующая задача: создать меню, которое бы тянулось по всей ширине есть код:
HTML: 
<div class="main-menu">
    <a href="#">HTML</a>
    <a href="#">CSS</a>
    <a href="#">Javascript</a>
    <a href="#">Вебмастеринг</a>
    <img src="blank.gif" width="100%" height="1" alt="" />
</div>
.main-menu {
  text-align: justify !important;
  }
Все хорошо но если пункты меню состоят не из одного слова, то все слова растягиваются равномерно.Есть ли решение подсскажите?
Нажмите для раскрытия...
Конечно, в данном случае было бы разумнее использовать резиновую <table>
 
Спасибо всем решение ныйдено
 
HTML
<div id="nav">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Регистрация</a></li>
<li><a href="#">Хостинг</a></li>
<li><a href="#">Домены</a></li>
<li><a href="#">Помощь</a></li>
<li><a href="#">Анализ</a></li>
</ul>
</div>

CSS

#nav ul {
text-align: justify;
overflow: hidden;
height: 20px;
cursor: default;
background: #ffffff;
padding: 5px;
}
#nav li {
display: inline;
}
#nav li a {
display: inline-block;
color: #0000CC;
}
#nav a:hover {
color: #ff0000;
}
#nav ul:after {
content: "1";
margin-left: 100%;
height: 1px;
overflow: hidden;
display: inline-block;
}

Более подробно почитать Для просмотра ссылки Войди или Зарегистрируйся
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху