Подскажите, как лучше сделать

dimacat · August 13, 2010

Здравствуйте ! Нужно сделать горизонтальное меню с разделителями, при этом сверху над надписью должен быть рисунок. Делал это меню, естественно, списком, в качестве разделителя использовал border-left для li. Также для li сделал фоновым рисунок, который должен находиться сверху.

Собственно, вот что должно получиться:

А вот, что пока получается:

Как можно увидеть, бордеры разъехались на всю высоту блока li. Как сделать, чтобы разделитель был как и на рисунке, который показывает, что должно получиться ? Придётся отказаться от бордеров и юзать клавишу-разделитель на клавиатуре ? Заранее спасибо за помощь !

Great Rash · August 13, 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 {
			overflow: hidden;
			height: 17px; /* line-height - top + border-top + border-bottom */
			padding-top: 10px;
			list-style: none;
		}

		li {
			float: left;
			height: 10px;
			border-left: 1px solid;
			padding: 0 5px;
			margin-left: -1px;
		}

		li a {
			display: inline-block;
			position: relative;
			top: -10px;
			padding: 0 10px;
			line-height: 25px;
			white-space: nowrap;
			text-decoration: none;
			border: red 1px solid;
			background: yellow;
			font-size: 1.6em;
		}
	</style>
</head>

<body>

	<ul>
		<li><a href="#">text</a></li>
		<li><a href="#">text</a></li>
		<li><a href="#">text</a></li>
		<li><a href="#">text</a></li>
		<li><a href="#">text</a></li>
	</ul>

</body>
</html>

dimacat · August 13, 2010

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

Спасибо ! Но, понимаете, мне ещё нужно разместить сверху над каждым элементом списка картинку и сделать под ней отступ. Когда делю этот отступ, то растёт и длина разделителя, т.е. вашим способом проблема не решена.

Great Rash · August 13, 2010

Не в том элементе отступ делаете. Забудте про <li> делайте все внутри <a>.

dimacat · August 13, 2010

Не в том элементе отступ делаете. Забудте про <li> делайте все внутри <a>.

Так вообще никакой реакции нету. Картинка прижата к надписи...

Great Rash · August 13, 2010

Ссылка на страницу есть?

psywalker · August 13, 2010

Ты можешь задавать позицию фона, так вот задай её значит в отрицательную сторону.

dimacat · August 17, 2010

Таки у меня не получилось. Вот код меню, может кто-нибудь подскажет как сделать. В отрицательную сторону если задавать фон, то картинка исчезает.

<div class="navigation">
				<ul>
					<li><a href="#">Компании</a></li>
					<li><a href="#">Новости</a></li>
					<li><a href="#">Статьи</a></li>
					<li><a href="#">Фирмы</a></li>
							<li><a href="#">Производство</a></li>
				</ul>
			</div>

<style>
.navigation ul {
	margin-top: 30px;
}

.navigation ul li { 
	background: url(img/toparr.jpg) no-repeat 15px top;
	display: inline; 
	list-style: none;
	float: left; 
	border-left: 2px solid #5f2625; 
	padding: 5px 15px;
	margin: 0 1px 0 -2px;
}
</style>

Lincky · August 17, 2010

Ты можешь задавать позицию фона, так вот задай её значит в отрицательную сторону.

Макс, что-то ты перемудрил)) она ведь на самом деле будет прятаться за границы блока

Sign In

Подскажите, как лучше сделать

Question

dimacat

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

dimacat

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

dimacat

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

dimacat

Link to comment

Share on other sites

Lincky

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information