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


Как Сделать, Чтобы При Наведении На Товар Появлялась Рамка


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 28

#1 G-shock24.ru

G-shock24.ru

    Новичок

  • Пользователи
  • Pip
  • 4 сообщений

Отправлено 28 Январь 2013 - 23:24

Доброго времени суток

Хотелось бы сделать, чтобы при наведении на блок товара - появлялась рамочка 1px как было по умолчанию.
Только раньше по умолчанию товары всегда были выделены рамочкой, а сейчас хотим сделать только при наведении на товар чтобы появлялась.

Сайт http://g-shock24.ru/

Помогите, что изменить в css чтобы при наведении на блок товар он обводился в border ? :)

#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 209 сообщений

Отправлено 29 Январь 2013 - 02:01

Вам необходимо в файле стилей main.css найти

.goodsListItemBlock {
	border: medium none !important;
	height: 325px;
	margin: 7px;
	overflow: hidden;
	width: 221px;
}

и заменить на

.goodsListItemBlock {
	border: medium none;
	height: 325px;
	margin: 7px;
	overflow: hidden;
	width: 221px;
}

далее найдите

.withBorder {
	border: 1px solid #E5E5E5 !important;
}

и замените на

.withBorder {
	border: 1px solid #E5E5E5;
}

далее найдите

.withBorder:hover {
	border-color: #FF8D13 !important;
}

и замените на

.withBorder:hover {
	border: 1px solid #FF8D13 !important;
}


#3 G-shock24.ru

G-shock24.ru

    Новичок

  • Пользователи
  • Pip
  • 4 сообщений

Отправлено 29 Январь 2013 - 07:16

Vaccina, спасибо вам большое, Все отлично получилось :)

#4 Джейн

Джейн

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 293 сообщений
  • ГородСамара

Отправлено 29 Июль 2013 - 09:24

Здравствуйте.
У меня тот-же вопрос.

только не смогла найти
.goodsListItemBlock {
        border: medium none !important;
        height:325px;
        margin:7px;
        overflow: hidden;
        width:221px;
}

У меня все, что связано с .goodsListItemBlock
/* Список товаров в виде таблицы. Ячейки с товаром */
.goodsListItem                      {text-align:center;vertical-align:top;width:195px;overflow:hidden;padding:0px;}   /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/
.goodsListItemBlock             {height:300px;width:210px;margin:5px;overflow:hidden;}



/* color: #390 !important;
font: bold 17px/20px Tahoma,Geneva,sans-serif !important;
} */
.goodsListItemBlock a               {}
.goodsListItemBlock a span span     {color: #390; font-size:17px;font-weight:bold;}

Что из этого менять?

Спасибо.

#5 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 29 Июль 2013 - 11:43

Просмотр сообщенияДжейн (29 Июль 2013 - 09:24) писал:

Здравствуйте.
У меня тот-же вопрос.

только не смогла найти
.goodsListItemBlock {
border: medium none !important;
height:325px;
margin:7px;
overflow: hidden;
width:221px;
}

У меня все, что связано с .goodsListItemBlock
/* Список товаров в виде таблицы. Ячейки с товаром */
.goodsListItem   {text-align:center;vertical-align:top;width:195px;overflow:hidden;padding:0px;}   /* Размер в 200 пикселей сделан, чтобы и 2 и 5 товаров нормально смотрелись и была возможность увеличить разрешение до 1220 пикселей*/
.goodsListItemBlock {height:300px;width:210px;margin:5px;overflow:hidden;}



/* color: #390 !important;
font: bold 17px/20px Tahoma,Geneva,sans-serif !important;
} */
.goodsListItemBlock a    {}
.goodsListItemBlock a span span {color: #390; font-size:17px;font-weight:bold;}

Что из этого менять?

Спасибо.

Повторите пожалуйста вопрос. У Вас могут отличаться темы дизайна.

#6 Джейн

Джейн

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 293 сообщений
  • ГородСамара

Отправлено 30 Июль 2013 - 06:11

Просмотр сообщенияmiyako (29 Июль 2013 - 11:43) писал:

Повторите пожалуйста вопрос. У Вас могут отличаться темы дизайна.

У меня на странице самого товара картинка при наведении выделяется в рамку. Нужно, чтоб в каталоге тоже при наведении выделялась. Шаблон сияние.
http://101korset.ru/.../Длинные-платья

И еще такой вопрос. На разных компах по-разному выглядит панель меню сверху и подвал. У меня шрифт маленький, на других компах - большой. В подвале становится на 2 строчки, в панели "меню" все меню не умещается.На своем компе смотрела в разных браузерах, меняла разрешение экрана - все как было - смотрится одинаково.  Как сделать, чтоб на всех компах отображалось одинаково?

#7 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 30 Июль 2013 - 08:42

Просмотр сообщенияДжейн (30 Июль 2013 - 06:11) писал:

У меня на странице самого товара картинка при наведении выделяется в рамку. Нужно, чтоб в каталоге тоже при наведении выделялась. Шаблон сияние.
http://101korset.ru/.../Длинные-платья

И еще такой вопрос. На разных компах по-разному выглядит панель меню сверху и подвал. У меня шрифт маленький, на других компах - большой. В подвале становится на 2 строчки, в панели "меню" все меню не умещается.На своем компе смотрела в разных браузерах, меняла разрешение экрана - все как было - смотрится одинаково.  Как сделать, чтоб на всех компах отображалось одинаково?

1) Найдите код в main.css -
.listing .imagem {  position: relative;
  display: inline;
  float: left;
  width: 220px;
  margin-right: 10px;
border: 1px solid #D6D6D6;
  text-align: center;
  background: #FFF;
  padding: 1px;}
и замените на:
.listing .imagem {  position: relative;
  display: inline;
  float: left;
  width: 220px;
  margin-right: 10px;
  border: 0px;
  text-align: center;
  background: #FFF;
  padding: 1px;}
.listing .imagem :link {border: 1px solid #D6D6D6;}
.listing .imagem :hover {
border: 1px solid #FF8D13 !important;
}

Просмотр сообщенияДжейн (30 Июль 2013 - 06:11) писал:

У меня на странице самого товара картинка при наведении выделяется в рамку. Нужно, чтоб в каталоге тоже при наведении выделялась. Шаблон сияние.
http://101korset.ru/.../Длинные-платья

И еще такой вопрос. На разных компах по-разному выглядит панель меню сверху и подвал. У меня шрифт маленький, на других компах - большой. В подвале становится на 2 строчки, в панели "меню" все меню не умещается.На своем компе смотрела в разных браузерах, меняла разрешение экрана - все как было - смотрится одинаково.  Как сделать, чтоб на всех компах отображалось одинаково?

Можете сделать скриншоты? В каких браузерах Вы проверяли? Какая ОС? От компьютеров это не зависит.

#8 Джейн

Джейн

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 293 сообщений
  • ГородСамара

Отправлено 30 Июль 2013 - 08:43

Чет у меня фигня с рамками получилась. Терь у мня выделяется 2 рамки. Как убрать большую?
Не откатываю гляньте пожалста.

#9 Джейн

Джейн

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 293 сообщений
  • ГородСамара

Отправлено 30 Июль 2013 - 09:04

Прикладываю сканы шапки сайта
1 скан - это как выглядит сайт на дочкином компе и на компе у меня на работе.
2 скан - так как это должно выглядеть. На моем буке и на втором рабочем компе.



И сканы подвала сайта
1 скан - это как выглядит сайт на дочкином компе и на компе у меня на работе.
2 скан - так как это должно выглядеть. На моем буке и на втором рабочем компе.

Браузер везде один - гугля хром.

И стрелка вверх на дочкином буке смещена влево. как-то неправильно

Прикрепленные изображения

  • 1.jpg
  • 3.jpg
  • 2.jpg
  • 4.jpg


#10 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 30 Июль 2013 - 11:49

Просмотр сообщенияДжейн (30 Июль 2013 - 08:43) писал:

Чет у меня фигня с рамками получилась. Терь у мня выделяется 2 рамки. Как убрать большую?
Не откатываю гляньте пожалста.

Найдите код -
..listing .imagem {  position: relative;
  display: inline;
  float: left;
  width: 220px;
  margin-right: 10px;
  border: 0px;
  text-align: center;
  background: #FFF;
  padding: 1px;}
и замените на -
.listing .imagem {  position: relative;
  display: inline;
  float: left;
  width: 220px;
  margin-right: 10px;
  border: 0px;
  text-align: center;
  background: #FFF;
  padding: 1px;}
.listing .imagem :link {border: 1px solid #D6D6D6;}
.listing .imagem :hover {
border: 1px solid #FF8D13 !important;
}
У Вас в начале две точки было.

#11 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 30 Июль 2013 - 12:03

Также добавьте в конец main.css код -
.listing .imagem img:hover{border:0px;}

Просмотр сообщенияДжейн (30 Июль 2013 - 09:04) писал:

Прикладываю сканы шапки сайта
1 скан - это как выглядит сайт на дочкином компе и на компе у меня на работе.
2 скан - так как это должно выглядеть. На моем буке и на втором рабочем компе.



И сканы подвала сайта
1 скан - это как выглядит сайт на дочкином компе и на компе у меня на работе.
2 скан - так как это должно выглядеть. На моем буке и на втором рабочем компе.

Браузер везде один - гугля хром.

И стрелка вверх на дочкином буке смещена влево. как-то неправильно

Попробуйте изменить масштаб в браузер (ctrl+колесико мыши). А также попробуйте очистить кэш. Сейчас у Вас отображается как на скрин 1

#12 Джейн

Джейн

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 293 сообщений
  • ГородСамара

Отправлено 30 Июль 2013 - 13:13

Просмотр сообщенияmiyako (30 Июль 2013 - 11:49) писал:

Найдите код -
..listing .imagem { position: relative;
display: inline;
float: left;
width: 220px;
margin-right: 10px;
border: 0px;
text-align: center;
background: #FFF;
padding: 1px;}
и замените на -
.listing .imagem { position: relative;
display: inline;
float: left;
width: 220px;
margin-right: 10px;
border: 0px;
text-align: center;
background: #FFF;
padding: 1px;}
.listing .imagem :link {border: 1px solid #D6D6D6;}
.listing .imagem :hover {
border: 1px solid #FF8D13 !important;
}
У Вас в начале две точки было.

Убрала из кода
.listing .imagem :hover {
border: 1px solid #FF8D13 !important;
}
Только после этого пропала вторая рамка. Но терь цвет рамки стал черный, а при наведении голубой, причем как-то выборочно, не у всех картинок. На каких то серая рамка и при наведении ниче не меняется.  А мне надо, чтоб у всех основной цвет был светло-серый, а при наведении оранжевый - короче как на странице товара.

#13 Джейн

Джейн

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 293 сообщений
  • ГородСамара

Отправлено 30 Июль 2013 - 13:23

Просмотр сообщенияmiyako (30 Июль 2013 - 12:03) писал:

Также добавьте в конец main.css код -
.listing .imagem img:hover{border:0px;}



Попробуйте изменить масштаб в браузер (ctrl+колесико мыши). А также попробуйте очистить кэш. Сейчас у Вас отображается как на скрин 1

Весь смысл, что у меня отображается как на 2 и 4 сканах (на работе компьютер, дома бук) . Браузер я чистила много раз, у меня так отображается всегда. Я и подгоняла меню с подвалом на такое количество вкладок.  Мне вобщем и надо, чтоб отображалось именно как у меня, а не у Вас :)

Дочка тоже чистила браузер, на буке. На другом рабочем компе я чистила вааще все что можно. Он практически девственный :)  Но там отображается как у Вас. Вероятнее это связано именно с ПО. Меня не устраивает такое отображение :)

При увеличении масштаба на рабочем компе в меню появляется "Обратная связь" *после вкладки войти в ЛК, на дочкином буке НЕ появляется. Подвал так же остается на двух строчках.

Короче, я наверное путанно объясняю, хотелось бы, чтоб отображалось на всех 4 компах одинаково - как на 2 и 4 сканах :) Иначе люди не видят "Обратную связь". А убирать какие-то другие вкладки - не хочется. Нужно чтоб вкладки как резиновые, что ли , были. Чтоб распределялись по ширине менюшки и подвала

#14 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 31 Июль 2013 - 00:37

Проверил отображение вашего сайта как в Chrome так и в Firefox - везде одинаковый результат как на 2 и 4 прикрепленном вами изображении, только стрелка не смещена. Возможно все же проблема в ПО. Попробуйте обновить версию браузера, возможно дело именно в этом.

#15 Джейн

Джейн

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 293 сообщений
  • ГородСамара

Отправлено 31 Июль 2013 - 06:15

Просмотр сообщенияСake (31 Июль 2013 - 00:37) писал:

Проверил отображение вашего сайта как в Chrome так и в Firefox - везде одинаковый результат как на 2 и 4 прикрепленном вами изображении, только стрелка не смещена. Возможно все же проблема в ПО. Попробуйте обновить версию браузера, возможно дело именно в этом.

Попробую :)

У  http://forum.storela...er/6387-miyako/ отображается как на 1 скрине (у Вас как на 2)  :)

Цитата

Попробуйте изменить масштаб в браузер (ctrl+колесико мыши). А также попробуйте очистить кэш. Сейчас у Вас отображается как на скрин 1

Дело в том, что это надо заходить именно с разных компьютеров. Браузеры одного компьютера показывают одно и то же. У меня есть возможность зайти с 5 разных компов. На трех отображается 2 скан,  на двух - 1-й.

