Верстка меню

[caelicola]

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

Хочу попросить помощь в правке верстки меню... Верстал не я, но поправить надо!

Меню сверстано на дивах так:

			<div class="header_menu"><div class="r"><div class="c">
				<ul>
					<li><a href="">1</a></li>
					<li><a href="">2</a></li>
					<li><a href="">3</a></li>
					<li><a href="">4</a></li>
					<li><a href="">5</a></li>
					<li><a href="">6</a></li>
					<li><a href="">7</a></li>
				</ul>

				<div class="clear"><img src="site.ru/images/spacer.gif" alt="" /></div>
			</div></div></div>


					  .header_menu{background:url(../images/bg_header-menu_l.png) left top no-repeat; padding-left: 10px;}
			.header_menu .r{background:url(../images/bg_header-menu_r.png) right top no-repeat; padding-right: 9px;}
			.header_menu .c{background:url(../images/bg_header-menu.png) top repeat-x; padding: 0px; height: 39px;}

			.header_menu .c .right{padding-top: 6px;}
				.header_menu .c .right input{height: 19px; padding-top: 5px; border: 0px; width: 140px; vertical-align: bottom;}
				.header_menu .c .right input.b_search{width: 64px; height: 24px; padding: 0px; margin-left: 5px;}

			.header_menu ul{padding-left: 5px;}
			.header_menu ul li{padding-left: 15px; float: left;}
			.header_menu ul a{font-weight: bold; color: #FEFEFE; text-decoration: none; display: block; padding: 10px; float: left;}
				.header_menu ul a:hover{background: #FF0F0F url(../images/bg_h6.gif) top repeat-x;}

Выводится так:

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

Заранее спасибо за помощь!

Заранее спасибо!

[Игорь Ермаков]

По сути, тебе нужно нарезать две картинки, которые будут уголками и разместить их по краям пунктов меню. Можно предложить массу элегантных решений, но если не хочешь переверстывать всю менюшку просто сделай что-то вроде:

<li><b class="left"></b><a href="">1</a><b class="right"></b></li>

.left {
background:url(укажешь ссылку на изображение);
width:n;
height:k;
}
.right {
background:url(укажешь ссылку на изображение);
width:n;
height:k;
}

[Zippovich]

сделать в ссылке 2 спана - один слева, другой справа, в левом фон + текст, а правом коротком, только фон

и стилями все настроить

[Игорь Ермаков]

  Zippovich said:

сделать в ссылке 2 спана - один слева, другой справа, в левом фон + текст, а правом коротком, только фон

и стилями все настроить

Зафига? Как представил сколько гемора с отступами будет...

Ненавижу отступы не по теме юзать.

[caelicola]

  Игорь Ермаков said:

По сути, тебе нужно нарезать две картинки, которые будут уголками и разместить их по краям пунктов меню. Можно предложить массу элегантных решений, но если не хочешь переверстывать всю менюшку просто сделай что-то вроде:

<li><b class="left"></b><a href="">1</a><b class="right"></b></li>

.left {
background:url(укажешь ссылку на изображение);
width:n;
height:k;
}
.right {
background:url(укажешь ссылку на изображение);
width:n;
height:k;
}

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

[psywalker]

  Zippovich said:

сделать в ссылке 2 спана - один слева, другой справа, в левом фон + текст, а правом коротком, только фон

и стилями все настроить

Можно вполне обойтись и одним спаном.

[caelicola]

  caelicola said:

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

В общем, идея эта у меня не сработала (руки видимо кривые)... Подскажите, как еще модно сделать?

[Игорь Ермаков]

Можно без спанов сделать, на на псевдоклассах before и after, но для IE костыли больно длинные писать придется.

[Azadi]

почитайте про метод sliding doors, для решения вашей задачи он является оптимальным. Правда если требуется сделать пункт меню не фиксированной высоты (т.е. чтобы при изменении размеров шрифта ничего не ломалось), то тут уже придется изголяться.

[caelicola]

В общем... с горем пополам подсказали сделать так:

			<div class="header_menu"><div class="r"><div class="c">
				<ul id="hm">
					<li><a href="/"><div><span>1</span></div></a></li>
					<li><a href="/"><div><span>2</span></div></a></li>
				</ul>

Сss:

		.header_menu{background:url(../images/bg_header-menu_l.png) left top no-repeat; padding-left: 10px;}
			.header_menu .r{background:url(../images/bg_header-menu_r.png) right top no-repeat; padding-right: 9px;}
			.header_menu .c{background:url(../images/bg_header-menu.png) top repeat-x; padding: 0px; height: 39px;}

			.header_menu .c .right{padding-top: 6px;}
				.header_menu .c .right input{height: 19px; padding-top: 5px; border: 0px; width: 140px; vertical-align: bottom;}
				.header_menu .c .right input.b_search{width: 64px; height: 24px; padding: 0px; margin-left: 5px;}

			.header_menu ul{padding-left: 5px;}
			.header_menu ul li{padding-left: 15px; float: left;}
			.header_menu ul a{font-weight: bold; color: #FEFEFE; text-decoration: none; display: block; float: left; padding-left: 10px;}
				.header_menu ul a div{padding-right: 10px;}
				.header_menu ul a div span{padding: 10px 0px; display: block;}
					.header_menu ul a:hover{background:url(../images/bg_h6-l.png) left top no-repeat;}
					.header_menu ul a div.br{background: url(../images/bg_h6-r.png) right top no-repeat;}
					.header_menu ul a div span.bb{background: url(../images/bg_h6.gif) top repeat-x;}

Подскажите, пожалуста, как реализовать, чтобы при переходе по ссылке она оставалась подсвеченной (вроде бы как активный раздел)!