EOMY.NET
Хостинг EOMY.NET: Форум поддержки
 
 FAQFAQ   ПоискПоиск   ПользователиПользователи   ГруппыГруппы   РегистрацияРегистрация 
 ПрофильПрофиль   Войти и проверить личные сообщенияВойти и проверить личные сообщения   ВходВход 
RSS Feed  

Можно ли привязать слой div к правому верхнему углу окна?
На страницу 1, 2  След.
 
Начать новую тему   Ответить на тему    Список форумов EOMY.NET -> HTML и CSS
Можно ли привязать слой div к правому верхнему углу окна?
Автор Сообщение
SergejFedosov
11 1110 1000
11 1110 1000


Зарегистрирован: 18.08.2006
Сообщения: 1173

4057 Монеты

СообщениеДобавлено: Ср, 12 Май, 2010 14:33    Заголовок сообщения: Можно ли привязать слой div к правому верхнему углу окна? Ответить с цитатой

Можно ли привязать слой div к правому верхнему углу окна браузера? Если можно, то как?
_________________
Полный церковно-славянский словарь
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Посетить сайт автора
Dr.Bodja
Хостинг — это наше всё!
Хостинг — это наше всё!


Зарегистрирован: 24.07.2007
Сообщения: 146
Откуда: Украина
1702 Монеты

СообщениеДобавлено: Ср, 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
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Yahoo Messenger
corsar8888
Хостинг — это наше всё!
Хостинг — это наше всё!


Зарегистрирован: 01.01.2010
Сообщения: 280
Откуда: Новосибирск
12923 Монеты

СообщениеДобавлено: Ср, 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">!!!Рекламная ссылка!!! &nbsp;&nbsp;<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>
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Отправить e-mail
SergejFedosov
11 1110 1000
11 1110 1000


Зарегистрирован: 18.08.2006
Сообщения: 1173

4057 Монеты

СообщениеДобавлено: Ср, 12 Май, 2010 19:22    Заголовок сообщения: Ответить с цитатой

Спасибо!
_________________
Полный церковно-славянский словарь
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Посетить сайт автора
SergejFedosov
11 1110 1000
11 1110 1000


Зарегистрирован: 18.08.2006
Сообщения: 1173

4057 Монеты

СообщениеДобавлено: Ср, 12 Май, 2010 21:50    Заголовок сообщения: Ответить с цитатой

Dr.Bodja писал(а):
если не изменяет память, вот так


В Firefox работает, в Chrome - работает, а в IE6 слой отображается в левом верхнем углу и последующий контент сдвигается вниз на высоту слоя. А по статистике у меня 10% посетителей пользуют этот браузер. Хотелось бы чтобы и в нем отображалось правильно.
_________________
Полный церковно-славянский словарь
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Посетить сайт автора
madhamster
Согнул ложку
Согнул ложку


Зарегистрирован: 09.10.2006
Сообщения: 902

460 Монеты

СообщениеДобавлено: Ср, 12 Май, 2010 22:24    Заголовок сообщения: Ответить с цитатой

Код:
position: absolute;


?
_________________
NextStage - live music competition
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Посетить сайт автора
SergejFedosov
11 1110 1000
11 1110 1000


Зарегистрирован: 18.08.2006
Сообщения: 1173

4057 Монеты

СообщениеДобавлено: Чт, 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
Сообщения: 280
Откуда: Новосибирск
12923 Монеты

СообщениеДобавлено: Чт, 13 Май, 2010 08:57    Заголовок сообщения: Ответить с цитатой

SergejFedosov писал(а):
Вот так слой reklama приклеен в правому верхнему углу окна любого браузера.

Данный пример работает во всех браузерах?
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Отправить e-mail
SergejFedosov
11 1110 1000
11 1110 1000


Зарегистрирован: 18.08.2006
Сообщения: 1173

4057 Монеты

СообщениеДобавлено: Чт, 13 Май, 2010 09:30    Заголовок сообщения: Ответить с цитатой

corsar8888 писал(а):
Данный пример работает во всех браузерах?


Смотрел в Firefox 3, Chnome, IE6 - работает. В IE 7/8 не проверял.
_________________
Полный церковно-славянский словарь
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Посетить сайт автора
corsar8888
Хостинг — это наше всё!
Хостинг — это наше всё!


Зарегистрирован: 01.01.2010
Сообщения: 280
Откуда: Новосибирск
12923 Монеты

СообщениеДобавлено: Чт, 13 Май, 2010 10:21    Заголовок сообщения: Ответить с цитатой

SergejFedosov, могли бы Вы дать ссылочку не ресурс с данным примером, чтобы посмотреть в действии и проверить совместимость?
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Отправить e-mail
SergejFedosov
11 1110 1000
11 1110 1000


Зарегистрирован: 18.08.2006
Сообщения: 1173

4057 Монеты

СообщениеДобавлено: Чт, 13 Май, 2010 13:44    Заголовок сообщения: Ответить с цитатой

corsar8888, посмотрите здесь: Изготовление ниппельной поилки для перепелиной клетки

Правый верхний угол окна.
_________________
Полный церковно-славянский словарь
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Посетить сайт автора
corsar8888
Хостинг — это наше всё!
Хостинг — это наше всё!


Зарегистрирован: 01.01.2010
Сообщения: 280
Откуда: Новосибирск
12923 Монеты

СообщениеДобавлено: Чт, 13 Май, 2010 15:21    Заголовок сообщения: Ответить с цитатой

SergejFedosov писал(а):
В IE 7/8 не проверял.

Работает. Wink
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Отправить e-mail
corsar8888
Хостинг — это наше всё!
Хостинг — это наше всё!


Зарегистрирован: 01.01.2010
Сообщения: 280
Откуда: Новосибирск
12923 Монеты

СообщениеДобавлено: Вс, 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 смог разобраться.
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Отправить e-mail
Gosudar
Два пингвина
Два пингвина


Зарегистрирован: 08.04.2007
Сообщения: 440

9048 Монеты

СообщениеДобавлено: Пн, 23 Авг, 2010 16:58    Заголовок сообщения: Ответить с цитатой

corsar8888
всё ок, но не валидно
_________________
R3-born²
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Посетить сайт автора
[LP]LordPro.teus
Призрак Лорда
Призрак Лорда


Зарегистрирован: 26.07.2007
Сообщения: 5123

44732 Монеты

СообщениеДобавлено: Пн, 23 Авг, 2010 17:39    Заголовок сообщения: Ответить с цитатой

Gosudar
Код:
top:expression(eval(document.documentElement.scrollTop));

Без сомнений, из-за "уличной магии" IE...)
_________________

А ведь еще не поздно смотаться на Азовское море, согреться на солнышке...
Вернуться к началу
Посмотреть профиль Отправить личное сообщение Посетить сайт автора
Показать сообщения:   
Начать новую тему   Ответить на тему    Список форумов EOMY.NET -> HTML и CSS Часовой пояс: GMT
На страницу 1, 2  След.
Страница 1 из 2

 


Rambler's Top100   Рейтинг@Mail.ru    



Powered by phpBB © 2001, 2005 phpBB Group