Jump to content
  • 0

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


Squidward
 Share

Question

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

68ce093ef673.gif

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

Link to comment
Share on other sites

Recommended Posts

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

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

  • Like 1
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

div:first-child

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

Link to comment
Share on other sites

  • 0

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

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

div:first-child

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

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

Link to comment
Share on other sites

  • 0

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

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;
}

Link to comment
Share on other sites

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

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

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy