Что это
Хорошо, предположим, что у вас есть готовые шаблоны основном, с типичной корпоративной макета: заголовок, содержание части тела, и нижних колонтитулов. В заголовке вы разместили фоновое изображение с большим логотипом компании и некоторые интересные Работа рядом с ним, с некоторыми динамического контента на верхней части правого нижнего угла фонового изображения. Вдруг вы понимаете, что нажать на участие компании логотип, что фоновое изображение должно привести пользователя на главную страницу. Обычно вы бы вырезать изображение и поместить его прямо в ссылке. Однако у вас нет достаточно времени, чтобы сократить до изображения и повторно работы шаблон соответственно, так что вам нужно, это быстро исправить.
В этот момент ваш HTML структура может выглядеть следующим образом:
<div id="site">
<div id="full-width-header">
<div id="header-content">We love using Joomla!</div>
</div>
<div id="body-content">OSM saves the world!</div>
<div id="footer-content">(c) the really cool web-designer</div>
</div>
И ваш CSS следующим образом:
#full-width-header {
background: url(header-logo.jpg);
width: 800px;
height: 172px;
}
#header-content {
position: relative;
float: right;
width: 400px;
height: 172px;
vertical-align: bottom;
text-align: right;
}
Примечание: Законные использует для следующей техники могут включать в себя такие вещи, как вкладки-интерфейсы, где вкладки должны быть в состоянии протянуть и еще есть фоновое изображение, или блог-скинов, которые отличаются только CSS.
Как это сделать
Первое: Вы не можете просто скопировать # заголовок-содержание DIV, расположите ее на логотип, сделать контент невидимым и заключить его в якорь-теги. Это было бы сломанной HTML, потому что вы не можете разместить элементы уровня блока, как внутри DIV тэги.
Однако вы можете заключить растягивается, в один пиксель, прозрачные GIF изображения в тэги (как в примере один), если у вас есть для поддержки старых браузеров. В противном случае вы можете просто повернуть якорь в себя встроенный блок с помощью CSS 2,1 (как в примере двух).
Пример 1 (предварительно CSS 2.1) HTML:
<div id="site">
<div id="full-width-header">
<a href="/"><img src="/transparent.gif" id="home-link" alt="Nav: Home" /></a>
<div id="header-content">We love using Joomla!</div>
</div>
<div id="body-content">OSM saves the world!</div>
<div id="footer-content">(c) the really cool web-designer</div>
</div>
Пример 1 (предварительно CSS 2.1) CSS:
#full-width-header {
position: relative; /* necassary to
absolute-position the child-element
#home-link relative to the header */
background: url(header-logo.jpg);
width: 800px;
height: 172px;
}
#home-link {
position: absolute;
width: 200px; /* width of the logo */
height: 172px; /* height of the logo */
top: 0; left: 0; /* top-left corner of logo */
border: 0;
float: left;
}
#header-content {
position: relative;
float: right;
width: 400px;
height: 172px;
vertical-align: bottom;
text-align: right;
}
Пример 2 (CSS 2.1) HTML:
<div id="site"> <div id="full-width-header"> <a href="/" id="home-link">Home</a> <div id="header-content">We love using Joomla!</div> </div> <div id="body-content">OSM saves the world!</div> <div id="footer-content">(c) the really cool web-designer</div> </div>
Пример 2 (CSS 2.1) CSS:
#full-width-header {
position: relative; /* necassary to
absolute-position the child-element
#home-link relative to the header */
background: url(header-logo.jpg);
width: 800px;
height: 172px;
}
#home-link {
position: absolute;
display: inline-block;
width: 200px; /* width of the logo */
height: 172px; /* height of the logo */
top: 0; left: 0; /* top-left corner of logo */
border: 0;
float: left;
visibility: hidden;
}
#header-content {
position: relative;
float: right;
width: 400px;
height: 172px;
vertical-align: bottom;
text-align: right;
}
