Проблема вёрстки резинового меню

[Kostyan]

Всем доброго времени суток! Решил попробовать сверстать дизайн, но появилась небольшая проблема при вёрстке меню.

Меню у меня горизонтальное, шириной 70%. Для его центрирования сделал отступ слева 15%. Меню справа и слева по задумке должно иметь скругленные края, весь фон формата png для сохранения прозрачности. Следовательно фон должен состоять из 3 частей: фон общий, фон справа и фон слева.

вот html код:

<div id="menu_main">
   <div id="menu"></div>
   <div id="menu-l"></div>
   <div id="menu-r"></div>
</div>

css:

#menu_main{
	float:left;
	margin-top: 75px;
	margin-left: 15%;
	width: 70%;
	height: 58px;
	min-width: 700px;
	position:relative;
}
#menu{
	margin-left:21px;
	margin-right: 23px;
	float:left;
	background: url(http://anonymouse.org/cgi-bin/anon-www.cgi/http://forum.htmlbook.ru/'img/bg-menu.png') repeat-x;
	height: 58px;
	width: 100%;
	}
#menu-l{
	margin: 0;
	padding: 0;
	background: url(http://anonymouse.org/cgi-bin/anon-www.cgi/http://forum.htmlbook.ru/'img/bg-menu-l.png') no-repeat 0 bottom;
	background-position: left;
    background-repeat: no-repeat;
	height: 58px;
	}
#menu-r{
	background: url(http://anonymouse.org/cgi-bin/anon-www.cgi/http://forum.htmlbook.ru/'img/bg-menu-r.png') no-repeat 0 bottom;
	background-position: right;
    background-repeat: no-repeat;
	height: 58px;
	}

впринципе по идее всё должно работать, так и есть, только одно НО: правые и левые края накладываются на общий фон меню и в итоге этих скруглений не видно.

попробовал сдвинуть общий фон вправо margin-left:21px

но весь общий фон сдвигается вправо и в итоге получается слева всё хорошо, а справа на 21px вылезает.

помогите плиз разобраться

Edited June 11, 2010 by Kostyan

[psywalker]

1) Скриншот того, что хочешь получить.

2) Делай меню на списках

[Kostyan]

1) Скриншот того, что хочешь получить.

2) Делай меню на списках

по поводу списков эт понятно.

Скриншоты вот:

что нужно получить

что получается пока

Edited June 15, 2010 by Kostyan

[psywalker]

Не вижу тут проблемы. Просто погружаешь список в див, его левый паддинг и левый фон, далее с UL тоже самое, только с правой стороны, а уже LI основной фон.

[Kostyan]

Не вижу тут проблемы. Просто погружаешь список в див, его левый паддинг и левый фон, далее с UL тоже самое, только с правой стороны, а уже LI основной фон.

cспасибо. Впринципе получилось, в мозилле всё отображается отлично, а вот в опере появилась небольшая проблема. Как видно из скрина справа от ссылок появилось пустое место

подскажите как исправить?

вот код

#menu_m{
	float:left;
	margin-top: 230px;
	margin-left: 15%;
	width: 70%;
	height: 58px;
	min-width: 700px;
	position:absolute;
}
#menu_m ul{
	padding: 0 21px;
	margin: 0px auto;
	list-style: none;
}

#menu_m ul li{
	padding: 0px;
	margin: 0px;
	display: inline;
}

#menu_m  ul li a{
	background: url('img/bg-menu.png') repeat-x;
	float: left;
	display: block;
	height: 58px;
	width: 20%;
	padding: 22px 0 0 0;
	text-align: center;

}
#menu-l{
	margin: 0;
	padding: 0;
	background: url('img/bg-menu-l.png') no-repeat 0 bottom;
	background-position: left;
    background-repeat: no-repeat;
	height: 58px;
	}
#menu-r{
	background: url('img/bg-menu-r.png') no-repeat 0 bottom;
	background-position: right;
    background-repeat: no-repeat;
	height: 58px;
	}

Edited June 15, 2010 by Kostyan

[psywalker]

Если всё правильно делать, таких проблем быть не должно.

[Kostyan]

Если всё правильно делать, таких проблем быть не должно.

очень информативный совет.

[npofopr]

сделай отступ для оперы. если только в ней. самое просто будет

+ как вариан. не мучаться с флоатами.

сделать левый и правый угла внутрь основного.

<div class="center">

<div class="left"><div>

<ul><li></li></ul>

<div class="right"></div>

</div>

для центра у вас наверняка position:relative; а для левого и правого сделать абсолютное и для левого сделать left:-21px; а для правого right:-21px;

но это надо попробовать.

Edited June 17, 2010 by npofopr