Версия для печати темы

Нажмите сюда для просмотра этой темы в обычном формате

Форум веб-мастеров _ Языки разметки (HTML, XML, CSS, ...) и JavaScript _ CSS. z-index. Или наложение текста на картинку.

Автор: Elena 1.7.2008, 1:27

Знающие люди, подскажите пожалуйста!
Необходимо сделать следующее: большой текст поверх картинки (именно картинки, а не фона!!!). Чтобы текст прокручивался на странице, а картинка оставалась на месте.
Пробовала с z-index в css, но результата так и не добилась
Если не затруднит, запишите как будет выглядеть код в отдельном css документе и как в html.
Заранее благодарна!

Автор: psywalker 4.7.2008, 17:36

Слушай,может ты не внимательно отняслась к z-index ..
вот посматри тут http://forum.wm-help.net/go/?http://htmlbook.ru/css/z-index.html

Автор: Elena 4.7.2008, 19:28

Дело в том, что при прокрутке текста получается что картинка остается вверху, т.е. вообще выходит из поля зрения. Я хочу чтобы она оставалась во весь экран, но при этом на ней прокручивался большой текст - и этого не получается

Автор: Elena 4.7.2008, 20:33

Уф... спасибо
Сколько раз мучила эту ссылку... только сейчас получилось....
Вот так вот...

<html>
<head>
<style type="text/css">
#layer1, #layer2
{
position: relative;
}

#layer2 {
top: -541px; /* 541 это высота картинки*/
}

#layer1 { z-index: 1; }
#layer2 { z-index: 2; }
</style>
</head>

<body bgcolor="#000000">

<div id="layer1"><img src="images/2.jpg" width="618" height="541" border="0"></div>
<div id="layer2">ОЧЕНЬ ДЛИННЫЙ ТЕКСТ</div>

</body>
</html>

НО все равно не совсем то, что надо, а именно - картинка уезжает вверх, вместо того чтобы оставаться в экране. Повторюсь, необходима именно картинка, а не фон. Как это сделать, подскажите пожалуйста...

Автор: psywalker 4.7.2008, 20:34

Слушай,я могу предложить тебе вариант такой..
http://forum.wm-help.net/go/?http://htmlbook.ru/css/background-repeat.html

Либо такой..
http://forum.wm-help.net/go/?http://htmlbook.ru/css/background.html

Погоди,я щас попробую сам сделать,погоди немного

Автор: psywalker 4.7.2008, 21:05

А вот так пойдёт?

<html>
<head>
<style type="text/css">
#layer1 { position: absolute; z-index: 1; }
#layer2 { position: absolute; z-index: 2; }
</style>
</head>

<body bgcolor="#000000">

<div id="layer1"><img src="images/2.jpg" width="618" height="541" border="0"></div>
<div id="layer2">ОЧЕНЬ ДЛИННЫЙ ТЕКСТ</div>

</body>
</html>