Помощник
|
Изменения цвета ссылок внутри списков при наведении курсора на элемент списка li |
Andy Superstar
|
Сообщение
#1
|
||
|
|
||
|
|||
k3ymak3r |
5.8.2008, 12:50;
Ответить: k3ymak3r
Сообщение
#2
|
|
не задавайте елементу <li> цвет фона. для a:hover пропишите следующий класс:
A:hover { background-color: #000000; color: #ffffff; } вот и вся "закорючка" ;) |
|
|
Andy Superstar
|
Сообщение
#3
|
|
Да не тут-то было. Трабл втом, что элменты li по имееют фиксированную ширину и соответственно эта ширина больше ширины элемента a.
Выходит так: при наведении выделяется фоном, ссылка-слово, ну а слева и справа ничего не выделяется. Так что есть какие мысли у кого, как реализовать? |
|
|
Exterior |
15.8.2008, 22:21;
Ответить: Exterior
Сообщение
#4
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>li test</title> <style type="text/css"> <!-- ul { list-style: none; } li { width: 200px; margin: 2px; background: white; border: solid 1px red; } li a { width: 100%; display: block; color: black; background: white; text-decoration: none; } li a:hover { color: white; background: black; } --> </style> </head> <body> <ul> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </body> </html> так? |
|
|
Andy Superstar
|
Сообщение
#5
|
|
Да это действует. Но есть одно "но":
На форуме htmlbook усердно настаивают, что li a является строчным и никак не блочным элементом. Другими словами они говорят, что применять li a является не правильным. Можно ещё как-нибудь обойтись без display: block; для li a? |
|
|
Exterior |
15.8.2008, 23:52;
Ответить: Exterior
Сообщение
#6
|
|
(' post='10389 @ 16.8.2008, 02:14) Другими словами они говорят, что применять li a является не правильным нигде в спецификации такого не сказано, кроме того, любой строчный элемент, ставший впоследствии блочным, может содержаться внутри блочного, что и есть в данном случае, стандарты это допускают, пример: <div>text <p style="width:50px; display:block;">text</p> <span style="width:50px; display:block;">text</span></div> (' post='10389 @ 16.8.2008, 02:14) Можно ещё как-нибудь обойтись без display: block; для li a? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>li test</title> <style type="text/css"> <!-- ul { list-style: none; } li { width: 200px; margin: 2px; border: solid 1px red; cursor: pointer; } .li_over { color: white; background: black; } .li_out { color: black; background: white; } --> </style> </head> <body> <ul> <li onmouseover="this.className='li_over';" onmouseout="this.className='li_out';" onclick="location.href='#';">Link</li> <li onmouseover="this.className='li_over';" onmouseout="this.className='li_out';" onclick="location.href='#';">Link</li> <li onmouseover="this.className='li_over';" onmouseout="this.className='li_out';" onclick="location.href='#';">Link</li> <li onmouseover="this.className='li_over';" onmouseout="this.className='li_out';" onclick="location.href='#';">Link</li> </ul> </body> </html> P.$. всегда пользовался первым вариантом и проблем не возникало |
|
|
Andy Superstar
|
Сообщение
#7
|
|
Я тоже всегда пользовался первым, тем более в туториалах различных именно display:block; и указано. Но вот, уверяют в обратном. В любом случае варианты полезные.
Кстати по поводу ссылок: что лучше использовать? Конструкцию <li><a href="#">Link</a></li> или же <li onclick="location.href='#';">Link</li> Какая разница между этими втжами указания ссылки? |
|
|
Exterior |
16.8.2008, 11:03;
Ответить: Exterior
Сообщение
#8
|
|
во втором случае роботы не увидят ссылку, соответственно, не проиндексируют.
Если таким образом делать меню на сайте, это сильно затруднит индексацию внутренних страниц. |
|
|
Andy Superstar
|
Сообщение
#9
|
|
|
А, окей. Значит блоками опять делать будем.
|
|
|
||
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Быстрая индексация страниц сайта и обратных ссылок - 2Index | 38 | 2Index | 6617 | Вчера, 12:56 автор: 2Index |
|
GogetTop.net - сервис аренды ссылок с сети PBN адалт тьюбо | 1 | Crimean | 1433 | 11.4.2024, 10:05 автор: Crimean |
|
Ручное размещение вечных ссылок и статей на хороших площадках Опыт 10 лет! |
420 | leonidukg | 274577 | 8.4.2024, 12:06 автор: leonidukg |
|
Крауд-маркетинг. Ручное размещение ссылок под бурж с гарантией | 24 | seolink.orders | 12893 | 2.4.2024, 17:23 автор: seolink.orders |
|
Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на первый заказ. Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на п |
7 | stu999 | 1753 | 31.3.2024, 11:19 автор: stu999 |
Текстовая версия | Сейчас: 19.4.2024, 6:28 |