Перейти к содержимому


Конкурс "Лучший отзовик"
× Быстрый вопрос
Пользователь месяца
Vmir Vmir 1-й за Апрель
Очков активности: 1 548 8 тем, 62 сообщения, 12 баллов репутации
ТОП самых активных за этот месяц
  • Фотография Андрей WPMasterKZ
    #1

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 162 1 тема, 24 сообщения, 4 балла репутации

  • Фотография Vmir
    #2

    Vmir
    Очков активности: 82.5 Вне конкурса за определение пользователя месяца

  • Фотография Роман Зеленков
    #3

    Роман Зеленков
    Очков активности: 76.5 7 тем, 30 сообщений, 1 балл репутации

  • Фотография Megoydagi
    #4

    Megoydagi (24ho.ru)
    Очков активности: 57 2 темы, 13 сообщений, 2 балла репутации

  • Фотография r0mZet
    #5

    r0mZet (rz-style.ru)
    Очков активности: 54 1 тема, 9 сообщений, 3 балла репутации

  • Фотография BLIK
    #6

    BLIK
    Очков активности: 36 Вне конкурса за определение пользователя месяца

  • Фотография dos1k
    #7

    dos1k (dos1k.ru)
    Очков активности: 21 2 темы, 8 сообщений, 1 балл репутации

  • Фотография Mandarin
    #8

    Mandarin
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография kolver
    #9

    kolver
    Очков активности: 21 2 темы, 8 сообщений, 1 балл репутации

  • Фотография agrx
    #10

    agrx (key-assort.ru)
    Очков активности: 19.5 0 тем, 13 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 20.04.2019
  • Яндекс выдача: 18.05.2019
Топ 5 участников по репутации


При наведении на ссылку-рисунок выводится рaмка

#1 Anatoly

Anatoly
  • Неактивные
  • 50 сообщений
  • Репутация: 0
0

Отправлено 13 Сентябрь 2009 - 16:23

Привет форумчанам.
Что-то я никак не найду, что нужно прописать в css, чтобы при наведении на ссылку-рисунок выводилась рaмка. Знаю, что это легко, но не получается.

И еще один вопрос, как вставить на сайт swf так, что бы ненужно было нажимать на нем вначале для активации. Вроде это делается через div'ы...

 

 

  • 0

#2 yury

yury
  • Пользователь
  • 647 сообщений
  • Репутация: 192

Отправлено 13 Сентябрь 2009 - 16:56

Anatoly,
примерно, так

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>border</title>
<meta http-equiv="content-type" content="text/html" charset="windows-1251">
<style type="text/css">
.lnk {
border: 4px solid white;
}
.lnk:hover {
border: 4px solid blue;
}
</style>
</head>
<body>
<A href="#"><img src="img.gif" width="30" height="30" class="lnk"></A>
</body>
</html>

  • 0

#3 Anatoly

Anatoly
    Topic Starter
  • Неактивные
  • 50 сообщений
  • Репутация: 0

Отправлено 13 Сентябрь 2009 - 17:00

В Opere работает :) , а вот в IE 7 нет :)
Может есть еще какой-то вариант??? :rolleyes:
  • 0

#4 yury

yury
  • Пользователь
  • 647 сообщений
  • Репутация: 192

Отправлено 13 Сентябрь 2009 - 17:13

Anatoly,
щас нет под рукой старых версий ИЕ, чтоб потестить.
Вот так должно работать везде:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>border</title>
<meta http-equiv="content-type" content="text/html" charset="windows-1251">
<style type="text/css">
.lnk {
color: white;
}
.lnk:hover {
color: blue;
}
</style>
</head>
<body>
<A href="#" class="lnk"><img src="img.gif" width="30" height="30" border="4"></A>
</body>
</html>

  • 0

#5 Anatoly

Anatoly
    Topic Starter
  • Неактивные
  • 50 сообщений
  • Репутация: 0

Отправлено 13 Сентябрь 2009 - 17:32

И опять IE мимо :rolleyes:
  • 0

#6 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 13 Сентябрь 2009 - 17:38

с hover в IE проблемы, просто так не обойтись поищи здесь обсуждалась подобная тема!

вот нашел http://www.masterweb...p...76&hl=hover
  • 0

#7 Anatoly

Anatoly
    Topic Starter
  • Неактивные
  • 50 сообщений
  • Репутация: 0

Отправлено 13 Сентябрь 2009 - 18:04

Как было бы замечательно, еслибы все эти разработчики браузеров собрались вместе и приняли общий стандарт :rolleyes:
Но такого, похоже, не будет никогда :)
  • 0

#8 FaTeRy

FaTeRy
  • Неактивные
  • 480 сообщений
  • Репутация: 1

Отправлено 13 Сентябрь 2009 - 18:09

Их просто объеденить некому)
  • 0

#9 Anatoly

Anatoly
    Topic Starter
  • Неактивные
  • 50 сообщений
  • Репутация: 0

Отправлено 13 Сентябрь 2009 - 18:45

Мне нужно было что-то такое
.photo {
position: absolute;
padding: 5px;
background: #fff;
border: 4px solid #eee;
}
.photo:hover,
.photo.hover {
position: relative;
padding: 5px;
background: #fff;
border: 4px solid #bbb;
}
Но получается только с absolute, а можно еще высоту как-то задать, что бы ненаезжал рисунок на текст?
  • 0

#10 FaTeRy

FaTeRy
  • Неактивные
  • 480 сообщений
  • Репутация: 1

Отправлено 13 Сентябрь 2009 - 20:11

Поподробней распишите что именно хотите? Какой текст?


  • 0

#11 Anatoly

Anatoly
    Topic Starter
  • Неактивные
  • 50 сообщений
  • Репутация: 0

Отправлено 13 Сентябрь 2009 - 22:21

Мне нужно вверху, где случайные фото (и не только там), при наведении на них выводить рамку. Но не впритык что бы была, а чуть поодаль.
Адрес сайта http://www.4picture.ru
  • 0

#12 ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 13 Сентябрь 2009 - 22:56

Anatoly, а не пробовали для ссылки сделать:
.href, .href:link, .href:visited
{
   display: block;
   padding: 3px;
   border: 4px solid transparent;
}
.href:hover
{
   border: 4px solid #eee;
}

  • 0

#13 Anatoly

Anatoly
    Topic Starter
  • Неактивные
  • 50 сообщений
  • Репутация: 0

Отправлено 14 Сентябрь 2009 - 15:05

Да пытался, но чуток не так. Теперь почти как надо, но рамка растягивается во всю ячейку таблицы по ширине. Если, к примеру у меня там будет стоять один рисунок, то рамка получится от края до края...
Вы не серчайте, если что :rolleyes: , но мне просто этот эффект нужен будет еще на одном сайте, который пока только на моем винте создается :) ...
  • 0

#14 ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 14 Сентябрь 2009 - 18:02

Anatoly, ну раз уж вы не пользуетесь свойством float я вас научу.
Данный код покажет картинки-ссылки с бордюром в 4 пикселя, каждая на новой строке
<html>
<head>
<style type="text/css">

img
{
border: 0px;
}

.href, .href:link, .href:visited
{
display: block;
float: left;
padding: 3px;
border: 4px solid #FFF;
clear: both;
}

.href:hover
{

border: 4px solid #eee;
}

</style>
</head>
<body>
<a class="href" href="#"><img src="[картинка1]" /></a>
<a class="href" href="#"><img src="[картинка2]" /></a>
<a class="href" href="#"><img src="[картинка3]" /></a>
</body>
</html>

Если хотите убрать перенос каждого блока, то сотрите строку clear: both; из изначального определения ссылок

Все остальные параметры на подобии нулевых бордюров у картинок, цвета у бордюра ссылки при пассивном режиме - фиксят баги в других браузерах...
  • 0

#15 Anatoly

Anatoly
    Topic Starter
  • Неактивные
  • 50 сообщений
  • Репутация: 0

Отправлено 14 Сентябрь 2009 - 18:59

ну раз уж вы не пользуетесь свойством float я вас научу.

Ну честно, не знал я про это :rolleyes: Я сейчас могу расплакаться даже от незнания такой вещи :)
  • 0

#16 ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 14 Сентябрь 2009 - 19:47

Anatoly, да с чего плакать, мы тут помогаем :) Рад был показать! Иногда методами проб и ошибок получаем всё что хотим.
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru