Можно такое через CSS получить?

Dark · 09-05-2003, 06:06

У меня есть текст. Мне нужно расположить его так, чтобы он был всегда внизу страницы, независимо от её содержания. Тоесть, если содержание страницы заканчивается на половине экрана, нужный текст должен торчать в самом низу экрана; если же содержание слишком большое и заходит за пределы экрана, то нужный текст должен находится под содержанием.
Самое простое, что приходит в голову, это таблица на height=100%, но мне бы хотелось указывать параметры только для текста, без дополнительных объектов. Поэтому и интересуюсь, можно так через CSS позиционировать?

Anafay · 09-05-2003, 13:01

Может, конечно, есть более прямые способы, но, поскольку я их не знаю, то делаю под конкретную высоту (IE):

Code:

<html>
<body topmargin="0" bottommargin="0">
<script language="javascript">
document.writeln( '<div style="width:100%;height:'
,                 String(document.body.clientHeight-26)
,                 'px;">');
</script>
      Text
   </div>
   <div style="height:25px;wigth:100%;background-color:black;color:white;">
      Footer
   </div>
</body>
</html>

Dark · 10-05-2003, 05:03

Да JS-то здесь не в тему... Уж больно его отключать любят.

Alex Spade · 10-05-2003, 17:24

Попробуй поиграть стилями
max-height и min-height
но не везде это работает.

Самое простое, что приходит в голову, это таблица на height=100%, но мне бы хотелось указывать параметры только для текста, без дополнительных объектов.
Не совсем понял, что имелось в виду. Но я бы попробовал следующее.

<TABLE HEIGHT=100%>
<TR VALIGN=TOP>
<TD>ТЕКСТ------аолпоаыврполрыопаыо рполрык
<TR VALGN=TOP HEIGHT=50>
<TD>Подпись-----тра-ля-ля-ля
</table>

Dark · 11-05-2003, 05:34

>> но не везде это работает
-- Мне так и не удалось что-то дельное получить. Хотя может я не понял принципа их работы?..

>> Не совсем понял, что имелось в виду. Но я бы попробовал следующее.
-- В принципе это я и имел ввиду: две строки таблицы, высота которой 100%; основное содержание запихивается в первую строку, вторая - ограничивается по высоте.

Anafay · 11-05-2003, 09:03

Dark
Тогда вот так:
<html>
<body topmargin="0" bottommargin="0" leftmargin="0">
<div style="position:absolute;left:0px;top:0px;height:100%;width:100%;">
text
<div style="position:absolute;bottom:0px;left:0px;border:1px solid black;width:100%;height:25px;">
footer
</div>
</div>
</body>
</html>

Если ставить бордеры и паддинги, то придется учитывать их в ширине и высоте.

Dark · 12-05-2003, 06:08

Неплохо вышло... Но, если честно, через таблицу получится как-то быстрее и проще.

По крайней мере буду знать, что есть альтернатива... Спасибо.

Anafay · 12-05-2003, 07:47

Dark
Но, если честно, через таблицу получится как-то быстрее и проще.
Выносишь стили в прилинкованный файл и экономишь пользователю (а, может, и себе) трафик. Хоть и копейки, но вдруг пригодится

Alex Spade · 12-05-2003, 14:19

Выносишь стили в прилинкованный файл и экономишь пользователю (а, может, и себе) трафик. Хоть и копейки, но вдруг пригодится

Хотя есть "отморозки", которые любят CSS отключать.

Dark · 13-05-2003, 06:08

Ой, да при чём здесь объёмы данных? Я имел ввиду процесс создания таких вещей.

Mips · 18-05-2003, 02:55

Dark
при прокрутке страницы див останется на месте. Чтобы его двигать, нужно юзать js, но он бывает отключён.
Попробуй написать текст на картинке и эту картинку вставить бакграундом внизу страницы. Правда это дело может перекрываться текстом страницы. Так что тут палка о двух концах.

Dark · 18-05-2003, 05:20

>> при прокрутке страницы див останется на месте
-- Почему это?

Нигде он не остаётся... Благополучно прокручивается со страницей.

Вообще у меня на тексте ссылка. Но если бы я реализовывал идею через бэкграунд, то тут всё просто: достаточно для <body> указать padding-middle, и никакие данные нижнюю часть страницы уже не займут.

Mips · 18-05-2003, 15:20

Dark
>Благополучно прокручивается со страницей.
видимо, мы опять друг друга не поняли.
Вариант 1. Видишь слева от поля ввода ссылка плавающее окно? Нажми на не и прокрути страницу вверх-вниз. Поле ввода всегда остаётся на виду.
Вариант 2. На этой странице внизу баннеры RB2, хотлог, рэмблер. Они внизу страницы всегда, но при прокрутке их не видно.
Так как ты хочешь сделать?
ps: Выше я говорил, про вариант 1, но ты вроде говоришь про второй вариант.

Dark · 19-05-2003, 06:56

Mips
Текст мне нужен внизу... всегда внизу страницы, а не экрана! Копирайт это... Только зачем мучиться? Anafay уже написал примерный метод.

Kirill_K · 14-06-2003, 19:38

У меня была подобная задача, я делал подвал сайта... Но вот все в IE было отлично, зато в Opere и других броузерах, эфекта этого не наблидалось... Самое простое сделать таблицу по высоте 100% и будет все ОК, но только в IE

Dark · 15-06-2003, 05:33

Kirill_K
Где ж ты нашёл Оперу, в которой метод таблицы не работает? Может это и недоделанный браузер, но элементарный html он выполняет без проблем.

Kirill_K · 15-06-2003, 12:24

Где, на диске хакера... 7.02, причем такой же эфект и в Mozilla, и в Netscape 7.0... Причем во всех них есть и другая проблема... Опять же с таблицами, создаю таблицу в ширину на 100%, делю ее на два столбца, один 777 у другого не ставлю, то когда я в первом столбце делаю выравнивание по середине, то выравнивается не по середине столбца, а по середине всей таблицы... можно конечно и от этих глюков избавится... Но довольно странно... Почему Опера и другие так воспринемают мою таблицу... Хотя Dreamweaver 4 и IE относятся к этому нормально, дают предсказуемый результат...

folgakauchuk · 12-07-2007, 10:58

Конечно, писать вопрос в этот форум спустя 4 года *немного странно*, но всё-таки не теряю надежды получить ответ)

Как можно создать такое <буквально> плавающее по странице окно,
которое при прокрутке плавно "приплывает" к центру экрана?

Что-нибудь вроде iframe в div'е, который двигается с помощью java-script?
Но, как уже сказано, js часто отключают.

Может, php можно?..

Подскажите, добрые люди!

Terabit · 08-01-2009, 18:09

Да простят меня модеры, но все, кто здесь отвечал до меня иди*ты.
.text
{margin-bottom:10px;}
Параметр margin-bottom указывает отступ от нижнего края страницы.

09-05-2003, 06:06	#1
Dark Камрад Темная личность Join Date: авг 2000 Location: Северная столица aka Санкт - Петербург Сообщений: 1,422	Можно такое через CSS получить? У меня есть текст. Мне нужно расположить его так, чтобы он был всегда внизу страницы, независимо от её содержания. Тоесть, если содержание страницы заканчивается на половине экрана, нужный текст должен торчать в самом низу экрана; если же содержание слишком большое и заходит за пределы экрана, то нужный текст должен находится под содержанием. Самое простое, что приходит в голову, это таблица на height=100%, но мне бы хотелось указывать параметры только для текста, без дополнительных объектов. Поэтому и интересуюсь, можно так через CSS позиционировать?
	Дневник [Ответить с цитированием]

09-05-2003, 13:01	#2
Anafay Join Date: сен 2001 Location: Воронеж Сообщений: 2,162	Может, конечно, есть более прямые способы, но, поскольку я их не знаю, то делаю под конкретную высоту (IE): Code: <html> <body topmargin="0" bottommargin="0"> <script language="javascript"> document.writeln( '<div style="width:100%;height:' , String(document.body.clientHeight-26) , 'px;">'); </script> Text </div> <div style="height:25px;wigth:100%;background-color:black;color:white;"> Footer </div> </body> </html>
	[Ответить с цитированием]

10-05-2003, 05:03	#3
Dark Камрад Темная личность Join Date: авг 2000 Location: Северная столица aka Санкт - Петербург Сообщений: 1,422	Да JS-то здесь не в тему... Уж больно его отключать любят.
	Дневник [Ответить с цитированием]

10-05-2003, 17:24	#4
Alex Spade Модератор Join Date: июл 2002 Location: Москва, Зеленоград Сообщений: 2,849	Попробуй поиграть стилями max-height и min-height но не везде это работает. Самое простое, что приходит в голову, это таблица на height=100%, но мне бы хотелось указывать параметры только для текста, без дополнительных объектов. Не совсем понял, что имелось в виду. Но я бы попробовал следующее. <TABLE HEIGHT=100%> <TR VALIGN=TOP> <TD>ТЕКСТ------аолпоаыврполрыопаыо рполрык <TR VALGN=TOP HEIGHT=50> <TD>Подпись-----тра-ля-ля-ля </table>
	[Ответить с цитированием]

11-05-2003, 05:34	#5
Dark Камрад Темная личность Join Date: авг 2000 Location: Северная столица aka Санкт - Петербург Сообщений: 1,422	>> но не везде это работает -- Мне так и не удалось что-то дельное получить. Хотя может я не понял принципа их работы?.. >> Не совсем понял, что имелось в виду. Но я бы попробовал следующее. -- В принципе это я и имел ввиду: две строки таблицы, высота которой 100%; основное содержание запихивается в первую строку, вторая - ограничивается по высоте.
	Дневник [Ответить с цитированием]

11-05-2003, 09:03	#6
Anafay Join Date: сен 2001 Location: Воронеж Сообщений: 2,162	Dark Тогда вот так: <html> <body topmargin="0" bottommargin="0" leftmargin="0"> <div style="position:absolute;left:0px;top:0px;height:100%;width:100%;"> text <div style="position:absolute;bottom:0px;left:0px;border:1px solid black;width:100%;height:25px;"> footer </div> </div> </body> </html> Если ставить бордеры и паддинги, то придется учитывать их в ширине и высоте.
	[Ответить с цитированием]

12-05-2003, 06:08	#7
Dark Камрад Темная личность Join Date: авг 2000 Location: Северная столица aka Санкт - Петербург Сообщений: 1,422	Неплохо вышло... Но, если честно, через таблицу получится как-то быстрее и проще. По крайней мере буду знать, что есть альтернатива... Спасибо. Last edited by Dark; 12-05-2003 at 06:28.
	Дневник [Ответить с цитированием]

12-05-2003, 07:47	#8
Anafay Join Date: сен 2001 Location: Воронеж Сообщений: 2,162	Dark Но, если честно, через таблицу получится как-то быстрее и проще. Выносишь стили в прилинкованный файл и экономишь пользователю (а, может, и себе) трафик. Хоть и копейки, но вдруг пригодится
	[Ответить с цитированием]

12-05-2003, 14:19	#9
Alex Spade Модератор Join Date: июл 2002 Location: Москва, Зеленоград Сообщений: 2,849	Выносишь стили в прилинкованный файл и экономишь пользователю (а, может, и себе) трафик. Хоть и копейки, но вдруг пригодится Хотя есть "отморозки", которые любят CSS отключать.
	[Ответить с цитированием]

13-05-2003, 06:08	#10
Dark Камрад Темная личность Join Date: авг 2000 Location: Северная столица aka Санкт - Петербург Сообщений: 1,422	Ой, да при чём здесь объёмы данных? Я имел ввиду процесс создания таких вещей.
	Дневник [Ответить с цитированием]

18-05-2003, 02:55	#11
Mips Модератор Злыдень немрущий Join Date: сен 2000 Location: Краснодар Сообщений: 2,333	Dark при прокрутке страницы див останется на месте. Чтобы его двигать, нужно юзать js, но он бывает отключён. Попробуй написать текст на картинке и эту картинку вставить бакграундом внизу страницы. Правда это дело может перекрываться текстом страницы. Так что тут палка о двух концах.
	Дневник [Ответить с цитированием]

18-05-2003, 05:20	#12
Dark Камрад Темная личность Join Date: авг 2000 Location: Северная столица aka Санкт - Петербург Сообщений: 1,422	>> при прокрутке страницы див останется на месте -- Почему это? Нигде он не остаётся... Благополучно прокручивается со страницей. Вообще у меня на тексте ссылка. Но если бы я реализовывал идею через бэкграунд, то тут всё просто: достаточно для <body> указать padding-middle, и никакие данные нижнюю часть страницы уже не займут.
	Дневник [Ответить с цитированием]

18-05-2003, 15:20	#13
Mips Модератор Злыдень немрущий Join Date: сен 2000 Location: Краснодар Сообщений: 2,333	Dark >Благополучно прокручивается со страницей. видимо, мы опять друг друга не поняли. Вариант 1. Видишь слева от поля ввода ссылка плавающее окно? Нажми на не и прокрути страницу вверх-вниз. Поле ввода всегда остаётся на виду. Вариант 2. На этой странице внизу баннеры RB2, хотлог, рэмблер. Они внизу страницы всегда, но при прокрутке их не видно. Так как ты хочешь сделать? ps: Выше я говорил, про вариант 1, но ты вроде говоришь про второй вариант.
	Дневник [Ответить с цитированием]

19-05-2003, 06:56	#14
Dark Камрад Темная личность Join Date: авг 2000 Location: Северная столица aka Санкт - Петербург Сообщений: 1,422	Mips Текст мне нужен внизу... всегда внизу страницы, а не экрана! Копирайт это... Только зачем мучиться? Anafay уже написал примерный метод.
	Дневник [Ответить с цитированием]

14-06-2003, 19:38	#15
Kirill_K Камрад Join Date: апр 2003 Сообщений: 72	У меня была подобная задача, я делал подвал сайта... Но вот все в IE было отлично, зато в Opere и других броузерах, эфекта этого не наблидалось... Самое простое сделать таблицу по высоте 100% и будет все ОК, но только в IE
	[Ответить с цитированием]

15-06-2003, 05:33	#16
Dark Камрад Темная личность Join Date: авг 2000 Location: Северная столица aka Санкт - Петербург Сообщений: 1,422	Kirill_K Где ж ты нашёл Оперу, в которой метод таблицы не работает? Может это и недоделанный браузер, но элементарный html он выполняет без проблем.
	Дневник [Ответить с цитированием]

15-06-2003, 12:24	#17
Kirill_K Камрад Join Date: апр 2003 Сообщений: 72	Где, на диске хакера... 7.02, причем такой же эфект и в Mozilla, и в Netscape 7.0... Причем во всех них есть и другая проблема... Опять же с таблицами, создаю таблицу в ширину на 100%, делю ее на два столбца, один 777 у другого не ставлю, то когда я в первом столбце делаю выравнивание по середине, то выравнивается не по середине столбца, а по середине всей таблицы... можно конечно и от этих глюков избавится... Но довольно странно... Почему Опера и другие так воспринемают мою таблицу... Хотя Dreamweaver 4 и IE относятся к этому нормально, дают предсказуемый результат...
	[Ответить с цитированием]

12-07-2007, 10:58	#18
folgakauchuk Камрад Join Date: июл 2007 Location: Ростов-н-Д Сообщений: 1	Конечно, писать вопрос в этот форум спустя 4 года немного странно, но всё-таки не теряю надежды получить ответ) Как можно создать такое <буквально> плавающее по странице окно, которое при прокрутке плавно "приплывает" к центру экрана? Что-нибудь вроде iframe в div'е, который двигается с помощью java-script? Но, как уже сказано, js часто отключают. Может, php можно?.. Подскажите, добрые люди!
	[Ответить с цитированием]

08-01-2009, 18:09	#19
Terabit Камрад Join Date: ноя 2008 Сообщений: 41	Да простят меня модеры, но все, кто здесь отвечал до меня иди*ты. .text {margin-bottom:10px;} Параметр margin-bottom указывает отступ от нижнего края страницы.
	[Ответить с цитированием]