Jump to content
  • 0

Подчеркивание ссылки


hopes_in_life
 Share

Question

Всем доброго времени суток! :) Помогите, пжалуйста

Исходный код html

<html>

<head><title></title></head>

<body>

<div class="zagolovok"><a href="http://www.pravovest.ru/hotnews/" title="Новости законодательства">

<strong><h1>Горячие новости законодательства</h1></strong></a></div></body>

</html>

Исходный код css

h1 {

font-family: Arial, Helvetica, sans-serif;

font-size: 12pt;

color: #636363;

}

.zagolovok a{

text-decoration: none;

}

.zagolovok a:hover {

text-decoration: underline;

color: #636363;

}

.zagolovok {

position: relative;

margin-top: 50px;

}

В таком варианте при наведении курсора на ссылку она подчеркиается жирной чертой. А как сделать так, чтобы подчеркивание было толщиной в 1px? Вариант border-bottom в IE не работает.

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0
В таком варианте при наведении курсора на ссылку она подчеркиается жирной чертой. А как сделать так, чтобы подчеркивание было толщиной в 1px? Вариант border-bottom в IE не работает.

Вариант border-bottom в IE работает. Показывай как делаешь.

И, кстати, у тебя ошибка. Нельзя вкладывать блочное в строчные элементы.

<a href="http://www.pravovest.ru/hotnews/" title="Новости законодательства">
<strong><h1>Горячие новости законодательства</h1></strong></a>

Не правильно. И strong здесь в принципе излишен. h1 и так дает жирний шрифт. Исправь этот кусок на

<h1><a href="http://www.pravovest.ru/hotnews/" title="Новости законодательства">Горячие новости законодательства</a></h1>

И еще один момент. h1 на странице должен быть только один.

Edited by sigma77
Link to comment
Share on other sites

  • 0
Обоснуй

Можно я обосную? ;)

Сам тэг можно использовать сколько хочешь, никто не запрещает.

Другой вопрос, что это не рекомендовано. Не рекомендовано из-за того, что поисковая система может запутаться с ранжированием важности заголовков и, в результате, эффективность H1 в индексировании (и так маленькая в современных поисковиках) вообще скатывается к нулю.

А так хоть 100 заголовков засовывай.

Edited by Verder
Link to comment
Share on other sites

  • 0

Если это какойнить блог, где одна статья на одну страничку, то там конечно лучше 1 заголовок первого уровня.

А если у тя страничка насыщенна разнообразной инфой, краткими статьями... то почему бы и нет?

А как сделать так, чтобы подчеркивание было толщиной в 1px? Вариант border-bottom в IE не работает.

Неработает потому что нехватает высоты строки.

Твой код напоминает масло маслянное. И Н1, и стронг. Делай как sigma77 показала.

<h1><a href="http://www.pravovest.ru/hotnews/" title="Новости законодательства">Горячие новости законодательства</a></h1>

Link to comment
Share on other sites

  • 0

Часто есть привычка делать один Н1 на страничке, и этим Н1 называть саму страничку.

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

Но переусердствовать тоже не стоит. Я не говорю что можна весь сайт в Н1 заключить. Меру нужно знать.

Edited by mishka2
Link to comment
Share on other sites

  • 0
Так вот вопрос - неужели для поисковика более информативно будет "Про нас", нежели далее по тексту несколько Н1 со словами "собираем яблоки", "продаем яблоки"?

Для этого есть тег <strong> - важность слов для поисковика.

Link to comment
Share on other sites

  • 0
Вариант border-bottom в IE работает. Показывай как делаешь.

И, кстати, у тебя ошибка. Нельзя вкладывать блочное в строчные элементы.

<a href="http://www.pravovest.ru/hotnews/" title="Новости законодательства">
<strong><h1>Горячие новости законодательства</h1></strong></a>

Не правильно. И strong здесь в принципе излишен. h1 и так дает жирний шрифт. Исправь этот кусок на

<h1><a href="http://www.pravovest.ru/hotnews/" title="Новости законодательства">Горячие новости законодательства</a></h1>

И еще один момент. h1 на странице должен быть только один.

Спасибо за замечание по поводу h1.

По поводу border-bottom делаю так :

.zagolovok a:hover {

border-bottom: 1px solid #000000;

color: #636363;

}

Link to comment
Share on other sites

  • 0

Здраствуйте !

Меня вот заинтиресовал такой вопрос :

Как сделать ссылки с подчёркиванием но только чтобы черта была перед ссылкой ? Пример на _http://www.gimp.org/

в правом верхнем углу -News-Screenshots-Features-Downloads и тд.

Посмотрел примеры на _http://www.htmlbook.ru/content/?id=57 но там этого эффекта нет. Через поисковики тоже ничего не нашёл. Наверно неправильно запросы делаю ? Может кто чем помочь ?

Link to comment
Share on other sites

  • 0
Здраствуйте !

Меня вот заинтиресовал такой вопрос :

Как сделать ссылки с подчёркиванием но только чтобы черта была перед ссылкой ? Пример на _http://www.gimp.org/

в правом верхнем углу -News-Screenshots-Features-Downloads и тд.

Посмотрел примеры на _http://www.htmlbook.ru/content/?id=57 но там этого эффекта нет. Через поисковики тоже ничего не нашёл. Наверно неправильно запросы делаю ? Может кто чем помочь ?

это не какое не подчеркивание это свойство hover http://www.htmlbook.ru/css/hover.html

Есть множество способов реализовать это, проще всего сделать ссылки списками сделать их блочными, и по наведению рисовать фон ввиде этой вертикальной черты с краю...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy