Горизонатльное меню с равными по ширине пунктами в процентах без таблиц

KooL · March 23, 2011

Никак не соображу откуда в Хроме, Сафари, Опере и IE 6 берётся отступ в последнем пункте. В IE 7 и 8 нормально, в ФФ 3.6 и 4 тоже.


/*тут куча тегов*/{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
body {
	width: 100%;
	max-width: 960px;
	font: 14px/18px Arial, Helvetica, sans-serif ;
	margin: auto;
}
ul {
	border: 3px solid #f60;
	overflow: hidden;
	zoom: 1;
	margin: 6px 0;
	background: #f90;
	font: 16px;
}
li {
	float: left;
	width: 20%;
}
a:link {
	color: #000;
}
a:visited {
	color: #c30;
}
li a {
	text-align: center;
	display:block;
	border-left: 1px solid #f60;
	padding: 6px;
	background: #f90;
}
li a:hover {
	background: #fc0;
}
#fc {
	margin-right: -1px;
}

		<ul>
			<li id="fc"><a href="#">Страница 1</a></li>
			<li><a href="#">Страница 2</a></li>
			<li><a href="#">Страница 3</a></li>
			<li><a href="#">Страница 4</a></li>
			<li><a href="#">Страница 5</a></li>
		</ul>

Кстати, что делать, если таких пунктов, скажем, 3?

Edited March 23, 2011 by KooL

psywalker · March 23, 2011

1. Отступ скорее всего из-за этого

ul {

margin: 6px 0;

}

2. Вот такая запись не катит

font: 16px;

Укажи хотябы семейство ещё.

3.

Кстати, что делать, если таких пунктов, скажем, 3?

Каких таких?

mishaga · March 23, 2011

Нет, отступ не оттуда.

Все дочерние элементы списков UL и OL по умолчанию имеют отступ.

Этот отступ задаёт сам список свойством padding, а не элемент списка свойством margin или padding.

Смотри код

<!DOCTYPE html>
<html>
<head>
<title>one two three</title>
<style>

ul {
	margin-left: auto;
	margin-right: auto;
	border: 3px solid #f60;
	background: #f90;
	font-size: 16px;
	/* вот эту строчку надо было вставить */
	padding: 0;
}
ul li {
	display: inline-block;
	margin-left: 0px;
	margin-right: 0px;
}
li a {
	color: #000;
	background-color: #f90;
	text-align: center;
	padding: 6px;
	display: block;
}
li a:hover {
	background: #fc0;
}
</style>
</head>
<body>
<ul>
	<li><a href="#">Страница 1</a></li>
	<li><a href="#">Страница 2</a></li>
	<li><a href="#">Страница 3</a></li>
	<li><a href="#">Страница 4</a></li>
	<li><a href="#">Страница 5</a></li>
</ul>
</body>
</html>

psywalker · March 24, 2011

Ааа, ты про боковые чтоли отступы? Я то думал, что внешние отступы снизу от UL

mishaga · March 24, 2011

ХЗ, я тоже не до конца понял, что хочет KooL, но посмотрев пример, догадался, что речь идёт о беспонтовом отступе слева.

Может, я и неправильно понял =)

rus · March 24, 2011

чет не понял, случайно не это нужно?

KooL · March 24, 2011

Так выглядит в IE 6, Сафари, Хроме, Опере:

http://i18.fastpic.ru/big/2011/0324/29/bb42f6f41de2c83141699490698d7b29.png

А так в IE 7, 8 и ФФ 3.6, 4:

http://i18.fastpic.ru/big/2011/0324/43/1dca182db03bd2174935227bfdf1bd43.png

Виден отступ в пятом пункте, с остальными пунктами везде всё хорошо.

2. Вот такая запись не катит
font: 16px;

Да это я так уж, главное данный вопрос с отступом)

Каких таких?

Т.е. если три пункта, то уже на целое число процентов не поделишь.

Нет, отступ не оттуда.
Все дочерние элементы списков UL и OL по умолчанию имеют отступ.
Этот отступ задаёт сам список свойством padding, а не элемент списка свойством margin или padding.
Смотри код

Так у меня все сброшено в стилях, в самом начале кода идёт это.

чет не понял, случайно не это нужно?

Видел эту тему, скопировал код, не понятно что выходит. В Опере так:

http://i18.fastpic.ru/big/2011/0324/b6/eb49e60d825a84be2d08fbc2048351b6.png

В IE 8 так:

http://i18.fastpic.ru/big/2011/0324/72/97b07a0d966a7b5bc263dc689083b172.png

psywalker · March 24, 2011

ТС. Дай ссылку на страницу с примером.

Есть дробные %, но не пашут в Опере.

SelenIT · March 24, 2011

Видел эту тему, скопировал код, не понятно что выходит. В Опере так: ... В IE 8 так: ...

В IE8 случайно режим совместимости никакой не включен? И какая версия Оперы?

KooL · March 24, 2011

ТС.

Это что?

Дай ссылку на страницу с примером.

Пока нет возможности залить куда-то нормально. Весь код выше всё равно, кроме очевидных вещей типа <head>.

Есть дробные %, но не пашут в Опере.

Вот как раз в Опере и беда.

В IE8 случайно режим совместимости никакой не включен? И какая версия Оперы?

Нет, не в режиме совместимости. Опера 11.01.

KooL · March 25, 2011

Я так и не понял, откуда берётся отступ, который ещё и есть в некоторых браузерах, а в некоторых нет, ладно было бы только в одном или наоборот. А решение проблемы придумал сам:

/*тут куча тегов*/ {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*———————*/
body {
	width: 100%;
	max-width: 960px;
	font: 14px/18px Arial, Helvetica, sans-serif;
	margin: auto;
}
ul {
	border: 3px solid #f60;
	overflow: hidden;
	zoom: 1;
	margin: 6px 0;
	background: #f90;
	font-size: 16px ;
}
li {
	float: left;
	width: 20%;
}
a:link {
	color: #000;
}
a:visited {
	color: #c30;
}
li a {
	text-align: center;
	display:block;
	border-left: 1px solid #f60;
	padding: 6px;
	background: #f90;
}
li a:hover {
	background: #fc0;
}
#fc {
	margin-right: -1px;
}
#lastLi a{
	padding-right: 40px;
	margin-right: -40px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Страница №1</title>
		<link rel="stylesheet" media="all" type="text/css" href="css.css">
	</head>
	<body>
		<ul>
			<li id="fc"><a href="#">Страница 1</a></li>
			<li><a href="#">Страница 2</a></li>
			<li><a href="#">Страница 3</a></li>
			<li><a href="#">Страница 4</a></li>
			<li id="lastLi"><a href="#">Страница 5</a></li>
		</ul>
	</body>
</html>

Код не оптимизирован и не идеален, потом всё подправлю, метод прогрессивного джепега.

Edited March 25, 2011 by KooL

mishaga · March 25, 2011

Вместо отдельных id в html и отдельными стилями вида #lastLi можно воспользоваться псевдоклассами :firstchild :lastchild

KooL · March 25, 2011

Спасибо, но IE 6 не согласен с этим.

psywalker · March 25, 2011

Спасибо, но IE 6 не согласен с этим.

Да вобщет ИЕ6-8 с этим не согласны также

KooL · March 25, 2011

:first-child только IE 6, а вот :last-child вся бригада, кроме новоиспечённой девятки)

psywalker · March 25, 2011

:first-child только IE 6, а вот :last-child вся бригада, кроме новоиспечённой девятки)

Именно!

Sign In

Горизонатльное меню с равными по ширине пунктами в процентах без таблиц

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information