Jump to content

Блочная верстка. Выравниваем список по ширине.

Great Rash

By Great Rash,
in Tricks and solutions

 Share

Recommended Posts

Great Rash Explorer

Great Rash

Posted
Posted

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

Довольно часто, при верстке "резиновой" странички, возникает необходимость выровнять список со ссылками (допустим меню) по ширине. Казалось бы без таблиц тут никак не обойтись... Однако, около месяца назад (когда кто-то на форуме озадачился этой проблемой) я придумал довольно простое кроссбраузерное решение без использования таблиц. Без лишних слов привожу код:

<!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" xml:lang="en" lang="en">

<head>
	<title>Test</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 11px "Trebuchet MS", Verdana, Tahoma, sans-serif;
		}

		ul {
			list-style: none;
			text-align: justify;
			text-justify: newspaper;
			line-height: 0;
		}

		li {
			display: -moz-inline-box;
			display: inline-block;
			vertical-align:top;
			text-align: center;
			background: red;
		}

		li.helper {
			width: 100%;
			background: none;
		}
	</style>

	<!--[if lte IE 7]>
		<style type="text/css">
			ul {
				width: 99.9%;
				text-align-last: justify;
			}

			li {
				display: inline;
			}

			li.helper {
				display: none;
			}
		</style>
	<![endif]-->
</head>

<body>

	<ul>
		<li>home</li>
		<li>about us</li>
		<li>contacts</li>
		<li>some other link</li>
		<li class="helper"></li>
	</ul>

</body>
</html>

Проверял в браузерах:

Internet Explorer 6

Internet Explorer 7

Internet Explorer 8

Opera 10.10

Mozilla Firefox 3.6.3

Google Chrome 4.1.249

Apple Safari 4.0.5

Предложения, замечания, критика и грубая лесть приветствуются :)

  • Like 1
Link to comment
Share on other sites
  • 3 weeks later...
  • 2 weeks later...
SelenIT Explorer

SelenIT

Posted
Posted (edited)

Обалдеть! Я был уверен, что IE-шный (ниже 8-го) "шибко умный" парсинг списков (съедающий пробелы между LI и переносящий их внутрь) ничем не пробить, а поди ж ты - "комбо" из text-justify: newspaper и hasLayout-а для UL совершают чудо и "принуждают его к сотрудничеству". Мегареспект и гиперуважуха! Если не секрет, как удалось узнать об этих магических нестандартных свойствах?

И еще пара-тройка вопросов:

1) Что дает text-justify: newspaper; для не-IE7-?

2) Зачем понадобилось вырубать хелпер и добавлять правило для последней строки (text-align-last) для IE7-, не проще ли оставить хелпера на своем месте и обойтись магией одного лишь text-justify (я наскоро проверил в IE7/WinXP - вроде работает)?

3) Width:99.9% нужен только для включения лейаута (т.е. его можно легко заменить привычным и безопасным zoom:1) или где-то этот один пиксель реально спасает от гориз. скроллинга?

Edited by SelenIT
Link to comment
Share on other sites
Great Rash Explorer

Great Rash

Posted
  • Author
Posted
Если не секрет, как удалось узнать об этих магических нестандартных свойствах?

Усиленно гугля набрел на страницу на MSDN где они были описаны. После этот подвиг повторить не удалось (даже при помощи гугля - запрос не вспомнил), найти что-то на MSDN без помощи гугля нереально :lol:

Что дает text-justify: newspaper; для не-IE7-?

Вообще это свойство работает в 7 и 8 ИЕ, кажись (точно не помню), плюс это свойство описано на сайте W3C, так что рано или поздно остальные браузеры его будут поддерживать.

Зачем понадобилось вырубать хелпер и добавлять правило для последней строки (text-align-last) для IE7-, не проще ли оставить хелпера на своем месте и обойтись магией одного лишь text-justify (я наскоро проверил в IE7/WinXP - вроде работает)?

Ох, это так давно было... я точно не помню (пробовал все подряд - методом тыка), но по моему в ИЕ6 у меня просто text-justify не заработал.

Width:99.9% нужен только для включения лейаута (т.е. его можно легко заменить привычным и безопасным zoom:1) или где-то этот один пиксель реально спасает от гориз. скроллинга?

Этот пиксель реально спасает, просто зум не сработал.

P.S.

Я вообще в IETester'е все проверял, так что в настоящем ИЕ6 все может отличаться. Может что-то там работает.

Если найдете на MSDN описания этих свойств прошу киньте ссылку - там много других интересных ИЕ'шных свойств было с приставкой -ms...

P.P.S.

Прикиньте, нашел только что по запросу "CSS microsoft"! :D

http://msdn.microsoft.com/en-us/library/ms531207(VS.85).aspx

Link to comment
Share on other sites
SelenIT Explorer

SelenIT

Posted
Posted

Про MSовские расширения стандартов еще есть относительно свежая подборка ссылок в IE-блоге.

text-justify, не спорю, входит в CSS3 Text module, но вот конкретное значение "newspaper" - насколько я могу судить, чистая отсебятина MS...

Я имел в виду такой вариант:

	<!--[if lte IE 7]>
		<style type="text/css">
			ul {
				zoom: 1;
				text-justify: newspaper; /* а из общих стилей убрать */
			}

			li {
				display: inline;
				zoom: 1; /* для полной эмуляции inline-block */
			}
		</style>
	<![endif]-->

У меня в IE7 и IE6 standalone работает...

Link to comment
Share on other sites
Great Rash Explorer

Great Rash

Posted
  • Author
Posted

Да согласен, newspaper - отсебятина. Тогда надо добавить в общие стили text-align-last: justify; т.к. уж это правило точно есть в спецификации.

У меня в IE7 и IE6 standalone работает...

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

И спасибо за дополнения, думаю, они всем пригодятся! :lol:

Link to comment
Share on other sites
SelenIT Explorer

SelenIT

Posted
Posted

Сорри, я тут поэкспериментировал и сам понял, зачем нужно прятать helper (и, соотв-но, добавлять text-align-last) для IE: без него в IE6 хелпер (даже ужатый и обрезанный до 0px по высоте) отпихивает нижнюю границу контейнера (т.е. ul {line-height: 0} по факту не срабатывает, это видно, если задать фон для ul). Так что упростить решение на практике не удалось.

Еще раз спасибо за замечательный и поучительный пример!

Link to comment
Share on other sites
  • 3 months later...
SelenIT Explorer

SelenIT

Posted
Posted (edited)

Сегодня на Хабре обсуждают жуткое решение этой же задачи с лишними обертками (и без всякой магии), один из комментов натолкнул на мысль, как всё-таки можно усовершенствовать решение Great Rash. Кажется, получилось! В архаике, правда, не проверял (кроме IE6), но в мало-мальски актуальных релизах "большой пятерки" полет нормальный. Главное улучшение — в полном отказе от несемантичного блока .helper, который для IE (где работает text-align-last) не нужен, а в остальных легко заменяется псевдоэл-том :after. Главные подводные камни, обнаруженные по ходу улучшения, упомянуты в комментах. Буду благодарен за регрешн-тесты и любые другие соображения!

<!DOCTYPE html>
<title>Test</title>
<meta charset="utf-8" />
<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}

	ul {
		list-style: none;
		text-align: justify;
		text-align-last: justify; /* на будущее :) */
		background: #060;
		line-height: 0; /* чтобы перенос последнего псевдоэл-та не добавлял высоты */
	}

	li, ul:after {
		display: -moz-inline-box; /* уже не актуально, можно выбросить */
		display: inline-block;
		vertical-align: top; /* лишь бы не baseline, чтоб не распирало контейнер */
	}

	li {
		text-align: center; /* лишь бы не auto, иначе сносит крышу IE6 - опять мистика! */
		background: #ffc;
		border: 2px solid #ccf;
		padding: 10px;
		line-height: 1.33em; /* или любое др. норм. значение для приятного вида текста */
	}

	ul:after {
		width: 100%;
		height: 0;
		content: '.';
		overflow: hidden;
	}
</style>
<!--[if lte IE 7]>
<style>

	ul, li { zoom: 1; } /* видимо, всё-таки достаточно просто hasLayout-а */

	ul { text-justify: newspaper; }

	li { display: inline; }

</style>
<![endif]-->
<ul>
	<li>home</li>
	<li>about us</li>
	<li>contacts</li>
	<li>some other link</li> <!-- ВАЖНО! Перед закрывающим ul нужен хотя бы один пробел, иначе ломается Webkit! -->
</ul>

UPD: первые грабли (уже знакомые) нашел сам. Если задать UL фон (как в обновленном примере), виден странный отступ снизу в вебкитных. В оригинальном решении он тоже, увы, был, так что это не регрешн. У вебкитов какое-то ограничение на минимальную высоту строки, что ли? Есть идеи, что это может быть и как его бороть, не прибегая к отрицательным маргинам и оберткам с overflow:hidden?

Edited by SelenIT
Link to comment
Share on other sites
SelenIT Explorer

SelenIT

Posted
Posted

Кажется, выяснил, откуда корень бед с Вебкитом: он не позволяет сжать строки текста плотнее, чем на величину очка шрифта (т.е. чтоб буквы слиплись вплотную, но всё-таки остались кое-как различимы). По идее, это должно быть 1ex, но на практике из-за округления цифра скачет, да еще от размера шрифта зависит. Проще всего поставить font-size:1px (c нулем бывают странности) для ul, а для li вернуть какой надо, но это не позволяет использовать em-ы и сквозной размер для всего документа. Без этого ограничения (хотя с другими, имхо менее существенными) у меня получилось так (только стили, разметка та же, строчки для IE6 и FF2 убраны для простоты):

<style type="text/css">
	ul, li {
		margin: 0;
		padding: 0;
	}

	ul {
		list-style: none;
		text-align: justify;
		text-align-last: justify;
		background: #060;
		line-height: .7em; /* гарант. минимальная высота строки, на которую "соглашается" Webkit */
	}

	li, ul:after {
		display: inline-block;
		vertical-align: top; /* или bottom, но не middle и не baseline */
	}

	li {
		background: #f88;
		line-height: 1.4em; /* это минимум общей высоты блока со всеми паддингами/бордерами */
		margin-bottom: -.7em; /* даем псевдоэлементу "нахлестнуться" на блоки на всю его высоту */
		position: relative; /* но приподнимаем блоки над ним, чтоб он не закрывал их от выделения */
	}

	ul:after {
		width: 100%;
		height: 0;
		content: '\00a0';
	}
</style>
<!--[if lte IE 7]>
<style>

	ul, li { zoom: 1 } /* для hasLayout-а */

	ul { text-justify: newspaper; }

	li {
		display: inline;
		margin: 0; /* раз нет псевдоэлемента, то и "нахлест" не нужен */
	}

</style>
<![endif]-->

Имеет право на жизнь, как вариант? Или слишком сложно и негибко?

Link to comment
Share on other sites
SelenIT Explorer

SelenIT

Posted
Posted

Разумеется (через multiple IEs и эмуляцию в IE8). Во втором варианте, правда, я убрал text-align для li (без него IE6 невообразимым образом растягивает слова), но его всегда можно вернуть. А какие еще в IE6-7 проблемы?

Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
Posted
Разумеется (через multiple IEs и эмуляцию в IE8). Во втором варианте, правда, я убрал text-align для li (без него IE6 невообразимым образом растягивает слова), но его всегда можно вернуть. А какие еще в IE6-7 проблемы?

У меня в ИЕ6-7 вообще каша, всё развалено страшно.

А дай ссылочку на рабочий пример. Может я чё не так делаю.

Link to comment
Share on other sites
SelenIT Explorer

SelenIT

Posted
Posted (edited)

Вот залил по-быстрому: http://selenit.freeoda.com/experiments/justify.html

Вместо кондишнл-комментов поставил старые добрые хаки, чтобы IETester'ы/multipleIEs не запутывались. У меня почему-то даже в IE5.5 нормально, может, у меня multipleIEs поломан?..

Edited by SelenIT
Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
Posted

Воо, отлично. Значит это я копировал криво.

Способ мне очень понравился, на хабре привели слишком громоздкий пример, а тут просто сказка, то что надо. Единственный минус - пробел после последнего LI для Вебкита. Но думаю это не так страшно, хотя жаль, что нельзя обойти.

Пример занёс в коллекцию, полюбому пригодится, спасибо огромное :(

Link to comment
Share on other sites
SelenIT Explorer

SelenIT

Posted
Posted

Пробел (или табуляция) не обязательно может быть в этой же строке, может быть на следующей. В изначальном примере Great Rashа этой проблемы не было именно потому, что там лесенка тегов глубже и перед </ul> пробелы были. А я вот решил "компактизировать" и напоролся). Странно, что сам перевод строки не работает, это же тоже пробельный символ, по идее...

Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
Posted
Пробел (или табуляция) не обязательно может быть в этой же строке, может быть на следующей. В изначальном примере Great Rashа этой проблемы не было именно потому, что там лесенка тегов глубже и перед </ul> пробелы были. А я вот решил "компактизировать" и напоролся). Странно, что сам перевод строки не работает, это же тоже пробельный символ, по идее...

Да, по идее перевод строки - это должна быть тестовая нода. Странно, что в Вебките с этим дела не совсем хорошо. Но не смотря на это способ всё равно отличный, вроде бы надёжный, а значит его можно применять смело. :(

Все круто :(

В закладки, обязательно!

Минимум!

Link to comment
Share on other sites
psywalker Explorer

psywalker

Posted
Posted
Я еще не разобрался, но раз все хвалят, то надо будет тоже поэкспериментировать. Не люблю я эти :after если честно... как-то неправильно генерить контент стилями :(

Я тоже не очень люблю, но тут они оправданы. И кода минимум благодаря им :(

Link to comment
Share on other sites
SelenIT Explorer

SelenIT

Posted
Posted
кстати, хороший хостинг?

Еще не разобрался, нашел в гугле впопыхах буквально за 20 мин до того, как залить :(. Интерфейс веб-ФТП показался тормозноватым...

как-то неправильно генерить контент стилями

Так в том-то и дело, что тут это не контент, а всего лишь хелпер, которому как раз не место в контенте. Имхо...

Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept