Нюанс скругления края меню

[Squidward]

Привожу для примера рисунок, это сделано на флеше (поэтому код через Firebug посмотреть не могу), а мне похожее нужно в HTML:

Как скруглить левый верхний угол у <li> (или скруглить край меню), который подсвечен оранжевым и находится слева с краю? Оранжевый цвет накладывается при условии hover и selected при помощи background: url(../libg.gif) repeat-x; Если, допустим, задавать border-radius для оберточного дива меню, то на этот <li> он действовать не будет и бекграунд у <li> окажется квадратным и отобразится поверх скругленного уголка оберточного дива. На <li>, разумеется, скругление не наложишь, иначе в середине меню будут скругленные пункты. Как быть? Спасибо.

[sigma77]

Squidward,

1) Добавить класс

2) Использовать :first-child и :last-child

[Nekromancer]

ul#myid li {background: ulr(mymainlink);}
ul#myid li:first-child {border-radius-top-left: 4px;}
ul#myid li:last-child {border-raius-top-right: 4px;}
ul#myid li:hover, ul#myid li.selected {background: url(myanotherlink);}

П.С. Немного не успел, девушек в перёд

П.С. Намбер 2: Ещё вот ссылко есть - https://developer.mozilla.org/en/CSS/border-top-left-radius

[Softlink]

Squidward,

1) Добавить класс

2) Использовать :first-child и :last-child

ul#myid li {background: ulr(mymainlink);}
ul#myid li:first-child {border-radius-top-left: 4px;}
ul#myid li:last-child {border-raius-top-right: 4px;}
ul#myid li:hover, ul#myid li.selected {background: url(myanotherlink);}

П.С. Немного не успел, девушек в перёд

П.С. Намбер 2: Ещё вот ссылко есть - https://developer.mozilla.org/en/CSS/border-top-left-radius

Нифига не выйдет. Тут надо только с классами, причем вешать их только для ссылки.

[Nekromancer]

Враньё. Можно даже как пробовал сам автор темы закруглить обёртку, например ul.

[Softlink]

Враньё. Можно даже как пробовал сам автор темы закруглить обёртку, например ul.

Говорю же, ничего не выйдет http://jsfiddle.net/PMWPL/16/ Плавали, знаем.

А с классами вполне http://jsfiddle.net/PMWPL/15/

[psywalker]

А объясните лошаре, почему не пашет так? http://jsfiddle.net/PMWPL/16/

[Nekromancer]

http://jsfiddle.net/rtJqy/3/

Лучше объясните мне почему у меня пашет

[Softlink]

А объясните лошаре, почему не пашет так? http://jsfiddle.net/PMWPL/16/

Да потому что border-radius не наследуется. А внутри ведь еще один блок.

[psywalker]

А объясните лошаре, почему не пашет так? http://jsfiddle.net/PMWPL/16/

Да потому что border-radius не наследуется. А внутри ведь еще один блок.

Ааа, ну тада можно сделать так:

li:first-child{

border-radius:10px 0px 0px 0px;

-moz-border-radius:10px 0px 0px 0px;

-webkit-border-radius:10px 0px 0px 0px;

overflow: hidden;

}

[Softlink]

А объясните лошаре, почему не пашет так? http://jsfiddle.net/PMWPL/16/

Да потому что border-radius не наследуется. А внутри ведь еще один блок.

Ааа, ну тада можно сделать так:

li:first-child{

border-radius:10px 0px 0px 0px;

-moz-border-radius:10px 0px 0px 0px;

-webkit-border-radius:10px 0px 0px 0px;

overflow: hidden;

}

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

Edited August 25, 2011 by Softlink

[Nekromancer]

Да, оно в общем легко фиксится, я там в примере не до делал/намудрил, но даже там можно сделать правильно. Приду сделаю.

[psywalker]

А объясните лошаре, почему не пашет так? http://jsfiddle.net/PMWPL/16/

Да потому что border-radius не наследуется. А внутри ведь еще один блок.

Ааа, ну тада можно сделать так:

li:first-child{

border-radius:10px 0px 0px 0px;

-moz-border-radius:10px 0px 0px 0px;

-webkit-border-radius:10px 0px 0px 0px;

overflow: hidden;

}

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

Погоди, а я не понял, в чём тест заключается? На что внимание обратить?

[Softlink]

А объясните лошаре, почему не пашет так? http://jsfiddle.net/PMWPL/16/

Да потому что border-radius не наследуется. А внутри ведь еще один блок.

Ааа, ну тада можно сделать так:

li:first-child{

border-radius:10px 0px 0px 0px;

-moz-border-radius:10px 0px 0px 0px;

-webkit-border-radius:10px 0px 0px 0px;

overflow: hidden;

}

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

Погоди, а я не понял, в чём тест заключается? На что внимание обратить?

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

Edited August 25, 2011 by Softlink

[Squidward]

Ребят, меню ЦМСка генерит, как же я на отдельные li классы наложу?

[Softlink]

Ребят, меню ЦМСка генерит, как же я на отдельные li классы наложу?

Используйте

li:first-child(last-child){
border-radius:10px 0px 0px 0px;
-moz-border-radius:10px 0px 0px 0px;
-webkit-border-radius:10px 0px 0px 0px;
overflow: hidden;
}

В вашем случае это сработает.

[psywalker]

Softlink, Погоди, а может ткнуть носом прям? Какой пример и угол?

[Softlink]

Softlink, Погоди, а может ткнуть носом прям? Какой пример и угол?

Это скругление с overflow - http://clip2net.com/s/18kXZ

Это последовательное скругление вложенных блоков - http://clip2net.com/s/18kYw

[sigma77]

Какой нафиг overflow?

http://jsfiddle.net/PMWPL/18/

Ребят, меню ЦМСка генерит, как же я на отдельные li классы наложу?

Ковырять цмску или через js

[psywalker]

Softlink, Погоди, а может ткнуть носом прям? Какой пример и угол?

Это скругление с overflow - http://clip2net.com/s/18kXZ

Это последовательное скругление вложенных блоков - http://clip2net.com/s/18kYw

Ааа, понял. Спасибо. А есть выходы?

[Softlink]

Какой нафиг overflow?

http://jsfiddle.net/PMWPL/18/

Ребят, меню ЦМСка генерит, как же я на отдельные li классы наложу?

Ковырять цмску или через js

Вполне, только не забыть добавить li:hover

[psywalker]

Какой нафиг overflow?

http://jsfiddle.net/PMWPL/18/

Вот так всегда. Мужики стараются, выясняют, парятся, а женщина пришла, увидела и победила

[sigma77]

Вполне, только не забыть добавить li:hover

Ну да. Зачем в данном случае вообще на линк вешать фон.

Вот так всегда. Мужики стараются, выясняют, парятся, а женщина пришла, увидела и победила

Да вам только дай поспорить

[Softlink]

Да вам только дай поспорить

А кто спорит? Я ни-ни Все только во благо

[psywalker]

Да, спор бывает полезен очень) Ведь если истина родится, то значит у нас будет правильное и самое верное решение.

[CalvinKlein]

Ааа, ну тада можно сделать так:

li:first-child{

border-radius:10px 0px 0px 0px;

-moz-border-radius:10px 0px 0px 0px;

-webkit-border-radius:10px 0px 0px 0px;

overflow: hidden;

}

кстати тоже не пашет