Перейти к содержимому


Выбрать шаблон и создать сайт

Старая кроссбраузерная верстка, нужен современный аналог

#1 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176
0

Отправлено 12 Июнь 2009 - 14:38

Итак, есть вот такой вот коротенький код:
<html>
<head>
</head>
<body topMargin=0 leftMargin=0 marginHeight=0 marginWidth=0>
	<table cellspacing=0 cellpadding=0 border=1 width=700 height=100% align=center>
		<tr><td height=1>top</td></tr>
		<tr vAlign=top><td>middle</td></tr>
		<tr><td height=1>bottom</td></tr>
	</table>
</body>
</html>
для наглядности поставлен атрибут border=1 (при реальной верстке, естественно, использовался border=0)

Фактически, все просто:
* одноколоночная верстка страницы с местами под шапку, под контент и нижний отбойник.
* нерезиновая, 700px в ширину, отцентрованная по горизонтали в окне браузера.
* шапка и контент занимают ровно столько места, сколько нужно для размещения начинки и не более того.
* контент же занимает столько места
** (если контента мало) сколько нужно, чтоб было занято все окно браузера по высоте
** (если контента много) - соответственно область контента растягивается по-необходимости

Задача: сверстать это все с соблюдением новомодных стандартов от W3C
А. таблицей, вынеся ее оформление в css
и
B. блочной версткой

Вроде простая задача, но либо приходится применять совершенно неадекватные навороты, либо не соблюдается кроссбраузерность.
Что прикольно - даже простое добавление доктайпа
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
к этому коду сбивает верстку набок. ;)

 

 

  • 0

#2 v1ex

v1ex
  • Пользователь
  • 225 сообщений
  • Репутация: 0

Отправлено 12 Июнь 2009 - 15:20

html:
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<title></title>
	<link type="text/css" rel="stylesheet" media="all" href="style.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
  </head>
  <body>
	<div class="header">
	  
	</div>
	<div class="middle">
	
	</div>
	<div class="footer">
	
	</div>
  </body>
</html>
css:
body
{
  margin: 0px;
  padding: 0px;
}

.header
{
  /*свои стили*/
}
.middle
{
  min-height: 400px;
}
.footer
{
  /*свои стили*/

}

чтоб было занято все окно браузера по высоте

http://tigir.com/javascript.htm, читаем "Как узнать ширину и высоту клиентской (рабочей) области окна браузера?"
  • 0

#3 yury

yury
    Topic Starter
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 12 Июнь 2009 - 15:34

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

ЗЫ
в вашем коде
момент из п.2 нерезиновая, 700px в ширину, отцентрованная по горизонтали в окне браузера не раскрыт никак ;)
  • 0

#4 v1ex

v1ex
  • Пользователь
  • 225 сообщений
  • Репутация: 0

Отправлено 12 Июнь 2009 - 16:56

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

Именно. Только я вот не вижу никакого смысла так делать, можете объяснить зачем?

омент из п.2 нерезиновая, 700px в ширину, отцентрованная по горизонтали в окне браузера не раскрыт никак wink.gif

Сорри, из головы вылетело:
.header
{
  margin: auto;
  width: 700px;
}
.middle
{
  margin: auto;
  min-height: 400px;
}
.footer
{
  margin: auto;
  width: 700px;

}

  • 0

#5 yury

yury
    Topic Starter
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 12 Июнь 2009 - 17:28

Именно.

а можно код в студию?
а то мне кажется, что оно как-то не сильно коротко и просто будет...

все же, думается, должны быть более адекватные задаче средства.
не может быть, чтоб блочная верстка была настолько ущербна, чтоб в ее арсенале не было средств, которые есть в допотопном html.

Только я вот не вижу никакого смысла так делать, можете объяснить зачем?

Странный вопрос.
Причин много может быть.
Ну, например, для того, чтоб при переключении между страничками с небольшим (но разным) количеством контента, отбойник визуально не скакал вверх вниз, а был всегда внизу окошка браузера, где ему собсно и положено быть.
Почему бы так не сделать, особенно, если это реализуется простым добавлением атрибута в табличке height="100%" ?
  • 0

#6 v1ex

v1ex
  • Пользователь
  • 225 сообщений
  • Репутация: 0

Отправлено 12 Июнь 2009 - 18:11

а можно код в студию?
а то мне кажется, что оно как-то не сильно коротко и просто будет...

все же, думается, должны быть более адекватные задаче средства.
не может быть, чтоб блочная верстка была настолько ущербна, чтоб в ее арсенале не было средств, которые есть в допотопном html.

Код писать не буду, там и так все понятно. Алгоритм вы примерный написали. Осталось только найти функцию, которая будет вычислять высоту шапки и подвала.

Странный вопрос.
Причин много может быть.
Ну, например, для того, чтоб при переключении между страничками с небольшим (но разным) количеством контента, отбойник визуально не скакал верх вниз, а был всегда внизу окошка браузера, где ему собсно и положено быть.
Почему бы так не сделать, если это реализуется простым добавлением атрибута в табличке height="100%" ?

Согласен, причины есть, но на практике они редко востребованы.
А вот ваша причина мне кажется не совсем адекватной... Во первых, на нормальных сайтах обычно контента больше чем можно уместить в клиентской области по вертикали. Во вторых, если даже контента будет мало, пустое пространство где должен быть контент, будет смотреться тупо. Тем более не на резине.

Вообще можно приделать футер следующим образом:
<!DOCTYPE html PUBLIC  "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
	<title></title>
	<link type="text/css" rel="stylesheet" media="all" href="style.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=uft-8" />
  </head>
  <body>
	<div class="box">
	</div>
	<div class="footer">
	  Тра-та-та, футер
	</div>
  </body>
</html>
body
{
  margin: 0px;
  padding: 0px;
}

.box
{
  margin-bottom: 30px;
}

.footer
{
  background-color: #006699;
  bottom: 0px;
  height: 30px;
  position: fixed;
  width: 100%;
}
Он абсолютно всегда будет оставаться внизу страницы.
Только последний элемент страницы, должен иметь отступ снизу размером с ширину футера.
  • 0

#7 yury

yury
    Topic Starter
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 12 Июнь 2009 - 18:46

Все же считаю, что в данном случае приделывать костыли из жаваскрипта к блочной верстке не вполне правильно.
Это же не браузерный баг и не что-то особенное, требующее фиксов, самый обычный случай в верстке.
Неужели здесь жаваскрипт - это единственный выход?

Во первых, на нормальных сайтах обычно контента больше чем можно уместить

Это вы нормальных мониторов не видели ;)
bottom: 0px;
  position: fixed;
для данного случая никак не годится - если контента будет много, он будет перекрыт "футером".
margin-bottom: 30px;
конечно, поможет вытащить контент из-под футера скролом, но смотрится кривовато.
  • 0

#8 v1ex

v1ex
  • Пользователь
  • 225 сообщений
  • Репутация: 0

Отправлено 12 Июнь 2009 - 19:05

Это вы нормальных мониторов не видели wink.gif

Это вы к чему? Причем здесь мониторы? Если, вы к тому, что у меня маленький монитор, где все умещается, вы глубоко ошибаетесь ;)

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

конечно, поможет вытащить контент из-под футера скролом, но смотрится кривовато.
Каким еще скоролом? О_о
  • 0

#9 yury

yury
    Topic Starter
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 12 Июнь 2009 - 19:10

Это вы к чему?

это я к тому что бывают мониторы, на которых помещается ну очень много контента.
это сказано никак не в обиду вашему монитору ;)

Каким еще скоролом? О_о

скрол - прокрутка, калька от англ. scroll
  • 0

#10 v1ex

v1ex
  • Пользователь
  • 225 сообщений
  • Репутация: 0

Отправлено 12 Июнь 2009 - 20:00

Я знаю что такое скрол, вы мне объясните, как вы скролом собираетесь из под футера контент выдернуть. О_о
Я ведь сделал, отступ, что бы контент не лез под футер....
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru