Ключевые слова:web, html, (найти похожие документы)
Date: Tue, 11 Jul 2000 09:45:57 +0400 (MSD)
From: MailList: Темные стороны HTML
Subject: [HTML] Слои (layer), формы, Netscape 6.
Добрый день уважаемые читатели!
7.07.2000
Выпуск 6
В этом выпуске читайте:
*По поводу писем
*Лейер с прокруткой
*Лейеры и формы
*Netscape 6. Шаг вперед
*Заключение
--------------------------------------------------------------------
**По поводу писем**
--------------------------------------------------------------------
Спасибо дорогие читатели за Ваши письма, их пришло очень много. К сожалению
не все письма нас радуют. Поймите пожалуйста, что мы не служба бесплатной помощи
веб-дизайнерам. Ну как бы Вы отреагировали на письмо типа "вот короче адрес,
зайдите на него, там проблема какая-то разберитесь и напишите" или "как сделать
сайт с фреймами". Если Вам необходима помощь или у Вас возникла проблема,
то Вы можете написать нам письмо в следующем формате:
1. Имя*, фамилия*, организация.
2. Код, в котором есть проблема или же различие при просмотре в различных браузерах.*
3. Описание проблемы или различия.*
Также у читателей возник вопрос на какой из адресов присылать письма.
Все письма присылать по адресу [email protected]
Если же Вы хотите поговорить с одним из нас лично, то наши адреса указаны внизу.
--------------------------------------------------------------------
**Лейер с прокруткой**
--------------------------------------------------------------------
Начнем с очень интересной проблемы, присланной нашим читателем. Представьте себе что вы хотите
сделать в заданном месте страницы слой с прокруткой. В Эксплорерe проблем нет:
<html>
<head>
<meta charset="windows-1251"
</head>
<body bgcolor="#ffffff">
<div style="position:absolute; width:200px; height:100px;
z-index:1; left: 150px; top: 100px; clip:
rect(0 200 150 0); overflow: auto"
<p>Text of the layer</p>
<p>Text of the layer</p>
<p>Text of the layer</p>
<p>Text of the layer</p>
<p>Text of the layer</p>
<p>Text of the layer</p>
<p>Text of the layer</p>
<p>Text of the layer</p>
<p>Text of the layer</p>
</div>
</body>
</html>
Посмотреть пример: http://www.inetcash.newmail.ru/all/web-design/example/layerscr.html
А вот в Нетскейпе текст выходящий за пределы слоя просто не виден и полосы
прокрутки нет. Причина конечно очевидна - в Нетскейпе у div (и вообще)
нет атрибута overflow. Кто знает как сделать прокрутку для лейера в Нетскейпе
огромная просьба откликнуться.
--------------------------------------------------------------------
**Лейеры и формы**
--------------------------------------------------------------------
Один из наших подписчиков столкнулся со следующей проблемой, на наш взгляд,
к сожалению, нерешабельной. Допустим необходимо сделать слой, который иногда
будет перекрывать текстовое поле (это необходимо например, при изготовлении
меню). Рассмотрим код:
<html>
<head>
<meta charset="windows-1251">
</head>
<body bgcolor='#ffffff'>
<script>
function on() {
if (navigator.appName=='Microsoft Internet Explorer') {
document.all.testlayer.style.visibility='visible';
}
else {
document.layers.testlayer.visibility='show';
}
}
function out() {
if(document.all) {
document.all.testlayer.style.visibility='hidden';
}
else {
document.layers.testlayer.visibility='hide';
}
}
</script>
<a href='#' onMouseOver='on()' onMouseOut='out()'>Click to see layer</a>
<br><br><br>
<div style='position: absolute; z-index:90;'>
<form name='form1'>
<input type='text' name='textfield' maxlength='20' size='30'>
</form>
<font color='blue' size=5> Test layer!!!
</font>
</div>
<div id='testlayer' align='center'
style='position:absolute; left:72px; top:40px;
visibility: hidden; width:300px; height:355px; z-index:100;
background-color: #00ff00; border: 1px none #000000'>
layer1<br>
layer1<br>
layer1<br>
layer1<br>
</div>
</body>
</html>
Посмотреть пример: http://www.inetcash.newmail.ru/all/web-design/example/layerform.html
В Эксплорере по наведению на ссылку появляется слой, который благополучно перекрывает
слой с формой. Это абсолютно правильно, так как z-index у слоя с формой меньше, чем
у слоя с testlayer. В Нетскейпе же форма в любом случае перекрывает любой лейер.
Причину этого мы видим в следующем. Эксплорер сам прорисовывает все обьекты и
может свободно с ними оперировать, Нетскейп же просто дает системе команду вставить
обьект из формы, а остальное прорисовывает сам. Система обьект конечно вставляет,
но перекрывать ничем не разрешает. Если у кого либо есть мысли
на этот счет просьба откликнуться.
--------------------------------------------------------------------
**Netscape 6. Шаг вперед**
--------------------------------------------------------------------
Недавно начали тестирование 6 версии Netscape Navigator. Первое впечатление -
Mozilla в чистом виде, как интерфейс, так и реализация. Дальнейшее
рассмотрение приводит к этому же утверждению.
Какие же изменения произошли по сравнению с предыдущей версией. Первое, что бросается
в глаза - появился a: hover. Ура, теперь ссылочки выделяются. Отсутствую глюки
при применении каскадных стилей с таблицами. Мы будем продолжать дальнейшее тестирование
и рассказывать о результатах в последующих выпусках.
Preview Release можно скачать по адресу http://www.netscape.com/download/previewrelease.html?cp=djusea
--------------------------------------------------------------------
**Заключение**
--------------------------------------------------------------------
В заключение хотим сказать, что без вашей помощи наша рассылка не сможет
полноценно существовать. Мы стремимся сделать действительно профессиональную
рассылку, которая помогала бы людям. Поэтому будем очень благодарны
всем, кто пришлет свои глюки и различия при реализации HTML в различных браузерах.
Еще лучше, если вы будете писать о своих проблемах и затруднениях при создании
сайта. Мы обязательно постараемся вам помочь, кроме того мы расскажем о вашей проблеме
другим людям.
--
Архив рассылки и коллекции глюков будут скоро доступны на сайте http://www.inetcash.newmail.ru
в разделе "Web-design".
--
С уважением
автор рассылки и веб-мастер сайта Ведущий раздела "Web-design",
Авдошин Андрей консультант по вопросам веб-дизайна
Дмитрий Видмич
[email protected][email protected][email protected]
Я столкнулся с такой проблемой:
У меня есть картинка-слой, под которым находится текст. Середина у моей картинки прозрачная так, чтобы был виден текст. Но мне нужно,чтобы картинка не двигалась,а двигался только текст. Подскажите,что мне делать.
position
absolute, relative, static
Устанавливает позиционирование абсолютное (от левого верхнего угла страницы), относительное (от левого верхнего угла родительского элемента) и статическое (СЛОЙ НЕ БУДЕТ ПРОКРУЧИВАТЬСЯ ПРИ ПРОКРУТКЕ СТРАНИЦЫ)
