VPF::Помогите разобраться с ссылкой в CSS

zluka

Дата 3.2.2009, 15:08 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 278
Регистрация: 27.7.2006

Репутация: нет
Всего: 2

Чтоб было понятней, вот картинка. Мне нужно чтобы подсвечивалось только "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 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

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

zluka

Дата 3.2.2009, 16:12 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 278
Регистрация: 27.7.2006

Репутация: нет
Всего: 2

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

Код


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

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

--------------------

bars80080

Дата 3.2.2009, 18:50 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

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

zluka

Дата 3.2.2009, 19:19 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 278
Регистрация: 27.7.2006

Репутация: нет
Всего: 2

Цитата(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 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

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

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

Код


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

blah

Дата 3.2.2009, 23:20 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

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

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

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

Код


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

Это сообщение отредактировал(а) blah - 3.2.2009, 23:23

zluka

Дата 3.2.2009, 23:34 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 278
Регистрация: 27.7.2006

Репутация: нет
Всего: 2

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

)

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

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

Правда появилась другая небольшая проблемка, прошу взглянуть сюда
Добавилась половинка стрелки (глюк?). Правда это в Опере и Гугл Хроме. В IE все нормально.

Это сообщение отредактировал(а) zluka - 3.2.2009, 23:39

--------------------

blah

Дата 4.2.2009, 01:03 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 25.9.2008
Где: моя тачка, чувак?

Репутация: 15
Всего: 17

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

zluka

Дата 4.2.2009, 13:35 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 278
Регистрация: 27.7.2006

Репутация: нет
Всего: 2

Вот стили

Присоединённый файл ( Кол-во скачиваний: 5 )

style.rar 2,93 Kb

--------------------

zluka

Дата 5.2.2009, 17:59 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 278
Регистрация: 27.7.2006

Репутация: нет
Всего: 2

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

--------------------

Violator

Дата 6.2.2009, 02:49 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 234
Регистрация: 10.1.2009

Репутация: 15
Всего: 15

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

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »