Как сделать, чтобы слой целиком был ссылкой?

🕛 22.01.2009, 23:39

При размещении ссылки внутри слоя заданных размеров, иногда возникает задача, чтобы ссылкой был не только текст, но и сам слой. Особенно это бывает актуально при создании различных меню. Для изменения вида ссылки к селектору A в стилях следует добавить атрибут display со значением block, чтобы превратить ссылку в блочный элемент. Такой элемент по умолчанию занимает всю свободную ширину внутри родителя. Также необходимо указать атрибут height: 100%, ссылка после этого будет занимать всю доступную высоту внутри слоя (пример 1).

Пример 1. Ссылка внутри слоя

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Слой-ссылка</title> <style type="text/css"> .link { width: 300px; /* Ширина слоя */ height: 200px; /* Высота слоя */ background: #fc0; /* Цвет фона */ } .link a { display: block; /* Ссылка как блочный элемент */ text-align: center; /* Выравнивание по центру */ height: 100%; /* Высота на весь слой */ color: #666; /* Цвет ссылки */ } </style> </head> <body> <div class="link"> <a href="link1.html">Ссылка</a> </div> </body>
</html>