Создание баннера над шапкой сайта

PHP скрипты, верстка, css хаки, создание сайтов, редизайн

Контактные линзы Soflens Daily Disposable купить в интернете

RSS-новости
Анонсы статей иновостей по RSS

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

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

При нажатии на всем нам знакомый “крестик” баннер закроется.

CSS код нашего баннера:

a {

	text-decoration:none;

	color:#00669c;

}

.banner_class {

	position:absolute;

	top:0px;

	left:0px;

	width:100%

}

div > div.banner_class {

	position:fixed;

}

#banner_text {

	z-index:9;

	position:absolute;

	top:0;

	left:0;

	width:100%;

	line-height:22px;

	background:#FFFF00;

	border-bottom: 1px outset;

}

#banner_zakr {

	position:absolute;

	top:0;right:0;

	z-index:10;

	background:#FFFF00;

	line-height:22px;

	padding:3px 4px 3px 4px;

	border-bottom: 1px outset;

}

CSS для IE:

<!--[if gte IE 5.5]><![if lt IE 8]>

<style type="text/css">

div#banner_id {

	width:expression(((ignoreMe=(document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.clientWidth))<200?200:ignoreMe)+'px');

	position:absolute;

	top:expression((ignoreMe2=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+'px');

	left:expression((ignoreMe=document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft)+'px');

}

</style>

<![endif]>

Наш баннер:

<div id="banner">

  <div class="banner_class" id="banner_id">

    <div id="banner_text" style='padding-left:25px;'><a href="http://www.mastersite.org.ua/" title="загрузить файл">Текст нашего баннера <b>"ЖМИ ТУТ"</b>!!!</a></div>

    <div id="banner_zakr"><a href="javascript://" onmouseover="document.getElementById('banner_clo').src='http://www.mastersite.org.ua/uploaded_images/clo2.gif'" onmouseout="document.getElementById('banner_clo').src='http://www.mastersite.org.ua/uploaded_images/clo2.gif'" onclick="document.getElementById('banner').style.display='none';return false;"><img id="banner_clo" title="Закрыть" align="absmiddle" border="0" src="http://www.mastersite.org.ua/uploaded_images/clo2.gif" width="16" height="16"></a></div>

  </div>

</div>

<script type="text/javascript">document.getElementById("banner").style.height=document.getElementById("banner_text").offsetHeight+'px';</script>

Цветовую гамму нашего баннера вы сможете изменить в CSS стилях.

Пример данного баннера.

17-08-08 13:08:40

Finn - 1-05-09 12:05:15

Как это реализовать в Вордпрессе?

Egor - 16-01-09 17:01:20

в лисе эту http://www.mastersite.org.ua/web-mastering/sozdanie-bannera-nad-shapkojj-sajjta/ страницу растянула на два экрана

EvolMate - 31-08-08 12:08:50

А неплохо бы еще добавить
body {
margin-top:22px;
}