|
Можно ли привязать слой div к правому верхнему углу окна?
|
| Автор |
Сообщение |
SergejFedosov
11 1110 1000
Зарегистрирован: 18.08.2006
Сообщения: 1123
8452 
|
 Добавлено: Ср, 12 Май, 2010 14:33 Заголовок сообщения: Можно ли привязать слой div к правому верхнему углу окна? |
 |
|
Можно ли привязать слой div к правому верхнему углу окна браузера? Если можно, то как?
_________________
Кредитная карта для веб-мастера |
|
| Вернуться к началу |
|
 |
Dr.Bodja
Хостинг — это наше всё!
Зарегистрирован: 24.07.2007
Сообщения: 142
Откуда: Украина
1479
|
| Добавлено: Ср, 12 Май, 2010 15:12 Заголовок сообщения: |
|
|
если не изменяет память, вот так
| Код: | <style type="text/css">
#layer1 {
background: #fff000;
width: 150px;
height: 200px;
position: fixed;
top:0;
right:0;
}
</style>
</head>
<body>
<div id="layer1">
слой
</div>
текст
</body>
</html> |
_________________
База знаний Lineage 2 |
|
| Вернуться к началу |
|
|
corsar8888
Хостинг — это наше всё!
Зарегистрирован: 01.01.2010
Сообщения: 278
Откуда: Новосибирск
12823
|
| Добавлено: Ср, 12 Май, 2010 16:06 Заголовок сообщения: Re: Можно ли привязать слой div к правому верхнему углу окна |
|
|
| SergejFedosov писал(а): | | Можно ли привязать слой div к правому верхнему углу окна браузера? Если можно, то как? |
С помощью Java можно.
Цели создания div'а не указаны, поэтому предлагаю код для размещения рекламного div'а в правом верхнем углу браузера.
Вставить после тега <body>:
| Код: | <div id=FixedElement align=center style="margin:0;overflow:hidden;border:0;padding:0px;RIGHT: 0;WIDTH:600; POSITION: absolute; Z-INDEX: 0; BOTTOM: expression( (document.getElementsByTagName( 'body' )[0].scrollBottom + document.getElementsByTagName( 'body' )[0].clientHeight)-40); HEIGHT: 2em; BACKGROUND-COLOR: #f5f5ea">!!!Рекламная ссылка!!! <a href="javascript:close_div()" title="Закрыть эту строку"><span style="position:relative;top:-6;color:gray;font-size:10">Закрыть</span></a></div>
<script type="text/javascript">
var top_pos=(document.getElementsByTagName('body')[0].scrollTop+document.getElementsByTagName('body')[0].clientHeight)-40;
var FixedElement = document.getElementById('FixedElement');
FixedElement.style.bottom=top_pos;
if(window.opera || navigator.userAgent.indexOf("Firefox")>0)
FixedElement.style.position="fixed";
function close_div()
{
document.getElementById('FixedElement').style.visibility='hidden';
}
</script> |
|
|
| Вернуться к началу |
|
|
SergejFedosov
11 1110 1000
Зарегистрирован: 18.08.2006
Сообщения: 1123
8452
|
|
| Вернуться к началу |
|
|
SergejFedosov
11 1110 1000
Зарегистрирован: 18.08.2006
Сообщения: 1123
8452
|
| Добавлено: Ср, 12 Май, 2010 21:50 Заголовок сообщения: |
|
|
| Dr.Bodja писал(а): | | если не изменяет память, вот так |
В Firefox работает, в Chrome - работает, а в IE6 слой отображается в левом верхнем углу и последующий контент сдвигается вниз на высоту слоя. А по статистике у меня 10% посетителей пользуют этот браузер. Хотелось бы чтобы и в нем отображалось правильно.
_________________
Кредитная карта для веб-мастера |
|
| Вернуться к началу |
|
|
madhamster
Согнул ложку
Зарегистрирован: 09.10.2006
Сообщения: 902
432
|
| Добавлено: Ср, 12 Май, 2010 22:24 Заголовок сообщения: |
|
|
?
_________________
NextStage - live music competition |
|
| Вернуться к началу |
|
|
SergejFedosov
11 1110 1000
Зарегистрирован: 18.08.2006
Сообщения: 1123
8452
|
| Добавлено: Чт, 13 Май, 2010 08:36 Заголовок сообщения: |
|
|
| madhamster писал(а): | | position: absolute; |
Эти опции прикрепляют слой к верхнему углу страницы, а не окна браузера, т.е. при прокрутке слой исчезает с экрана. Мне бы хотелось, чтобы он висел всегда. Fixed работает во многих браузерах, но не в IE6. C помощью этого сообщества и форума на Сэйпе мне удалось решить эту проблему. Часть кода css файла:
body {
background-color:#FFFFFF;
margin:10px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
color:#bbbbbb;
background: url('fakeimg.gif') no-repeat;
background-attachment: fixed;
}
...
#reklama {
font-size:100%;
color:#800000;
width: 150px;
height: 200px;
position: fixed;
//position: absolute;
top:expression(eval(document.documentElement.scrollTop)+20);
top: 20px;
right: 0;
}
Вот так слой reklama приклеен в правому верхнему углу окна любого браузера.
Ещё раз благодарю всех за участие!
_________________
Кредитная карта для веб-мастера |
|
| Вернуться к началу |
|
|
corsar8888
Хостинг — это наше всё!
Зарегистрирован: 01.01.2010
Сообщения: 278
Откуда: Новосибирск
12823
|
| Добавлено: Чт, 13 Май, 2010 08:57 Заголовок сообщения: |
|
|
| SergejFedosov писал(а): | | Вот так слой reklama приклеен в правому верхнему углу окна любого браузера. |
Данный пример работает во всех браузерах? |
|
| Вернуться к началу |
|
|
SergejFedosov
11 1110 1000
Зарегистрирован: 18.08.2006
Сообщения: 1123
8452
|
| Добавлено: Чт, 13 Май, 2010 09:30 Заголовок сообщения: |
|
|
| corsar8888 писал(а): | | Данный пример работает во всех браузерах? |
Смотрел в Firefox 3, Chnome, IE6 - работает. В IE 7/8 не проверял.
_________________
Кредитная карта для веб-мастера |
|
| Вернуться к началу |
|
|
corsar8888
Хостинг — это наше всё!
Зарегистрирован: 01.01.2010
Сообщения: 278
Откуда: Новосибирск
12823
|
| Добавлено: Чт, 13 Май, 2010 10:21 Заголовок сообщения: |
|
|
| SergejFedosov, могли бы Вы дать ссылочку не ресурс с данным примером, чтобы посмотреть в действии и проверить совместимость? |
|
| Вернуться к началу |
|
|
SergejFedosov
11 1110 1000
Зарегистрирован: 18.08.2006
Сообщения: 1123
8452
|
|
| Вернуться к началу |
|
|
corsar8888
Хостинг — это наше всё!
Зарегистрирован: 01.01.2010
Сообщения: 278
Откуда: Новосибирск
12823
|
| Добавлено: Чт, 13 Май, 2010 15:21 Заголовок сообщения: |
|
|
| SergejFedosov писал(а): | | В IE 7/8 не проверял. |
Работает.  |
|
| Вернуться к началу |
|
|
corsar8888
Хостинг — это наше всё!
Зарегистрирован: 01.01.2010
Сообщения: 278
Откуда: Новосибирск
12823
|
| Добавлено: Вс, 22 Авг, 2010 16:18 Заголовок сообщения: |
|
|
Для удобства посетителей данного форума решил чуть подчистить и прокомментировать приведённый выше CSS-код:
| Код: | body {
background: url('fakeimg.gif') no-repeat fixed; /*Чтобы в IE6 блок при прокрутке смещался плавно, а не рывками; фактическое наличие на сервере файла fakeimg.gif не обязательно*/
}
#scroll_block{
width:100px;
height: 100px;
background-color:red; /*чтобы блок был виден на белом фоне*/
position:fixed; /*фиксирует блок в нормальных браузерах*/
//position: absolute; /*для IE6, который воспринимает подобный комментарий как объявление*/
top:expression(eval(document.documentElement.scrollTop)); /*обеспечивает горизонтальный scroll в IE6*/
right: 0;
} |
Внимание! При использовании необходимо удалить мои комментарии вида /*комментарий*/, чтобы дедушка IE6 смог разобраться. |
|
| Вернуться к началу |
|
|
Gosudar
Два пингвина
Зарегистрирован: 08.04.2007
Сообщения: 430
7966
|
| Добавлено: Пн, 23 Авг, 2010 16:58 Заголовок сообщения: |
|
|
corsar8888
всё ок, но не валидно
_________________
R3-born |
|
| Вернуться к началу |
|
|
[LP]LordPro.teus
Призрак Лорда
Зарегистрирован: 26.07.2007
Сообщения: 5092
42282
|
| Добавлено: Пн, 23 Авг, 2010 17:39 Заголовок сообщения: |
|
|
Gosudar
| Код: | | top:expression(eval(document.documentElement.scrollTop)); |
Без сомнений, из-за "уличной магии" IE...)
_________________
 
До выхода LiteDiary 0.3.0: парам-пам-пам-пам! Она уже здесь! |
|
| Вернуться к началу |
|
|
|
FAQ
Поиск
Пользователи
Группы
Регистрация
Профиль
Войти и проверить личные сообщения
Вход
