Моя первая страница на слоях

Колос · November 1, 2008

Всё время верстал на таблицах. Но решил попробовать новый сайт слепить на слоях.

Задача:

- Сайт тянется и в ширину и высоту

- Шапка и подвал заданной высоты

- Основная часть из двух колонок

- Левая колонка заданной ширины, правая по ширине тянется

- Если в одной из средних частей содержимое не влазит, то в ней должна появляться прокрутка

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

Однако получилось довольно просто. Однако хотелось бы чтобы знатоки глянули на мое творение на предмет возможных косяков или возможных подводных камней в будущем. Что-то не верится, что это может быть так просто. Не хотелось бы, чтобы дерьмо всплыло где-нибудь около времени сдачи.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Первая страница</title>
	<style>
	  BODY 
	  {
		background-color: #FFFFCC;
		margin:0;
		padding:0;
		height:100%;
	  }
	  #verh
	  {
		height:149px;
		width:100%;
		background-color:#00FF00;
		vertical-align:bottom;
		position:absolute;
		top:0px;
	  }
	  #niz
	  {
		height:79px;
		width:100%;
		background-color:#999999;
		position:absolute;
		bottom:0px;
	  }
	  #lev
	  {
		background-color:#FF0000;
		width:200px;
		height:expression(document.body.offsetHeight-228);
		position:absolute;
		top:149px;
		bottom:79px;
		overflow:auto;
		float:left;
	  }
	  #prav
	  {
		background-color:#0000FF;
		width:expression(document.body.offsetWidth-200);
		height:expression(document.body.offsetHeight-228);
		position:absolute;
		top:149px;
		bottom:79px;
		left:200px;
		right:0px;
		overflow:auto;
		float:right;
	  }
	</style>
  <head>
  <body>
	<div id="verh">
	</div>
	<div id="lev">
	  <img src="http://www.htmlbook.ru/images/quicksite.gif" width="200px" height="1000px">
	</div>
	<div id="prav">
	  <img src="http://www.htmlbook.ru/images/htmlcss.gif" width="200px" height="200px">
	</div>
	<div id="niz">
	</div>
  </body>
</html>

Searcher · November 5, 2008

многовато expression...

здесь лучшие варианты верстки дивами: http://www.freeartists.ru/articles/make-up/div-vs-table/

Колос · November 5, 2008

многовато expression...

Чем это черевато?

rash · November 5, 2008

Тормозами как минимум.

Searcher · November 6, 2008

А максимум, expression совсем вешают или закрывают эксплорер.

Sign In

Моя первая страница на слоях

Question

Колос

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Searcher

Link to comment

Share on other sites

Колос

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information