slogin.info

ihc 468x60 1 1
Звезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активнаЗвезда не активна0 / 5
 
Автор: Администратор
Просмотров: 2003
Теги: css, html, tag a

В этой статье мы расскажем о том, как сделать целый слой ссылкой, это может быть любой div(блок, другими словами).

Тэг ссылки <a>, как известно не является блочным элементом, в связи с этим невозможно сделать ссылкой какой-то слой, например прямоугольную область. А необходимость такая появляется довольно часто.

Частный случай, когда ссылкой оборачивают картинку и тогда она становится прямоугольной ссылкой с изображением внутри.

Но вот, если вам необходимо сделать ссылкой целый слой, тогда этот вариант не подойдет, ведь в слое может быть множество текста, изображений.

На помощь тут приходит небольшая хитрость. Для начала создадим заготовку HTML-разметку, которая будет состоять из <div> внутри которого будет помещена ссылка <a>, внутри которой будет какой-то текст:

	<div>
		<a href="/">
			Содержание слоя-ссылки
		</a>
	</div>

Следующий наш шаг, задать какие-то размеры для внешнего <div>. Для внутреннего тэга <a> зададим свойство display, со значением block, что позволит работать с ссылкой, как со слоем. По умолчанию такие слои занимают всю ширину, но не всю высоту, поэтому так же добавим свойство height, со значением 100%. Для наглядности добавим фоновый цвет ссылке.

div {
	height:300px;
	width:400px;
}
	div a {
		display:block;
		height:100%;
		background:#CC3333;
	}

Результат можно наблюдать ниже, получилась прямоугольная область-ссылка, это видно при наведении на нее(курсор меняется на указатель), и по цвету слоя-ссылки.

Добавить комментарий

Авторизоваться с помощью:

     


Защитный код
Обновить

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • ZOMRO
    6.40
  • intuit89
    6.00
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Похожие материалы

Языки программирования сайтов

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее
Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее
!important в CSS Просмотров 2303
!important в CSS

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее
Как подключать свои шрифты на сайт, или все о @font-face в CSS

В этой статье я расскажу о том, каким образом можно подключить сторонние шрифты на свой сайт, а так же дам пару полезных ссылок и советов.

Теги:

css, css3, @font-face, font, шрифт

Комментариев: 0 Подробнее

Последнее с форума

ZOMRO аватар
Домен — это неотъемлемая часть бизнеса, которая также влияет на поисковую систему. Признаки доменно...
Перейти в тему
ZOMRO аватар
На что ориентироваться при выборе хостинга? Функционал и количество ресурсов. Выбираем те параметр...
Перейти в тему
ZOMRO аватар
Красивое имя для сайта или регистрация доменных имен. Заказав у нас услугу хостинга или VDS/VPS, Вы ...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.