У дочки обновила гуглю, почистила кеш - ниче не поменялось. Как не умещались вкладки, так и не умещаются. В эксплорере у дочки верхняя менюшка нормальная, внизу как 2 скан, и вообще все как-то криво. Короче на это забила, у меня эксплорер нормально кажет.

Я б тоже никогда не заметила, что в меню не отображается одна вкладка,если б дочка не сказала, что у нее нет той вкладки, которую я поставила последней. Когда я ее попросила высказать свое мнение, она долго ее искала, не нашла, сильно на меня возмущалась, что я посылаю непонятно куда - вот только тогда я увидела в чем дело.

Мое мнение такое, что вкладки в меню и в подвале нужно сделать "резиновыми", чтоб при любом разрешении экрана, любом ПО и компе они растягивались в нужный установленный диапазон. Может я конечно и не права, но зайдите с нескольких компьютеров, наверняка хоть на одном, но не будет хватать вкладок.
Заранее извиняюсь, если я просто чего-то недопоняла.

#16 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 01 Август 2013 - 01:45

Пожалуйста, сообщите это происходит всегда на одной и той же операционной системе? т.е например на всех компьютерах стоит Windows 7 или XP. Резину в данном случае сделать не получиться, по причине того что тянуть нечего, для меню попросту не хватает места. Есть вероятность что проблема заключается в установленном шрифте, который в свою очередь то есть, то нет на некоторых системах. У вас для пунктов меню задан не безопасный шрифт Gabriola. В следующих классах файла main.css

#mainmenu {
font-family: "Gabriola";
}
#mainmenu li a {
	background: url("http://design.101korset.ru/tm_link_border.gif") no-repeat scroll right top transparent;
	color: #FFFFFF;
	display: block;
	float: left;
	font: bold 12px/40px "Gabriola";
	padding-left: 15px;
	padding-right: 15px;
	text-decoration: none;
	text-transform: uppercase;
}
#footer .left ul li {
	border-right: 1px solid #666666;
	color: #333333;
	display: inline;
	font: bold 19px "Gabriola";
	margin-right: 12px;
	padding-right: 12px;
}

Попробуйте задать другой - безопасный шрифт, возможно это решит данную проблему.

Почитайте
http://habrahabr.ru/post/63343/
http://www.xiper.net...safe-fonts.html

#17 Джейн

Джейн

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 293 сообщений
  • ГородСамара

Отправлено 01 Август 2013 - 07:35

Спасибо :) Вероятнее всего, так оно и есть. Буду разбираться :)

#18 Джейн

Джейн

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 293 сообщений
  • ГородСамара

Отправлено 01 Август 2013 - 08:11

Прошу еще раз помочь с этой темой. А то ее как-то упустили из виду :)

А то я тож чет наделала, а че - непонятно.


Просмотр сообщенияДжейн (30 Июль 2013 - 13:13) писал:

Убрала из кода
.listing .imagem :hover {
border: 1px solid #FF8D13 !important;
}
Только после этого пропала вторая рамка. С этим кодом отображается 2 рамки (большая и маленькая) . Но терь цвет рамки стал черный, а при наведении голубой, причем как-то выборочно, не у всех картинок, а где-то 2 с черной, одна с серой. На каких то серая рамка и при наведении ниче не меняется.  А мне надо, чтоб у всех основной цвет был светло-серый, а при наведении оранжевый - короче как на странице товара.


#19 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 209 сообщений

Отправлено 02 Август 2013 - 00:17

Найдите в вашем файле стилей main.css

.listing .imagem :link {border: 1px solid #D6D6D6;}

и замените на

.listing .imagem {border: 1px solid #D6D6D6;}
.listing .imagem:hover {border: 1px solid #FF8D13 !important;}


#20 Джейн

Джейн

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 293 сообщений
  • ГородСамара

Отправлено 02 Август 2013 - 00:56

Сделала. Все нормально. Спасибо.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных