13.10.2009, 11:19
|
|
|
Так?
<html>
<head>
<title>byLine</title>
<style type="text/css">html, body { width:100%; height:100%; padding:0;} p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;} #content {position:absolute; padding:5px 300px 20px 200px; z-index:2;} body {margin:0; font-family:verdana, arial, sans-serif; font-size:76%; height:100%;} #pic { z-index:1; overflow: hidden; visibility:hidden;}</style>
<script>
function clientWidth(){return document.compatMode=='CSS1Compat'&&!window.opera?document.documentElement.clientWidth:document.body.clientWidth;}
function clientHeight(){return document.compatMode=='CSS1Compat'&&!window.opera?document.documentElement.clientHeight:document.body.clientHeight;}
function init(){
var imgId= document.getElementById('imgId');
imgId.style.width = clientWidth();
imgId.style.height = clientHeight();
}
</script>
</head>
<body onLoad="init();">
<div id="content">
<h1>ALICE'S ADVENTURES IN WONDERLAND</h1>
<h3>Lewis Carroll</h3>
<h2>THE MILLENNIUM FULCRUM EDITION 3.0</h2>
<h3>CHAPTER I</h3>
<h4>Down the Rabbit-Hole</h4>
<p>Alice was beginning to get very tired of sitting by her sister
on the bank, and of having nothing to do: once or twice she had
peeped into the book her sister was reading, but it had no
pictures or conversations in it, 'and what is the use of a book,'
thought Alice 'without pictures or conversation?'</p>
<p>So she was considering in her own mind (as well as she could,
for the hot day made her feel very sleepy and stupid), whether
the pleasure of making a daisy-chain would be worth the trouble
of getting up and picking the daisies, when suddenly a White
Rabbit with pink eyes ran close by her.</p>
<p>Alice was beginning to get very tired of sitting by her sister
on the bank, and of having nothing to do: once or twice she had
peeped into the book her sister was reading, but it had no
pictures or conversations in it, 'and what is the use of a book,'
thought Alice 'without pictures or conversation?'</p>
<p>So she was considering in her own mind (as well as she could,
for the hot day made her feel very sleepy and stupid), whether
the pleasure of making a daisy-chain would be worth the trouble
of getting up and picking the daisies, when suddenly a White
Rabbit with pink eyes ran close by her.</p>
<p>Alice was beginning to get very tired of sitting by her sister
on the bank, and of having nothing to do: once or twice she had
peeped into the book her sister was reading, but it had no
pictures or conversations in it, 'and what is the use of a book,'
thought Alice 'without pictures or conversation?'</p>
<p>So she was considering in her own mind (as well as she could,
for the hot day made her feel very sleepy and stupid), whether
the pleasure of making a daisy-chain would be worth the trouble
of getting up and picking the daisies, when suddenly a White
Rabbit with pink eyes ran close by her.</p>
</div>
<img src="_images/b2.png" id="imgId" class="fon">
</body>
Не работает. Фон растягивается по высоте окна. Ниже текст идёт уже на белом фоне. В IE ваще хрень какая-то... Или я неправильно понял Вас?!
А может быть можно как-нибудь повлиять на CSS или background скриптом, находящемся в body, а не в head? Ведь та часть скрипта, которая отвечает за растяжение картинки при расположении в body работает. Тогда бы проблема была решена!
Последний раз редактировалось Octane, 20.10.2009 в 21:40.
Причина: используйте тег [html] для оформления HTML-кода
|
|
20.10.2009, 03:03
|
 |
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
|
а зачем эти извращения с растягиванием картинки и #content { position: absolute }. Есть причины не ставить картинку в фон к body?
|
|
20.10.2009, 21:36
|
|
|
Сообщение от x-yuri
|
|
а зачем эти извращения с растягиванием картинки и #content { position: absolute }. Есть причины не ставить картинку в фон к body?
|
Проблема состоит в том, что скрипт растягивает картинку именно по ширине и высоте окна, а окно может быть раскрыто не на весь экран. И если это так, то если пользователь растянет окно на больший размер, то окажется, что фон по прежнему имеет старые размеры, то есть предыдущие размеры окна.
Для решения этой проблемы я решил задать условие, которое определяет размеры текста относительно размеров экрана, чтобы определить, будет ли прокрутка. Если прокрутка будет - то со скриптом проблем нет. Если прокрутки нет, то проще вставить фон через background.
И вот получается, что по идее, чтобы скрипт влиял на background, он должен находиться в head, а растягивание фона работает только в body.
Поэтому нужно добиться либо чтобы обе части скрипта работали в одном месте, либо, если это возможно, как-то разбить скрипт на 2 части, и чтобы часть находящаяся в body в случае необходимости вызывала часть, находящуюся в head. Или еще что-то...
|
|
21.10.2009, 03:12
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
|
Сообщение от Amberwood
|
|
И если это так, то если пользователь растянет окно на больший размер, то окажется, что фон по прежнему имеет старые размеры, то есть предыдущие размеры окна.
|
т.е. картинка будет непропорционально масштабироваться? И какие у нее изначальные размеры? |
|
21.10.2009, 10:46
|
 |
Модератор Всея Форума
|
|
Регистрация: 14.05.2009
Сообщений: 4,021
|
|
|
Сам себе создал проблему. Нельзя ли по-проще быть?!
|
|
21.10.2009, 15:11
|
|
|
|
Сообщение от x-yuri
|
|
т.е. картинка будет непропорционально масштабироваться? И какие у нее изначальные размеры?
|
Да, непропорционально. Но она имеет радужный переливающийся цвет. И как бы она не растягивалась, смотрится прекрасно.
|
Сообщение от B~Vladi
|
|
Сам себе создал проблему. Нельзя ли по-проще быть?!
|
Ну пока обхожусь без этого фона. Но очень бы хотелось его использовать. Проблема состоит в том, что язык HTML умеет растягивать в ширину, но не умеет в высоту. А повторение фона тут не прокатит(( Так что простых вариантов решения пока не вижу... |
|
21.10.2009, 15:16
|
|
Модератор Всея Форума
|
|
Регистрация: 14.05.2009
Сообщений: 4,021
|
|
|
Сообщение от Amberwood
|
|
HTML умеет растягивать в ширину, но не умеет в высоту
|
Он умеет растягивать высоту (height:100%; ), но это без учёта скрола. В принципе, твою проблему можно решить и на голом HTML, но такой трюк подходит не для всех шаблонов  |
|
21.10.2009, 15:32
|
|
|
|
Регистрация: 27.12.2008
Сообщений: 4,201
|
|
|
Сообщение от Amberwood
|
|
Но она имеет радужный переливающийся цвет.
|
а можно... заценить? |
|
21.10.2009, 21:35
|
|
|
|
Сообщение от B~Vladi
|
|
Он умеет растягивать высоту (height:100%; ), но это без учёта скрола. В принципе, твою проблему можно решить и на голом HTML, но такой трюк подходит не для всех шаблонов
|
height:100%; как раз
только при скроллинге и растянет. Если скроллинга не будет, то можно сделать либо чтобы картинке придавался истиный размер, либо, чтобы растягивало только на высоту текста!
|
Сообщение от x-yuri
|
|
а можно... заценить?
|
Можно:  |
|
22.10.2009, 10:07
|
|
Модератор Всея Форума
|
|
Регистрация: 14.05.2009
Сообщений: 4,021
|
|
|
Сообщение от Amberwood
|
|
только при скроллинге и растянет. Если скроллинга не будет, то можно сделать либо чтобы картинке придавался истиный размер, либо, чтобы растягивало только на высоту текста!
|
Если нет скроллинга - пишем в CSS:
html,body{
width:100%;
height:100%;
}
Тогда будет растягивать  |
|
|
|
