Jump to content
  • 0

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

Juice

Asked by Juice,

 Share

Question

Juice Explorer

Juice

Posted
Posted (edited)

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

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

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

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

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

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

61e3202ca756.png

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

15005d9c6b47.jpg

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 by Juice
Link to comment
Share on other sites

13 answers to this question

Recommended Posts

  • 0
Juice Explorer

Juice

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

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

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

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

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

Edited by Juice
Link to comment
Share on other sites
  • 0
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" 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>

Link to comment
Share on other sites
  • 0
Juice Explorer

Juice

Posted
  • Author
Posted (edited)

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

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

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

Edited by Juice
Link to comment
Share on other sites
  • 0
Great Rash Explorer

Great Rash

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

Можно.

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

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

Link to comment
Share on other sites
  • 0
Juice Explorer

Juice

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

«nobr» на htmlbоok.ru

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

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

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

Edited by Juice
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question 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