Блочная вертикально-резиновая разметка возвращается. / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

Введите код, изображенный на картинке. Если код нечитаемый, кликните картинку, чтобы загрузить другой вариант.

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Блочная вертикально-резиновая разметка возвращается.

24 сообщений из 24, страница 1 из 1

Блочная вертикально-резиновая разметка возвращается.

#35598505

Жмурик

Гость

Просканировал форум на тему сабжа, понял что такое в чистом виде невозможно.
Что немного подрывает авторитет приверженцев блочной разметки.

Но самое интересное в этой истории, что при использовании Transition перестает удовлетворять и табличная разметка (впрочем, песня не о том).

Но время идет...
Кто-то что-то наверняка придумал.

Толпарищи, кто как практически решает проблему?

(Уточню саму проблему: диалоговое окно должно иметь фиксированные по высоте header и footer, прилипшие соответственно к верху и низу окна, и вариабельный content, занимающий все остальное пространство окна. Например, если content содержит листбокс с высотою 100%, то этот листбокс занимает всю высоту от header до footer и самоскроллится, если элементов много.)

...

Рейтинг:

0 / 0

16.10.2008, 15:03

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35598873

ShSerge

Участник

Откуда: ʚонɔ dиw

Сообщения: 24 440

Рейтинг: 0 / 0

Не пишут. Наверное, тема задолбала уже.

...

Рейтинг:

0 / 0

16.10.2008, 16:55

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35599078

Жмурик

Гость

Тема-то не раскрыта!..

Тема очень неудобная, зияет фурункулом для активных блочников, кричащих, что табличная верстка- вчерашний день и целиком перекрывается по возможностям блочной, и что "данные должны быть отделены от разметки".
Потому как грош цена технологии, которая не может решить такую простую проблему.
Смешно.

...

Рейтинг:

0 / 0

16.10.2008, 17:54

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35599288

зы

Участник

Сообщения: 3 646

Рейтинг: 0 / 0

похоливарить захотел? :) а всем просто лениво

...

Рейтинг:

0 / 0

16.10.2008, 19:49

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35599500

Ренат

Участник

Откуда: Елабуга & Казань & Москва & Набережные челны

Сообщения: 4 025

Рейтинг: 0 / 0

Чето я не очень понял? Как именно область контент работаь должена если в нем большое количетсво обьектов не умещаюшихся на странице? Как фрейм чтоли? Или в тупую стандартно увеличиваться, смешаю вниз footer?

Код: plaintext

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

<div style="height:20%;width:100%" id="header">
  header
</div>

<div style="min-height:60%;width:100%" id="content">
  <listbox style="height:100%"></listbox>
</div>

<div style="height:20%;width:100%" id="footer">
  footer
</div>

Может вру, но вот: верхний див сверху, нижний див прилип снизу, с листбокс с параметрами в 100% займет высоту всей метсности контент.

...

Рейтинг:

0 / 0

16.10.2008, 22:46

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35599608

Жмурик

Гость

Ренат, спасибо, что хоть откликнулся.
Но...
к сожалению, каждый див занимает ровно 1 строку.
Вот подправленный вариант, на котором проверял:

Код: plaintext

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
	<div style="height:20%;width:100%;background-color:yellow" id="header">
	  header
	</div>

	<div style="min-height:60%;width:100%" id="content">
  		<div style="height:100%;background-color:aqua">listbox</div>
	</div>

	<div style="height:20%;width:100%;background-color:yellow" id="footer">
	  footer
	</div>
</body>
</html>

Но даже если б и заработало, я б придрался :) к процентам в хидере и футере. Может, я агульно хочу сымитировать десктопный диалог, но по крайней мере с табличной разметкой это без труда удавалось.
Хочется чего-нибудь типа

Код: plaintext

1.
2.
3.

	<div style="height:4em;width:100%;" id="header">
	  header
	</div>

Забегая наперед, скажу, что с помощью javascript проблема легко решается, но это не чистое решение и уже не исключительно разметка.

...

Рейтинг:

0 / 0

17.10.2008, 00:00

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35599641

Ренат

Участник

Откуда: Елабуга & Казань & Москва & Набережные челны

Сообщения: 4 025

Рейтинг: 0 / 0

Код: plaintext

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div style="width:100%;height:100px">
	<div style="height:200px;width:100%;background-color:yellow" id="header">
	  header
	</div>

	<div style="(hieght:100px; - проверь с ним и без него);min-height:100%;width:100%" id="content">
  		<div style="height:100%;background-color:aqua">listbox</div>
	</div>

	<div style="height:100px;width:100%;background-color:yellow" id="footer">
	  footer
	</div>
</body>
</html>

А так?
Сорь что гадаю... Так влом открывать что то типа блокнота итд итп...

...

Рейтинг:

0 / 0

17.10.2008, 00:20

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35599671

Жмурик

Гость

:)
Уже что-то...
Но я все эти телодвижения прошел...

Вот что нужно для футера:

Код: plaintext

1.
2.
3.
4.
5.
6.
7.
8.

		.footer
		{
			position:absolute;
			bottom: 0 ;
			width: 100 %;
			height: 2em;
		}

Понятно, это стиль.
Позишн и нулевой боттом меня шокирует, но работает :)

А вот резиновый контент - это фантастика.

...

Рейтинг:

0 / 0

17.10.2008, 00:43

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35599707

зы

Участник

Сообщения: 3 646

Рейтинг: 0 / 0

ты на таблицах-то запости что ты хочешь

...

Рейтинг:

0 / 0

17.10.2008, 01:15

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35599722

Жмурик

Гость

Код: plaintext

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.

<html>
<body>
	<table style="width: 100%;height:100%">
		<tr><td bgcolor="cyan" style="height:3em">header</td></tr>
		<tr>
			<td>
				<select style="width:100%;height:100%" size="10">
					<option>Item  01 </option>
					<option>Item  02 </option>
					<option>Item  03 </option>
					<option>Item  04 </option>
					<option>Item  05 </option>
					<option>Item  06 </option>
					<option>Item  07 </option>
					<option>Item  08 </option>
					<option>Item  09 </option>
					<option>Item  10 </option>
					<option>Item  11 </option>
					<option>Item  12 </option>
					<option>Item  13 </option>
					<option>Item  14 </option>
					<option>Item  15 </option>
					<option>Item  16 </option>
					<option>Item  17 </option>
					<option>Item  18 </option>
					<option>Item  19 </option>
					<option>Item  20 </option>
					<option>Item  21 </option>
					<option>Item  22 </option>
					<option>Item  23 </option>
					<option>Item  24 </option>
					<option>Item  25 </option>
					<option>Item  26 </option>
					<option>Item  27 </option>
					<option>Item  28 </option>
					<option>Item  29 </option>
					<option>Item  30 </option>
					<option>Item  31 </option>
					<option>Item  32 </option>
					<option>Item  33 </option>
					<option>Item  34 </option>
					<option>Item  35 </option>
					<option>Item  36 </option>
					<option>Item  37 </option>
					<option>Item  38 </option>
					<option>Item  39 </option>
					<option>Item  40 </option>
					<option>Item  41 </option>
					<option>Item  42 </option>
					<option>Item  43 </option>
					<option>Item  44 </option>
					<option>Item  45 </option>
					<option>Item  46 </option>
					<option>Item  47 </option>
					<option>Item  48 </option>
					<option>Item  49 </option>
					<option>Item  50 </option>
					<option>Item  51 </option>
					<option>Item  52 </option>
					<option>Item  53 </option>
					<option>Item  54 </option>
					<option>Item  55 </option>
					<option>Item  56 </option>
					<option>Item  57 </option>
					<option>Item  58 </option>
					<option>Item  59 </option>
				</select>
			</td></tr>
		<tr><td bgcolor="cyan" style="height:3em">footer</td></tr>
	</table>
</body>
</html>

Для большей ясности поизменяйте размеры окна.

...

Рейтинг:

0 / 0

17.10.2008, 01:35

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35600662

зы

Участник

Сообщения: 3 646

Рейтинг: 0 / 0

а теперь я взял и подленько так дописал с самого верху строчку:

Код: plaintext

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

и твои таблицы ушли сосать ногу

...

Рейтинг:

0 / 0

17.10.2008, 13:01

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35600679

ShSerge

Участник

Откуда: ʚонɔ dиw

Сообщения: 24 440

Рейтинг: 0 / 0

зыа теперь я взял и подленько так дописал с самого верху строчку:

Код: plaintext

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

и твои таблицы ушли сосать ногу
Так это же и так всем известный факт.

...

Рейтинг:

0 / 0

17.10.2008, 13:05

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35600748

зы

Участник

Сообщения: 3 646

Рейтинг: 0 / 0

конечно известный, мало того, я хочу чтобы мой сайт был сделан по стандартам и отображался во всех браузерах одинаково, что без доктайпа сделать достаточно гиморройно. Вывод - если хочешь desktop layout фигарь на скриптах и не пудри мозги окружающим, css ещё не дорос до нужного состояния. Пытаться сделать подобное на чистом цсс - это все равно что копать яму под фундамент саперной лопаткой.
да, с горизонтальными лэйаутами все намного проще.

...

Рейтинг:

0 / 0

17.10.2008, 13:24

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35601583

Жмурик

Гость

Я про Транзишнл писал в самом первом посте.
Если б ни он, я б и не заморачивался с блоками.
Но, к сожалению, некоторые ajax asp.net контролы его требуют. Самое интересное, что совместимость меня мало волнует, в моем случае достаточно IE. Но в общем случае.

И про скрипты я уже писал, с ними уже так и работает.

После всей этой истории я не пойму, чему радуются блочники и чмурят табличников - верстка и там и там стала сродни головоломки.

...

Рейтинг:

0 / 0

17.10.2008, 17:11

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35601702

зы

Участник

Сообщения: 3 646

Рейтинг: 0 / 0

слепо радуются только дураки, которые не способны принимать правильные решения в зависимости от ситуации

...

Рейтинг:

0 / 0

17.10.2008, 17:59

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35601877

ShSerge

Участник

Откуда: ʚонɔ dиw

Сообщения: 24 440

Рейтинг: 0 / 0

зыслепо радуются только дураки...
Цитировать и цитировать.

...

Рейтинг:

0 / 0

17.10.2008, 20:10

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35603151

NEKRASSOV

Участник

Откуда: какаяразнецевск

Сообщения: 2 952

Рейтинг: 0 / 0

css -то дорос. Это сцуки-производители броузеров хренью маются и пюлюют на стандарты. Особенно Майкрософт.

...

Рейтинг:

0 / 0

19.10.2008, 21:26

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35603152

NEKRASSOV

Участник

Откуда: какаяразнецевск

Сообщения: 2 952

Рейтинг: 0 / 0

Есть фокус, который помогает решить вопрос кроссброузерности блочной разметки в css.

Способ очистки Олсетта.

...

Рейтинг:

0 / 0

19.10.2008, 21:28

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35603294

illion

Участник

Сообщения: 1 288

Рейтинг: 0 / 0

NEKRASSOVcss -то дорос. Это сцуки-производители броузеров хренью маются и пюлюют на стандарты. Особенно Майкрософт.
а что Майкрософт, я по крайней мере знаю как с ним бороться, гораздо больше в этом плане напрягают глючные версии Оперы.
NEKRASSOVСпособ очистки Олсетта.
блеснул умным словом и загадочно скрылся. Ссылку положено давать в таких случаях.
P.S. Меня терзают сомненья: Оллсет - это фамилия или производная от allset? А то я вся такая сомнительная, особенно после того как меня наш бухгалтер терзал две недели, прося установить ему программу Вэйтлок (я ваще без понятия что это, а он достал), а в итоге оказалось что это всего лишь бухгалтерская интерпретация названия Outlook...

...

Рейтинг:

0 / 0

20.10.2008, 01:32

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35603298

apapacy

Участник

Сообщения: 1 276

Рейтинг: 0 / 0

Это мне напоминает рассказ Дж. К. Джерома о том как англичанин долго учился у патентованых знатоков произношению немецкого звука Г(Х). После чего ни один немец его не понял.

...

Рейтинг:

0 / 0

20.10.2008, 01:42

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35603311

IDVsbruck

Участник

Откуда: Украина

Сообщения: 4 289

Рейтинг: 0 / 0

Я тоже хочу пристроиться в ваш кружок послушать г-на Некрасова из Барнаула.

...

Рейтинг:

0 / 0

20.10.2008, 03:07

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35604239

NEKRASSOV

Участник

Откуда: какаяразнецевск

Сообщения: 2 952

Рейтинг: 0 / 0

Да ладно Вам, господа, стебаться. хотя форумчане - они такие...

тони олсетт. Tony Alsett

А описывать - долго. Не обессудьте, коллеги!

Лучше всего - найдите книжку:

автор: Чарьлз Уайк-Смит
название: Стильный сайт с помощью CSS
год издания: 2007
Издательство: NT Press, Москва

Там очень все подробненько описывается. Вообще очень хорошая книжка, хотя и небольшая. Самое передовое про сочетание XHTML + CSS. Причем в Барнауле я ее купил всего за 159 руб. Разметка дивами после этой книжки - просто святое.

...

Рейтинг:

0 / 0

20.10.2008, 13:55

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35637734

Korcar

Участник

Сообщения: 7 955

Рейтинг: 0 / 0

В инете нашел один отзыв о книге:
"У меня есть книга "Стильный сайт с помощью CSS", так вот, там много фишек, которые можно через стили замутить, и там же на половине фишек стоит ЭНРВMIE (Это Не Работает В Microsoft Internet Explorer)."
Хотя мож отзыв и не об этой книге. Автор не указан

...

Рейтинг:

0 / 0

06.11.2008, 14:46

| Ответить | Цитировать | Написать

Блочная вертикально-резиновая разметка возвращается.

#35637996

ZeusTheTrueGod

Участник

Сообщения: 719

Рейтинг: 0 / 0

я всё-таки за лэйаут на джаваскрипте
Сам сейчас использую extjs, и вот её лэйауты меня полностью устраивают

...

Рейтинг:

0 / 0

06.11.2008, 15:58

| Ответить | Цитировать | Написать

24 сообщений из 24, страница 1 из 1

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?fid=22&tid=1455622]:	0ms
get settings:	7ms
get forum list:	10ms
check forum access:	2ms
check topic access:	2ms
track hit:	383ms
get topic data:	9ms
get forum data:	2ms
get page messages:	59ms
get tp. blocked users:	1ms
others:	247ms

total:	722ms

	Необходимые cookie
	Cookie для сбора статистики
	Cookie для маркетинга и рекламы