Re: НТМЛ, позиционирование без таблиц - Веб программирование

как можно переписать следущий код не используя таблицы ?

<table height=100% border=1>
<tr height=100%><td>часть1-высота документа-25px</td></tr>
<tr height=25px><td>часть2-высота 25px</td></tr>
</table>

Здравствуйте, g_serg, Вы писали:

_>как можно переписать следущий код не используя таблицы ?

Что-нибудь в таком духе:

<html style='height: 100%; padding: 0; margin: 0;'>
<head></head>
<body style='height: 100%; padding: 0; margin: 0;'>

<div style='height: 100%; background: blue'>100%</div>
<div style='height: 25px; margin-top: -25px; background: red'>25px</div>
</body>
</html>

П>Что-нибудь в таком духе:

так не пойдет, он содержимое первого перекроет, а у меня там таблица будет

<div style='height: 100%; background: blue; border:15px solid green;'>100%</div>

Здравствуйте, g_serg, Вы писали:

_>так не пойдет, он содержимое первого перекроет, а у меня там таблица будет

А первому поставить padding-bottom: 25px, чтобы его содержимое доходило только до границы перекрытия.

Здравствуйте, g_serg, Вы писали:

_>как можно переписать следущий код не используя таблицы ?

_>

_><table height=100% border=1>
_><tr height=100%><td>часть1-высота документа-25px</td></tr>
_><tr height=25px><td>часть2-высота 25px</td></tr>
_></table>
_>

<div style="width:100%;height:100%; position:relative">
<div style="padding-bottom:25px">часть1-высота документа-25px</div>
<div style="position:absolute; bottom:25px; left:0px; width:100%">часть2-высота 25px</div>
</div>

Тип документа ставим xHTML.ru webmascon.com/xhtml.ru тебе в помощь

FA><div style="width:100%;height:100%; position:relative">
FA> <div style="padding-bottom:25px">часть1-высота документа-25px</div>
FA> <div style="position:absolute; bottom:25px; left:0px; width:100%">часть2-высота 25px</div>
FA></div>

FA>Тип документа ставим xHTML.ru webmascon.com/xhtml.ru тебе в помощь

нда... это вроде работает
только есть маленький нюансик, часть 1 нужно растянуть всю по высоте до части 2
padding-bottom тут все дело и портит, складывается со 100% и куку... ( в иешнике работает

а в "правильных" браузерах нет )
вот если можно было-бы записать height:100%-25px,то это самое оно

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body>
<div style="width:100%;height:100%; position:relative;background-color:gray">
<div style="padding-bottom:25px;height:100%;background-color:red">часть1-высота документа-25px</div>
<div style="position:absolute; bottom:0px; left:0px; width:100%;background-color:green;">часть2-высота 25px</div>
</div>
</body>
</html>

ЗЫ. пробовал <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> в нем height вообще не работает

Здравствуйте, g_serg, Вы писали:

_>ЗЫ. пробовал <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> в нем height вообще не работает

Работает, просто 100% считаются от высоты body, а body по высоте не растягивается на все окно. Если написать
<body style='height: 100%; margin:0; padding:0;'>, то высота заработает и в таком доктайпе.

Также на всякий случай прописать то же самое в html
<html style='height: 100%; margin:0; padding:0;'>

Здравствуйте, g_serg, Вы писали:

_>как можно переписать следущий код не используя таблицы ?

_>

_><table height=100% border=1>
_><tr height=100%><td>часть1-высота документа-25px</td></tr>
_><tr height=25px><td>часть2-высота 25px</td></tr>
_></table>
_>

в общем случае такая конструкция невоспроизводима в CSS. Нет там средств для этого.

Вариант с position:absolute предложенный выше оным не является ибо
<tr height=25px> соответствует в css tr{min-height:25px;}.
Со всеми вытекающими последствиями, скажем юзер имеет large font в настройках.

получилось вот так

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<body style="width: 100%; margin: 0px; padding:0px; padding-bottom:25px; overflow:hidden; border:0px;">
<div style="width:100%;height:100%;background-color:red">
    <div style="height:100%;background-color:green">часть1-высота документа-25px</div>
</div>
<div style="position:absolute; left:0px; bottom:0px; height:25px; width:100%; background-color:blue">часть2-высота 25px</div>
</body>
</html>

	От:	g_serg
	Дата:	19.11.08 14:15
	Оценка:

	От:	Панда
	Дата:	19.11.08 15:33
	Оценка:

	От:	g_serg
	Дата:	19.11.08 16:37
	Оценка:

	От:	Панда
	Дата:	19.11.08 16:48
	Оценка:	2 (1)

	От:	FatAn
	Дата:	20.11.08 00:11
	Оценка:

От:	c-smile	http://terrainformatica.com
Дата:	21.11.08 04:21
Оценка: