SEO Сообщество: Спрашивайте и помогайте

Присоединяйтесь к сообществу профессиональных веб-мастеров PR-CY, отвечайте на вопросы коллег и задавайте свои.

Q&A SEO

Проблема с кодом

Budun Budun  
46
  11.12.2012 16:04       1 435    
Помогите разобраться с кодом.

Проблема в том что при наведении курсора (к примеру) на слово Apple, акивность курсора становится не только на слове Apple, но и по всей горизонтали с права от этих слов.

Как здесь правильно поправить что бы линьк и a:hover работали конкретно на словах Apple, Samsung, Sony
Тест сайт

HTML:

<div class="list_links">
<a href="https://pr-cy.ru/jump/?url=http%3A%2F%2Fkompcenter.net.ua%2F%3Fpage_id%3D2">
<div class="div1"></div>
</a><a href="https://pr-cy.ru/jump/?url=http%3A%2F%2Fkompcenter.net.ua%2F%3Fpage_id%3D5">
<div class="div2"></div>
</a>
<a href="https://pr-cy.ru/jump/?url=http%3A%2F%2Fkompcenter.net.ua%2F%3Fpage_id%3D7">
<div class="div3"></div>
</a>
<a href="https://pr-cy.ru/jump/?url=http%3A%2F%2Fkompcenter.net.ua%2F%3Fpage_id%3D9">
<div class="div4"></div>
</a>
</div>

CSS:

.list_links .div1 {
display: block;
position: relative;
left: 110px;
top: 25px;
width: 180px;
height: 65px;
}
.list_links a .div1 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
display: block;
text-indent: -9999px;
}
.list_links a:hover .div1 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://kompcenter.net.ua/images/doska_menu_ege.gif");
background-origin: padding-box;
background-position: left top;
background-repeat: no-repeat;
background-size: auto auto;
}
.list_links .div2 {
display: block;
position: relative;
left: 55px;
top: 20px;
width: 240px;
height: 65px;
}
.list_links a .div2 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
display: block;
}
.list_links a:hover .div2 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://kompcenter.net.ua/images/doska_menu_ege.gif");
background-origin: padding-box;
background-position: 53px top;
background-repeat: no-repeat;
background-size: auto auto;
}
.list_links .div3 {
display: block;
left: 110px;
position: relative;
top: 15px;
width: 180px;
height: 65px;
}
.list_links a .div3 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: none;
background-origin: padding-box;
background-position: 0 0;
background-repeat: repeat;
background-size: auto auto;
display: block;
}
.list_links a:hover .div3 {
background-attachment: scroll;
background-clip: border-box;
background-color: transparent;
background-image: url("http://kompcenter.net.ua/images/doska_menu_ege.gif");
background-origin: padding-box;
background-position: left top;
background-repeat: no-repeat;
background-size: auto auto;
}

Ответы на пост (8) Написать ответ
mav123 mav123
1073
11.12.2012 16:21
То есть облачко должно появляться, но не должно быть ссылкой, а ссылкой должны быть исключительно буквы, а не область вокруг?
0
Budun Budun
46
11.12.2012 17:24
Нет немного не так. Вы попробуйте навести не на доске (на надписях), а намного правее, напротив этих надписей. Они все равно становятся активными и появляется облачко. Мне нужно что бы облачко и активность была только конкретно при наведении на надписи.
0
Monix Monix
57
11.12.2012 17:57
У
div#widget_doska установите
width: 475px;
0
Monix Monix
57
11.12.2012 17:58
даже
456
0
Monix Monix
57
11.12.2012 18:17
Ан нет, обманул...
У
div.widget ul, div.textwidget поставить
  1. width: 179px;
  2. padding-left: 110px;
И все будет нормально
0
Budun Budun
46
11.12.2012 18:57
Нет это не решение проблемы. Мне нужна ширина div#widget_doska 1070px; Может кто подскажет идею. Ну почему активация происходит по всей ширине.
0
Monix Monix
57
11.12.2012 19:39
div.widget ul, div.textwidget
width: 179px;
padding-left: 110px;
0
pr1d0 pr1d0
10
12.12.2012 14:21
.list_links {width:300px;} или в % если у вас там резина
0