пункт меню в виде трапеции

[jul_k]

добрый день, подскажите как сделать пункт горизонтального меню в виде трапеции, что бы она тянулась на разные надписи самого меню?

трапеция с левого угла - прямая, с правого - угол и вехняя полочка

хотела вставить background-ом эти изображения в li но скачет высота и видно стыки

посоветуйте пожалуйста

[mav]

в кратце это делается примерно так...

имея конструкцию вида:

• ссылка
  

на тэг накладываем бекграунд с левой частью требуемой картинки, он будет совсем небольшим в ширину

на

[*] накладываем бекграунд с правой частью (ну пусть будет трапеция), то есть примерно вида "background: url(menu_right.gif) no-repeat right;".. только надо учесть, что если хотите растягивающийся бекграунд в зависимости от текста, то изображение справа должно быть длинным, скажем, пикселей 300-400 в ширину

а вообще на эту тему советовал бы почитать статейку http://webmascon.com/topics/coding/36a.asp

[3ABAPKA]

CSS или

.ddoverlap{
border-bottom: 1px solid #bbb8a9;
}

.ddoverlap ul{
padding: 0;
margin: 0;
font: bold 90% default;
list-style-type: none;
}

.ddoverlap li{
display: inline;
margin: 0;
}

.ddoverlap li a{
padding: 3px 7px;
text-decoration: none;
padding-right: 32px; 
color: blue;
background: transparent url(media/righttabdefault.gif) 100% 1px no-repeat; 
border-left: 1px solid #dbdbd5;
position: relative;
display: block;
float: left;
margin-left: -20px; 
left: 20px;
}

.ddoverlap li a:visited{
color: blue;
}

.ddoverlap li a:hover{
text-decoration: underline;
}

.ddoverlap li.selected a{ 
color: black;
z-index: 100; 
top: 1px; 
background: transparent url(media/righttabselected.gif) 100% 0 no-repeat;
}

.ddoverlap li.selected a:hover{
text-decoration: none;
}

HTML-код

<div class="ddoverlap">
<ul>
<li><a href="">Home</a></li>
<li><a href="">DHTML</a></li>
<li class="selected"><a href="">CSS</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">JavaScript</a></li>
<li><a href="">Forums</a></li>
</ul>
<br style="clear: left" />
</div>

[jul_k]

спасибо за ответы,

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

если работать со ссылкой, то есть проблема того, что у

[*] и разная высота и получается разный уровень background-а

я видела пример множественного background-а, но он не работает в ИЕ

[3ABAPKA]

забыл картинки вставить

http://www.dynamicdrive.com/cssexamples/me...tabselected.gif

http://www.dynamicdrive.com/cssexamples/me...ttabdefault.gif

Просто кликни и скачай Работает только в Мазиле!

[Vlad]

3ABAPKA, с картинками какая-то проблема.

[3ABAPKA]

3ABAPKA, с картинками какая-то проблема.

Что не так?

Просто кликни по ссылке

http://www.dynamicdrive.com/cssexamples/me...tabselected.gif

http://www.dynamicdrive.com/cssexamples/me...ttabdefault.gif

Скачаешь и сохрани их под именами righttabselected.gif белая с серым конуром и

righttabdefault.gif (вся серая )

Работает только в Мазиле!

[jul_k]

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

[jul_k]

а вообще если добавить там, где .ddoverlap li a {margin-right: 4px; - хотя бы перекрытия уходят, спасибо

[jul_k]

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

без фильтров?

[3ABAPKA]

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

без фильтров?

Можно попробовать написать код в три блока вложенных один в другой

внешнему поставить в качестве background изображение тени для левой стороны и размножить только вертикально

среднему тени снизу и сверху и размножить горизонтально

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

и потом во внутрь всего этого засунуть меню

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

изображения и должны перекрываться так красивее выглядит как закладки