Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Помогите разобраться с ссылкой в CSS

Автор: zluka 3.2.2009, 15:08

Чтоб было понятней, вот http://pic.ipicture.ru/uploads/090203/JxEDZSdkas.jpg. Мне нужно чтобы подсвечивалось только "JavaScript для начинающих", а в данном случае (как показано на картинке) у меня область действия ссылки выходит за границу этих слов. Чувствую что-то я нахимичил..
Вот html код:

Код


<div id="main">
<a href='js.html'><h1>JavaScript для начинающих<span class='type'>Книга</span></h1></a>
</div>

Вот CSS:

Код


#main h1 
{
    padding: 8px 0 3px 25px;
    text-transform: none;
    background: url(square_arrow.gif) no-repeat 0% .7em;
    border-bottom: 2px solid #f2f2f2;    
    color: #339900;    
}

#main a:hover h1 
{
   color: #95C26B;/*#3FC100 #72A545*/
   text-decoration: underline;
}

#main .type
{
  padding: 8px 0 3px 5px;
  text-transform: none;
  font: normal 15px Courier New, sans-serif;
  color: #777;
}

Спасибо за помощь.

Автор: bars80080 3.2.2009, 15:23

а ты что не видишь, что у тебя "книга" со всеми полями внутри ссылки?

Автор: zluka 3.2.2009, 16:12

Да я то вижу) Вот сделал так:

Код


<a href='js.html'><h1>JavaScript для начинающих</h1></a><span class='type'>Книга</span>

Но теперь слово "Книга" убежало на начало новой строки:( Даже если и так, то всё равно ссылка <a> действует до конца нижней линии.

Автор: bars80080 3.2.2009, 18:50

а как оно может быть иначе? h1 - внутри ссылки, а нижняя граница - это граница h1.

Автор: zluka 3.2.2009, 19:19

Цитата(bars80080 @ 3.2.2009, 18:50

)

а как оно может быть иначе? h1 - внутри ссылки, а нижняя граница - это граница h1.

Я для прикола закоментировал 2 строки в css:

Код


/*
    background: url(square_arrow.gif) no-repeat 0% .7em;
    border-bottom: 2px solid #f2f2f2;
*/

И что вы думаете? Правильно, опять не работает как надо, то есть снова подсвечивается "до конца".

Автор: bars80080 3.2.2009, 21:44

а если закоментировать поля padding: 8px 0 3px 25px; которые и образуют площадь вокруг ссылки?

кстати, в начале стилей стоит:

Код


* { margin: 0px; padding: 0px; }

Автор: blah 3.2.2009, 23:20

h1 - блочный элемент. Дальше продолжать?

Ладно, так уж и быть.

Структура по крайней мере должна быть такой

Код


<h1><a href='js.html'>JavaScript для начинающих<span class='type'>Книга</span></a></h1>

Автор: zluka 3.2.2009, 23:34

Цитата(blah @ 3.2.2009, 23:20

)

Структура по крайней мере должна быть такой

Спасибо, я как раз так и сделал, все заработало smile

Правда появилась другая небольшая проблемка, прошу взглянуть http://pic.ipicture.ru/uploads/090203/6rF2TF3Ua4.jpg
Добавилась половинка стрелки (глюк?). Правда это в Опере и Гугл Хроме. В IE все нормально.

Автор: blah 4.2.2009, 01:03

Нет, не глюк. Стили, пожалуйста.

Автор: zluka 4.2.2009, 13:35

Вот стили

Автор: zluka 5.2.2009, 17:59

Ребят, помогите. Сам точно этот глюк не разгребу:(

Автор: Violator 6.2.2009, 02:49

a {... background:inherit; ...}
a:hover {... background:inherit; ...}