2 проблемы при верстки меню

Juice · August 17, 2010

Здравствуйте.

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

Увидел на сайте меню с помещенными поверх текста полупрозрачными png картинками. Решил попробовать

ссылку в строку браузера, если не отображается картинка

Быстренько накидал такое вот текстовое меню. На цифрах сделал градиентную png картинку вот такую

В итоге поместить градиентный png, вроде, получилось с помощью абсолютного позиционирования. И вроде все хорошо было, и hover работает, но вот проблема -

1. Не могу отцентрировать текст по высоте строки(пункт помечен галочкой).

2. И не получается убрать выступ(помечен галочкой) - выступ если пункт меню состоит больше чем из одной строки). К какому виду хочу привести - обведено красной линией

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

Буду благодарен за полезные мысли.


<style type="text/css">
body
{
	font-family:"Times New Roman", Times, serif;
	font-size:16px;
}
.inline
{
	overflow:hidden;
	display:block;
	position:relative;
}
.menu
{
	margin: 0px;
	padding: 0px;
	margin-left: 27px;
}
.menu li
{
}
.num
{
	font-family: "Times New Roman", Times, serif;
	font-size: 1.4em;
	color:#999;
	font-weight:bold;
	vertical-align: middle;
}
.inline a span.span_bg
{
position:absolute;
width:22px;
height:22px;
top:4px;
left:0;
background:transparent url(mask.png) no-repeat left bottom;
}
.menu_link
{
	margin-left: 10px;
	letter-spacing:0px;
}
.bpx
{
	border: 1px solid #000;
}

a, a:visited
{
	color:#000;
	text-decoration:none;
}
a:hover, a:hover span
{
	color:#CC0;
}
.tt
{
	vertical-align:middle;
	line-height:1.5;
}
</style>
<div>
<ul class="menu">
	<li><div class="inline tt"><a href="#"><span class="num">01</span><span class="menu_link tt">In nascetur porta</span><span class="span_bg"></span></a></div></li>
</ul>
</div>

P.S. В самом начале сбрасывал css стили на дефолтные (не * { margin: 0; padding: 0; })

Edited August 17, 2010 by Juice

npofopr · August 17, 2010

у меня ваши картинки не отображаются. вернее скрыты почему то %)

Juice · August 17, 2010

npofopr said:
у меня ваши картинки не отображаются. вернее скрыты почему то %)

У меня получается вставкой ссылки, которая рядом с картинкой, в адресную строку.

Обычный переход по ссылке почему то перебрасывает на главную страницу хостинга.

Какая-то хрень с хостингом моим

Забросил на Радикал. Исправил ссылки в первом посте

Edited August 17, 2010 by Juice

Great Rash · August 18, 2010

Ну и что это за обрезок кода вы привели?

Juice · August 18, 2010

Great Rash said:
Ну и что это за обрезок кода вы привели?

Это мысли на бумаге, а точнее на экране, как я думал решить задачу

stars · August 19, 2010

Чето я еще не проснулся, вам по всей видимости нужен vertical-align

Edited August 19, 2010 by stars

Great Rash · August 19, 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" lang="ru">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />

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

		html {
			font-size: 100.1%;
		}

		body {
			margin: 10px;
			font: 62.5% Arial, Tahoma, Verdana, sans-serif;
		}

		ul {
			width: 10%;
			list-style: none;
			white-space: nowrap;
		}

		ul span {
			vertical-align: middle;
		}

		.text {
			display: inline-block;
			white-space: normal;
		}
	</style>
</head>

<body>

	<ul>
		<li>
			<span class="num">01</span>
			<span class="text">Some large text Some large text Some large text Some large text Some large text Some large text Some large text Some large text </span>
		</li>
	</ul>

</body>
</html>

Juice · August 19, 2010

Мда...логика хромает у меня . Вообще мозги заплыли жиром. Начал велосипед изобретать.

Тогда один маленький вопрос: один в другой <span> можно вкладывать? Я реализовал "полупрозрачный png поверх текста" именно так.

P.S. хм... в IE6 блок текста переносится ниже номера пункта

Edited August 19, 2010 by Juice

Great Rash · August 19, 2010

Quote
Тогда один маленький вопрос: один в другой <span> можно вкладывать? Я реализовал "полупрозрачный png поверх текста" именно так.

Можно.

Quote
P.S. хм... в IE6 блок текста переносится ниже номера пункта

Походу ИЕ6 не поддерживает inherit для white-space, попробуйте задать white-space: nowrap; для <li>

Juice · August 19, 2010

Да, глянул в документацию - не поддерживет до IE7

Попробовал li white-space nowrap

Great Rash · August 19, 2010

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

«nobr» на htmlbоok.ru

Juice · August 19, 2010

Great Rash said:
Ну если уж ИЕ6 такой тупой, то можно специально для него заюзать nobr через условные комментарии.
«nobr» на htmlbоok.ru

Либо у меня руки кривые, либо что-то случилось

Да, в одну строку, но IE6 не приклонен - тот же сдвиг текста

P.S. В dreamweaver cs4 тега nobr вообще нет, зато откуда не возьмись появился norb Продолжаю ломать мозг себе

Edited August 19, 2010 by Juice

Great Rash · August 19, 2010

Да, в ИЕ баг. Не лечится нифига. Т.е. лечится только если задать много места, чтоб для переносов повода не было.

Juice · August 19, 2010

"люблю" IE6...

7ой тоже криво отображает

Sign In

2 проблемы при верстки меню

Question

Link to comment

Share on other sites

13 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

Join the conversation

Обсуждения

Important Information