Создание баннера над шапкой сайтаЧасто на сайтах под управлением системы 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 Написать комментарийВНИМАНИЕ: Все поля необходимо заполнить |
EvolMate - 31-08-08 12:08:50
А неплохо бы еще добавить
body {
margin-top:22px;
}