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

Тема в разделе "Веб-дизайн", создана пользователем rafic, 6 окт 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. rafic

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    И так. Меня интересует вопрос закругленных углов без использования картинок.
    Есть код
    Код:
    <div class="images">
        <img src="путь">
    </div>
    Код:
    .images{
        border:none;
        width:310px;
        height:310px
    }
    .images:hover{ border:5px solid #000; }
    Дивом я позиционирую картинку, а в нем уже сама картинка и мне нужно сделать так, что бы при наведении на эту картинку у меня был border:5px solid #000; допустим. Но если я сделаю саму картинку со скругленными углами и вставлю ее в Див, то border будет идти по краю квадратного дива, а не по краю скругленной картинки. Как сделать так, что бы бордер шел по краю скругленной картинки? Слушаю ваши пути решения данной проблемы.
     
  2. vindozo

    vindozo Читатель

    Заблокирован
    Регистр.:
    12 сен 2009
    Сообщения:
    4
    Симпатии:
    0
    под мозилу есть в стилях закругление, по остальным способом весьма громоздко
     
  3. капрал

    капрал

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

    rafic

    Регистр.:
    14 май 2008
    Сообщения:
    477
    Симпатии:
    24
    А у меня и на див работает на ура:)))
     
  5. rafic

    rafic

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

    HTML:
    <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;
    		}
    я знаю что это глупо и неграмотно, по этому спрашиваю как сделать лучше?
     

    Вложения:

  6. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.134
    Симпатии:
    668
    списком делать, да и более семантично выйдет.
    PHP:
    <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);
    }
     
  7. капрал

    капрал

    Регистр.:
    2 окт 2008
    Сообщения:
    336
    Симпатии:
    45
    Да. согласен. только вот <UL> лучше дать не class, а id, так как еще одного такого меню на странице врядли будет.

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

    IgVan

    Регистр.:
    8 май 2008
    Сообщения:
    212
    Симпатии:
    54
    В одном проекте делали что-то похожее, правда не к скругленным углам относилось, но реализовать можно.
    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;
    }
     
  9. whitewolff

    whitewolff Лимонадный Джо :)

    Регистр.:
    29 май 2007
    Сообщения:
    168
    Симпатии:
    33
    капрал в каких браузера кроме IE6 и других допотопных браузеров :hover не работает?)
    по теме: есть решение на js.
    http://dillerdesign.com/experiment/DD_roundies/
     
Статус темы:
Закрыта.