—»     —»   Абсолютное позиционирование CSS: Симпатичный блок ссылок
  Раздел: Меню и Навигация   Комментариев: 3  

Абсолютное позиционирование CSS: Симпатичный блок ссылок

Абсолютное позиционирование это свойство CSS2, которое поддерживается во всех браузерах. Если вы расположите элемент (изображение, таблицу, или что-либо еще) на странице, то оно отобразится в той области, в которой вы вручную укажете по пикселям. В данной статье мы используем некоторые трюки для создания симпатичного блока ссылок, что сделает наши ссылки более привлекательными.

Конечный результат нашей работы будет такой же, как показано на изображении ниже.

Абсолютное позиционирование CSS: Симпатичный блок ссылок

Создайте ваш элемент блока ссылок на HTML

Для начала мы напишем код HTML. Наш блок будет включать в себя тэги ссылки, текст ссылки, описание ссылки и изображение.

Вот так будет выглядеть наш HTML-код:

<ul id="subscribe">
      <li>
        <a class="linkblock" href="http://feeds2.feedburner.com/prlamnguyen" title="Full RSS Feed"></a>
        <img src="images/feed.png" alt="Full RSS Feed" />
        <h4>Full RSS Feed</h4>
        <p>Subscribe to our RSS Feed with full posts for your enjoyment.</p>
      </li>
      <li>
        <a class="linkblock" href="http://feedburner.google.com/fb/a/mailverify?uri=prlamnguyen&amp;loc=en_U" title="E-Mail Delivery"></a>
        <img src="images/email.png" alt="E-Mail Delivery">
        <h4>E-Mail Delivery</h4>
        <p>We will send full blog posts to your inbox each time new posts plublished.</p>
      </li>
    </ul>

Перед тем, как добавлять форматирование CSS, давайте взглянем на наш блок

Абсолютное позиционирование CSS: Симпатичный блок ссылок

Применения форматирования CSS

Добавим это в наш код CSS

Для списка ссылок:

#subscribe {
    list-style: none;
    margin: 0px;
}
#subscribe li {
    padding: 10px;
    position: relative;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 5px;
    margin-left: 0;
    height: 64px;

}

Для текста ссылок:

#subscribe li h4 {
    margin: 0 0 0 45px;
    font-size: 24px;
    line-height: 26px;
    color: #333333;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    display: block;
    clear: none;
    border: none;
}

Нам требуется указать отступ с левой стороны для текста ссылки в 45 пикселей, потому что на этом месте будут отображаться изображения. Не забудьте указать параметр "clear:none", так как изображение будет отображаться с левой стороны.

Форматирование описания ссылки:

#subscribe li p {
    margin: 0 0 0 45px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 13px;
    letter-spacing: -0.02em;
    clear: none;
}

Также, не забудьте указать параметр "clear:none".

Добавляем CSS-код для изображения:

#subscribe li img {
    float: left;
    position: relative;
    padding: 0px;
    margin: 0px 10px 0px 0px;
}

Давайте еще раз посмотрим на наш код HTML. Так как у нас ничего нет внутри тэга ссылки, мы пропишем CSS-код, который сделает так, чтоб ссылка распространялась на весь блок. Это можно реализовать одним методом – установить позицию данной ссылки как абсолютным, а значение положения со всех сторон должно ровняться 0.

#subscribe li a.linkblock {
    background: none;
    border: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 50;
}

Не забывайте указать значение z-index для ссылки. Это для того, чтобы она всегда отображалась сверху. Если этого не сделать, то блок ссылок не будет работать.

Следующий CSS-код используется для смены фона блока ссылок, при наведении мыши.

#subscribe li:hover {
    background-color: #F5F5F5;
}

Это не будет работать в IE6, если не применить параметр "whatever:hover". Хотя, мы считаем, что уже давно пришел тот день, когда нужно было выкинуть в корзину данный браузер.

Скачать архив с материалом:
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Mysterious Master   Прочитано (раз): 7920   |   Оставлено комментариев: 3
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 1 апреля 2010 @ 03:19
Написал: seabear — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Хорошо пишете. С удовольствием читаю Ваши публикации.
Комментарий #2: 1 апреля 2010 @ 08:58
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1492   |   Комментариев: 177
ICQ: --- не указано ---
seabear, спасибо, стараемся.
Комментарий #3: 25 февраля 2011 @ 10:11
Написал: Tigor — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Классная статья! Но есть проблема с отображением в IE9. Если тег [a] оставлять пустым, то он "отказывается" подниматься выше слоя картинок и текста. Активной зоной тега становятся незанятые места блока.
Если же ввести для ссылки любой фон, то она тут же оказывается наверху и активна вся зона блока [li].
Что можно предпринять в этом случае?
Спасибо за интересный сайт!!!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Май 2020    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031