Скругленные углы

[rafic]

И так. Меня интересует вопрос закругленных углов без использования картинок.
Есть код

<div class="images">
    <img src="путь">
</div>

.images{
    border:none;
    width:310px;
    height:310px
}
.images:hover{ border:5px solid #000; }

Дивом я позиционирую картинку, а в нем уже сама картинка и мне нужно сделать так, что бы при наведении на эту картинку у меня был border:5px solid #000; допустим. Но если я сделаю саму картинку со скругленными углами и вставлю ее в Див, то border будет идти по краю квадратного дива, а не по краю скругленной картинки. Как сделать так, что бы бордер шел по краю скругленной картинки? Слушаю ваши пути решения данной проблемы.

 

[vindozo]

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

 

[капрал]

псевдокласс hover работает только на <A></a> тэг. Замени <div свой на <a href="#"> и пропиши стиль для <a display:block; и будет тебе кросбраузерное счастье

 

[rafic]

А у меня и на див работает на ура))

 

[rafic]

Капрал, от смотри. У меня есть меню. Оно состоит из строк расположенных в столбик. В каждой строке отдельный пункт. И я хочу сделать так, что бы при наведении на строку она меняла свой фон (смотри миниатюру) но как это лучше сделать? я и использовал hover для дива, что бы менять фон и вот, что вышло.

<a class="menu-link" href="">
   <div class="menu-div-link">Меню</div>
</a>

               .menu-div-link{
			height:20px;
			border-bottom:1px solid #000;
			padding-left:10px;
		}
		.menu-div-link:hover{background:#ff8a00;}
		
		.menu-link{
			text-decoration:none;
			color:#fff;
			font-family:Arial;
			font-size:14px;
			font-weight:bold;
		}

я знаю что это глупо и неграмотно, по этому спрашиваю как сделать лучше?

 

[mdss]

списком делать, да и более семантично выйдет.

<ul class="test">
<li><a href="#"></a></li>
</ul>
ul.test {
list-style:none;
width:180px;
}
ul.test li {
background:url(pic.gif);
display:block;
}
ul.test li:hover {
background:url(pic_hover.gif);
}

 

[капрал]

списком делать, да и более семантично выйдет.

Да. согласен. только вот <UL> лучше дать не class, а id, так как еще одного такого меню на странице врядли будет.

и еще, лучше если делать по hover'у изменение бэкграунда, то лучше не подгружать новый фон, а смешать уже существующий.

 

[IgVan]

В одном проекте делали что-то похожее, правда не к скругленным углам относилось, но реализовать можно.
1. Делаем картинку по высоте в 2 раза больше, например сверху размещаем картинку без бордера, под ней с бордером.
2. пищем стили:

.corner a {
	display:block;
	height: !!!Размер реальной картинки, т.е. 1/2 от размера жипега!!;
	background: url(../imgs/картинка.jpg) no-repeat left top;
}
.corner a:hover {
	display:block;
	height: !!!Размер реальной картинки, т.е. 1/2 от размера жипега!!;
	background: url(../imgs/ico/картинка.jpg) no-repeat left bottom;
}

 

[whitewolff]

капрал в каких браузера кроме IE6 и других допотопных браузеров :hover не работает?)
по теме: есть решение на js.

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