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

[Squidward]

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

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

[psywalker]

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

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]

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

Эта цитата аннулируется. Попробовал сейчас. Совсем недавно раньше не работал overflow для img, приходилось скруглять и img и родителя, сейчас все работает. Точнее браузеры научились скруглять картинки как обычные блоки, без посторонней помощи, и overflow оказался ненужным, аминь!

[psywalker]

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

Эта цитата аннулируется. Попробовал сейчас. Совсем недавно раньше не работал overflow для img, приходилось скруглять и img и родителя, сейчас все работает. Точнее браузеры научились скруглять картинки как обычные блоки, без посторонней помощи, и overflow оказался ненужным, аминь!

Когда пробовал? Ведь у Оперы с этим беда?

[SelenIT]

А в чем такая уж проблема фон на линк положить?

[Softlink]

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

Эта цитата аннулируется. Попробовал сейчас. Совсем недавно раньше не работал overflow для img, приходилось скруглять и img и родителя, сейчас все работает. Точнее браузеры научились скруглять картинки как обычные блоки, без посторонней помощи, и overflow оказался ненужным, аминь!

Когда пробовал? Ведь у Оперы с этим беда?

Опера за бортом, попробовал сейчас. Хотя тот пример делал по старинке - скруглял и img и блок для него.

А в чем такая уж проблема фон на линк положить?

Не, ну для тебя нет невозможного

[Nekromancer]

А чего вообще спорили то? Это же такой банальный пример, просто закруглить блок у родителя и всё, внутренние обрезается. По моему априори всё было ясно

[psywalker]

А чего вообще спорили то? Это же такой банальный пример, просто закруглить блок у родителя и всё, внутренние обрезается. По моему априори всё было ясно

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

[Softlink]

А чего вообще спорили то? Это же такой банальный пример, просто закруглить блок у родителя и всё, внутренние обрезается. По моему априори всё было ясно

Та я шумиху поднял Как обычно Больше не буду, помалкивать буду

[psywalker]

А чего вообще спорили то? Это же такой банальный пример, просто закруглить блок у родителя и всё, внутренние обрезается. По моему априори всё было ясно

Больше не буду, помалкивать буду

НЕ ВЗДУМАЙ!!!

[SelenIT]

А чего вообще спорили то? Это же такой банальный пример, просто закруглить блок у родителя и всё, внутренние обрезается. По моему априори всё было ясно

Априори-то было ясно, но эксперимент в виде фона у потомка (нескругленного) в очередной раз показал справедливость фразы "в теории между теорией и практикой нет разницы, а на практике она огромна"...

[Nekromancer]

А чего вообще спорили то? Это же такой банальный пример, просто закруглить блок у родителя и всё, внутренние обрезается. По моему априори всё было ясно

Априори-то было ясно, но эксперимент в виде фона у потомка (нескругленного) в очередной раз показал справедливость фразы "в теории между теорией и практикой нет разницы, а на практике она огромна"...

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

Вообще конечно можно так - http://jsfiddle.net/PMWPL/22/

И даже так - http://jsfiddle.net/PMWPL/24/

[Softlink]

Блин, а поясните пожалуйста мне почему тогда не работает вот так и вот так. А у :first-child, получается, есть своя магия, которая идет в разрез с наследованием? Можно ткнуть в спецификацию, где это написано.

p.s. кто заплюсовал Макса, кому я еще не надоел, колитесь?)))

[Nekromancer]

Блин, а поясните пожалуйста мне почему тогда не работает вот так и вот так. А у :first-child, получается, есть своя магия, которая идет в разрез с наследованием? Можно ткнуть в спецификацию, где это написано.

p.s. кто заплюсовал Макса, кому я еще не надоел, колитесь?)))

div:first-child

Ибо этот код не как в JS, ты просто оба стиля повесил на див (код означает выбрать див, которые есть первый потомок), а внутри у тебя обычный пустой спан. Открой фаер баг

[Softlink]

Блин, а поясните пожалуйста мне почему тогда не работает вот так и вот так. А у :first-child, получается, есть своя магия, которая идет в разрез с наследованием? Можно ткнуть в спецификацию, где это написано.

p.s. кто заплюсовал Макса, кому я еще не надоел, колитесь?)))

div:first-child

Ибо этот код не как в JS, ты просто оба стиля повесил на див (код означает выбрать див, которые есть первый потомок), а внутри у тебя обычный пустой спан. Открой фаер баг

Получается, что тут никакого наследования нет и в помине, правильно? Див "принимает" на себя все стили первого вложенного в него блока, выходит что так.

[Nekromancer]

Нет, ты просто берёшь и вешаешь все стили диву, а спану ничего и не вешаешь. Див и есть первый потом, относительно боди, ты ведь и выбирал "див:первый-потомок".

div:first-child {
    background: none repeat scroll 0 0 #222222;
    display: block;
    height: 200px;
    width: 200px;
}
div {
    background: none repeat scroll 0 0 #CCCCCC;
    border-radius: 10px 10px 10px 10px;
    height: 200px;
    width: 200px;
}

[SelenIT]

почему тогда не работает вот так и вот так.

Всё тот же overflow:hidden (т.е. его отсутствие).

[Softlink]

почему тогда не работает вот так и вот так.

Всё тот же overflow:hidden (т.е. его отсутствие).

ну это да, я сообразил.

Нет, ты просто берёшь и вешаешь все стили диву, а спану ничего и не вешаешь. Див и есть первый потом, относительно боди, ты ведь и выбирал "див:первый-потомок".

Спасибо. Я болван. Все правильно, он считает дивы. В общем, не полезно думать в 3 ночи Только лишние тупые вопросы появляются.

[Nekromancer]

Значит время спать Завтра ещё и работать то надо.

[Squidward]

Спасибо, ребята, за помощь. Прикол - для li стояло z-index:1, а я его не заметил (код не мой). Вот он поверх бордера и отображался.