Как сделать скругленные углы у фона выпадающего меню?

@Chris · Регистрация: 20.07.2011

Студворк — интернет-сервис помощи студентам

Как сделать скругленные углы у фона выпадающего меню? Смотрел сайты где имеется выпадающее меню, но в коде у них не могу найти правило отвечающее за скругление или мб оно кладется фоном сразу каким-то образом?

@maximkou · 24.04.2012, 21:23

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

border-radius к примеру.

примерчик:

HTML5
1
2
3
4
5
6
7
8
<ul>
   <li>Первый пункт</li>
   <li>Выпадающий пункт 
       <ul style="border-radius: 0 5px 0 5px;">
           тут пункты
       </ul>
   </li>
</ul>

@Chris · 25.04.2012, 00:47 **[ТС]**

Никаких изменений

@Маргарита Диез · 25.04.2012, 01:08

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>MENU</title>
 
 
<style>
.ind_5 ul {
    list-style-type: none;
    width:200px;
    margin: 100px 500px ;
    padding: 0;
    font-family: Geneva, Arial, Helvetica, sans-serif;
    font-size: 16px;
   }
   .ind_5 li ul {
    position: absolute;
    display: none;
    margin-left: 155px;
    margin-top: -2em;
    width:150px;
   }
   .ind_5 li a {
    display: block;
    padding: 7px;
    text-decoration: none;
    color: black;
    border-radius:15px 40px 40px 0;
    border: 3px solid  #505050;
    background-color: #2FBCE7;
     border-bottom: none;
     border-right:5px;
     
 
   }
   .ind_5 li a:hover {
    color: #ffe;
    background-color: orange;
   }
   .ind_5 li:hover ul {
    display: block;
   }
   .bord {
    border-bottom: 1px solid #ccc;
   }
 
 
 
</style>
 </head>
 <body>
 
 
<div class="ind_5">
  <ul>
   <li><a href="">Item 1</a>
    <ul>
     <li><a href="INDEX.html">Item</a></li>
     <li><a href="">Item</a></li>
     <li><a href="">Item</a></li>
     <li><a href="" class="bord">Item</a></li>
    </ul>
   </li>
   <li><a href="">Item 2</a>
    <ul>
     <li><a href="">Item</a></li>
     <li><a href="">Item</a></li>
     <li><a href="">Item</a></li>
     <li><a href="" class="bord">Item</a></li>
    </ul>
   </li>
   <li><a href="">Item 3</a>
    <ul>
     <li><a href="">Item</a></li>
     <li><a href="">Item</a></li>
     <li><a href="">Item</a></li>
     <li><a href="" class="bord">Item</a></li>
    </ul>
   </li>
   <li><a href="" class="bord">Item 4</a>
    <ul>
     <li><a href="">Item</a></li>
     <li><a href="">Item</a></li>
     <li><a href="">Item</a></li>
     <li><a href="" class="bord">Item</a></li>
    </ul>
    </li>
  </ul>
</div>
 
 </body>
</html>

@allukard · 25.04.2012, 07:07

Сообщение от Chris

Никаких изменений

Каким браузером пользуетесь?

@Chris · 25.04.2012, 17:22 **[ТС]**

Ой =) вы знаете, я не заметил их) В общем получилось) сделал 8px и получилось как раз отлично.
Спасибо за помощь

@Heleg · 26.04.2012, 12:08

вы вот чему человека учите!?

CSS
1
2
3
4
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior: url(path/to/PIE.htc); /*ie следует накормить пирогом*/

пирог

для ie лучше создать файл с отдельной таблицей стилей и подключать с помощью условных комментариев

HTML5
1
2
3
<!--[if lt IE 9]>
<link type="text/css" href="style_for_ie8.css" rel="stylesheet">
<![endif]-->

@allukard · 26.04.2012, 12:34

Сообщение от Heleg

PIE.htc

а где скачать?

Сообщение от Heleg

behavior: url(path/to/PIE.htc); /*ie следует накормить пирогом*/

чтот с пирогом не работает округление углов в ИЕ

@Heleg · 26.04.2012, 13:08

сейчас не могу на ie потестить, у меня его нет, но я гарантирую, что пирог работает. правда возможны косяки. например, (не помню, в пироге это или ещё где-то) углы скругляются, но для содержимое блока выходит за рамки. у меня так было с картинками, но вроде на каком-то другом htc

Сообщение от Макc

а где скачать?

там же на сайте ссылка есть download

Добавлено через 2 минуты

Не по теме:

ишака надо лечить, так как по статистике популярности восьмой ишак занимает чуть ли не первое место, как это не прескорбно. эт потому что у всех стоит XP SP3, наверно самое лучшее, что смогла собрать micro$oft))

@Chris · 26.04.2012, 16:05 **[ТС]**

Heleg, Спасибо очень хороший совет и ссылка.
behavior: url(path/to/PIE.htc); /*ie следует накормить пирогом*/ - только лишь его в ie.css?

@Heleg · 26.04.2012, 16:31

Сообщение от Chris

только лишь его в ie.css?

в данном случае только её, но в процессе создания странички, думаю придется ещё добавлять стили, эксплореру постоянно приходится ставить какие-нибудь костыли. короче, туда стили для ie версий с 6 по 8

@Chris · 26.04.2012, 19:08 **[ТС]**

Поставил правило туда и ничего не изменилось. Еще проблема с выпадающем меню в целом. На левом рисунке показано как должно быть, а на правом как в ie =) Как это исправить? Меню на JS.

@Heleg · 26.04.2012, 22:19

вышли код

@Chris · 26.04.2012, 22:57 **[ТС]**

Вот архив с меню.

@Heleg · 26.04.2012, 23:39

что-то я там не нашел сам файл htc

@Chris · 26.04.2012, 23:42 **[ТС]**

Эм.. я даже незнаю о чем вы говорите

Это меню с поставил с помощью шаблона dreamweaver. А что в этом файле должно быть? Мб я вас так с ориентирую.

@Heleg · 26.04.2012, 23:50

ну вот ссылка, по ней должен быть файл .htc

CSS
1
behavior: url(/PIE.htc);

файл, который я прикрепил. он есть на сайте csspie, и в доках там всё описано.

@Heleg · 26.04.2012, 23:58

border-radius как бы работает, но фон как-то странно отображается. с ним придется поплясать. вообще градиент для ie, если и задавать, то свойством filter

@Chris · 27.04.2012, 00:01 **[ТС]**

Да правда, не скачал. Но при вставке ничего не изменилось =(

@Heleg · 27.04.2012, 00:07

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

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@Chris 4 / 4 / 2 Регистрация: 20.07.2011 Сообщений: 114

	Как сделать скругленные углы у фона выпадающего меню? 24.04.2012, 20:39. Показов 8856. Ответов 24 Метки нет (Все метки) Как сделать скругленные углы у фона выпадающего меню? Смотрел сайты где имеется выпадающее меню, но в коде у них не могу найти правило отвечающее за скругление или мб оно кладется фоном сразу каким-то образом? 0

@Chris 4 / 4 / 2 Регистрация: 20.07.2011 Сообщений: 114
	25.04.2012, 00:47 [ТС]
	Никаких изменений 0

@Chris 4 / 4 / 2 Регистрация: 20.07.2011 Сообщений: 114
	25.04.2012, 17:22 [ТС]
	Ой =) вы знаете, я не заметил их) В общем получилось) сделал 8px и получилось как раз отлично. Спасибо за помощь Миниатюры 0

@Chris 4 / 4 / 2 Регистрация: 20.07.2011 Сообщений: 114
	26.04.2012, 16:05 [ТС]
	Heleg, Спасибо очень хороший совет и ссылка. behavior: url(path/to/PIE.htc); /ie следует накормить пирогом/ - только лишь его в ie.css? 0

@Chris 4 / 4 / 2 Регистрация: 20.07.2011 Сообщений: 114
	26.04.2012, 19:08 [ТС]
	Поставил правило туда и ничего не изменилось. Еще проблема с выпадающем меню в целом. На левом рисунке показано как должно быть, а на правом как в ie =) Как это исправить? Меню на JS. Миниатюры 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	26.04.2012, 22:19
	вышли код 1

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	26.04.2012, 23:39
	что-то я там не нашел сам файл htc 1

@Chris 4 / 4 / 2 Регистрация: 20.07.2011 Сообщений: 114
	26.04.2012, 23:42 [ТС]
	Эм.. я даже незнаю о чем вы говорите Это меню с поставил с помощью шаблона dreamweaver. А что в этом файле должно быть? Мб я вас так с ориентирую. 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	26.04.2012, 23:58
	border-radius как бы работает, но фон как-то странно отображается. с ним придется поплясать. вообще градиент для ie, если и задавать, то свойством filter 1

@Chris 4 / 4 / 2 Регистрация: 20.07.2011 Сообщений: 114
	27.04.2012, 00:01 [ТС]
	Да правда, не скачал. Но при вставке ничего не изменилось =( 0

@Heleg 209 / 209 / 6 Регистрация: 23.10.2011 Сообщений: 971
	27.04.2012, 00:07
	лично у меня изменилось, вот пруф. с фоном проблемы. делай страничку с блоком отдельно, чтоб без js был и выгугливай баги, ищи методом научного тыка. эксплорер просто так не сдается)) Миниатюры 1