• Закажи товарища
  • Как качать с торрентов не волнуясь о рейтинге?
  • После прочтения – сжечь!
  • Parrot AR.Drone – летающий робот
  • Осознанные сновидения
  • В отпуск!
  • Интерактивный редактор кода для jQuery
  • Tenga egg – яйца для мужчин
  • Бесплатный проезд на электричках
  • ASIMO робот компании Honda
  • Марадона в молодости
  • Microsoft MySong Аккомпанимент
  • Квест выберись из комнаты
  • Легкий способ сделать сайт
  • Достаточно 3 человека, чтобы снять высадку в нормандии
  • Red Bull BC One 2007 South Africa Highlight
  • Фокусы с лазером
  • Sony – Робот QRIO
  • Мобильные карты, пробки, и сообщества
  • Perpetuum Jazzile – Africa
  • Тот самый «Чумазик» жив
  • Самый первый тестовый пост
  • 20 марта

    Правильные иконки к ссылкам при помощи CSS

    Веб-мастеру — Метки: , , — Pion2er1422 дня назад

    Узнал об интересном способе проставлять разным ссылкам разные иконки и все это при помощи CSS. Прикольно и так просто :)

    Пример:

    Подставляем нужную иконку для ссылки указывающей на файл с расширением .pdf
    имея ссылку такого типа

    <a href="document.pdf">Ссылка на документ pdf</a>
    

    достаточно написать вот такой CSS файлец и подготовить нужную иконку

    a[href $='.pdf'] {
       padding-right: 18px;
       background: transparent url(pdf-ico.gif) no-repeat center right;
    }
    

    в вышеупомянутом примере к любму тегу имеющему атрибут href заканчивающийся на .pdf будет применен стиль. Отступ справа на 18 пикселей и наложением фона(иконки) с выравниванием в правом по горизонтали и по центру по вертикали. Знак доллара $ перед знаком = означает, что совпадения ищутся с конца строки.


    Похожим же образом можно определить ссылку уазывающую на e-mail и подставить иконку письма.

    <a href="mailto:test@pion.ru">Пишите письма</a>
    
    a[href ^="mailto:"] {
       padding-right: 20px;
       background: transparent url(icon_mail.gif) no-repeat center right;
    }
    

    ^ - означает то, что совпадения ищутся в начале строки

    Да, чуть не забыл. Для нормальной работы в ИЕ7 а может и еще в каких браузерах, нужно в начале ХТМЛ документа
    ставить эту строку.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    
    Все права на записи принадлежат порталу PION.RU. При использовании любой информации с данного сайта, обратная ссылка «открытая» для поисковых машин на эту страницу обязательна! В противном случае вы нарушатете закон Российской Федерации об авторском праве и смежных правах. Статья 7.3

    Похожие записи:

    1. Кнопка с закругленными уголками в 1px при помощи стилей
    2. PNG fixer для IE6
    Распечатать запись Распечатать запись



    Комментарии (3) »

    1. Во всех браузерах работает?

      jeka еще не оценил запись.

      комментарий by jeka
      — 20 марта 2008 @ 15:06

    2. Вроде как да, я проверил в ИЕ7 и Опере потом проверю в ФФ и ИЕ6, как время будет. Ваще штука хорошая, буду пользовать в будущем.

      Pion2er оценил запись: Pion2er gives a rating of 5Pion2er gives a rating of 5Pion2er gives a rating of 5Pion2er gives a rating of 5Pion2er gives a rating of 5

      комментарий by Pion2er
      — 20 марта 2008 @ 15:10

    3. в шестом осле не работает, а жаль

      Azazello еще не оценил запись.

      комментарий by Azazello
      — 15 апреля 2008 @ 14:20

    Оставить комментарий

    RSS лента комментариев на эту запись. TrackBack URL

    1. Подпишись на
      RSS ленту
    2. Pion.ru
      на Twitter
    3. Делись с
      друзьями
    • Зарабатываем

    • 221.69 руб. заработано за сутки в бирже ссылок SAPE:
      Место в рейтинге: 119-8

    Как вы относитесь к церкви?

    Результаты

    Loading ... Loading ...