Горизонтальный список блоками в IE и не только)

d0ublezer0 · July 23, 2010

Вот

В IE7 выводится вертикально.

LI делаю блоками, потому что они должны ограничивать ширину внутренних элементов

li inline не помогает

Что не так?

Как-то я криво сверстал, а где накосячил - не пойму, пятница видимо

И еще, бонусом вопрос - как убрать подчеркивание у текста в круге?

text-decoration не помогает

Вариант - смысловой текст ссылки в spаn - и уже ему назначать подчеркивание а самой ссылке установить text-decorationЖтщту

В общем, ребята, если подкинете совет, то буду признателен.

psywalker · July 23, 2010

1) .checkout_bar em {

display:block;

width:63px;

height:63px;

margin:5px auto;

background:url("basket_count_step.png ") no-repeat 0 -63px;

overflow:hidden;

float: left;

}

2 )text-decoration: none; работает отлично, наверно и правда пятница)

Great Rash · July 23, 2010

Когда задаете для inline-элемента display: block; в ИЕ 6,7 элемент растягивается 100% независимо от того есть ли float у контейнера (да, он такой тупой...). По-моему это лечится добавлением zoom: 1; (или на крайняк скажите ссылке float: left;)

text-decoration не помогает

Все помогает, не врите...

d0ublezer0 · July 23, 2010

при float:left не отрабатывает margin:5px auto - кружок прибивается к левому краю

и text-decoration всё же не работает - подчеркивание у цифры и слова "шаг" остается

Ну вот посмотрите еще раз, сделал как волкер посоветовал

Edited July 23, 2010 by d0ublezer0

Great Rash · July 23, 2010

и text-decoration всё же не работает - подчеркивание у цифры и слова "шаг" остается

Ну и где text-decoration: none; у ссылки?

d0ublezer0 · July 23, 2010

В том вся соль - у ссылки (у текста над кнопкой) должно быть подчеркивание, а в круге его быть не должно.

Извините, сразу не пояснил.

Great Rash · July 23, 2010

Сделайте 2 отдельных элемента:

<li class="active">
	<a href="www.site.ru">Адрес доставки</a>
	<a href="www.site.ru" class="no-underline"><em><i>1</i><b>шаг</b></em></a>
</li>

psywalker · July 23, 2010

<span>Адрес доставки</span> помести слова в спан и сделай его блочным

d0ublezer0 · July 23, 2010

<span>Адрес доставки</span> помести слова в спан и сделай его блочным

Да, я уже догадался до этого, еще в первом посте описал возможное решение.

Я немного переверстал всё, убрал лишнее. Страничку обновил, для интересующихся.

Всё равно остаются проблемы.

При em с флоатом элемент прибивается к левому краю, и по центру (margin: 0 auto;) не выравнивается.

Да, и в IE7 em не считается ссылкой (ну, то что он внутри ссылки), нажать на него нельзя. Почему так? Из-за его блочности?

Edited July 23, 2010 by d0ublezer0

Great Rash · July 23, 2010

Покажите картинку того, что нужно получить, иначе мы так и будем тыкаться туда-сюда...

psywalker · July 23, 2010

Скоро освобожусь, попробую решить твою задачу, самому интересно стало.

Great Rash · July 23, 2010

Да, и в IE7 em не считается ссылкой (ну, то что он внутри ссылки), нажать на него нельзя. Почему так? Из-за его блочности?

Из-за того, что ИЕ7 - недобраузер.

d0ublezer0 · July 23, 2010

Да, собственно там визуально ничего сложного:

Вывести список горизонтально. В списке может быть ссылка, а может быть просто текст. В каждом элементе списка присутсвует графическое изображение - кружок такой зеленый ) Нужно выровнять весь текст в каждом элементе списка по центру этого элемента.

Название шага должно располагаться сверху от кружка.

Активная область ссылки (если ссылка присутствует) должна охватывать и сам кружок, то есть чтобы он тоже нажимался.

И как бы всё это кроссбраузерно.

На самом деле я бы уже давно забил и на IE7 и на возможность нажимать кружки, и сделал бы проще.

Но - азарт и жажда победить уже не дают покоя.

psywalker · July 23, 2010

Короче сделал, лично у меня работает отлично везде.

<!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>Документ без названия</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	ul { list-style: none;}
		ul li { float: left; margin: 0 10px;}
			ul li a { 
				float: left;
				text-align: center;
				border: 1px solid #000;
				text-decoration: none;

			}
				ul li a span { display: block;}
				ul li a em { 
					display: inline-block;
					margin: 5px auto;
					width: 63px;
					height: 63px;
					background: url(basket_count_step.png) top center no-repeat;
					position: relative;
					z-index: -1;
				}
					ul li a em i { display: block;}
</style>
</head>

<body>
	<ul>
		<li>
			<a href="#">
				<span>Пункт 1 Длинный</span>
				<em>1<i>шаг</i></em>
			</a>
		</li>
		<li>
			<a href="#">
				<span>Пункт 1</span>
				<em>1<i>шаг</i></em>
			</a>
		</li>
		<li>
			<a href="#">
				<span>Пункт 1</span>
				<em>1<i>шаг</i></em>
			</a>
		</li>
		<li>
			<a href="#">
				<span>Пункт 1</span>
				<em>1<i>шаг</i></em>
			</a>
		</li>
	</ul>
</body>
</html>

d0ublezer0 · July 23, 2010

Во! Красота!

Щас причешу и выложу на проверку

Спасибо тебе.

Edited July 23, 2010 by d0ublezer0

psywalker · July 23, 2010

Во! Красота!
Щас причешу и выложу на проверку
Спасибо тебе.

Давай, рад был помочь

d0ublezer0 · July 23, 2010

Да, всё отлично.

Кроме нужного мне оформления я еще добавил стили для неактивных пунктов.

psywalker · July 23, 2010

Да, всё отлично.
Кроме нужного мне оформления я еще добавил стили для неактивных пунктов.

Воо, отлично, молодец!

s0rr0w · July 23, 2010

Непонятно только, зачем ul li a, ul li b было присвоено float: left. Это не обязательно.

d0ublezer0 · July 23, 2010

s0rr0w ну попробуй отключить это свойство в Firebug?

Всё улетает сразу

Edited July 23, 2010 by d0ublezer0

psywalker · July 23, 2010

Непонятно только, зачем ul li a, ul li b было присвоено float: left. Это не обязательно.

Да, вместо него можно сделать ссылку просто блочной. Но это вариант минимум помоему.

s0rr0w · July 23, 2010

s0rr0w ну попробуй отключить это свойство в Firebug?
Всё улетает сразу

Попробуйте включать голову. float делает любой элемент блочным. Если не делать float, а сделать display: block, то эффект будет тот же, но будет использовано правильное свойство, а не побочный эффект.

d0ublezer0 · July 23, 2010

Да, согласен.

Sign In

Горизонтальный список блоками в IE и не только)

Question

Link to comment

Share on other sites

22 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

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