Рамка на странице

clavin · March 25, 2010

Здравствуйте все те, кто борется с браузерами ради корректной разметки.

Есть задача сделать в браузере рамку на весь тег <body>.

Эта рамка со всех четырёх сторон должна примыкать к окну документа и при изменении

размеров окна должна оставаться примыкать.

Т.е. желательно, чтобы полос прокрутки не возникало и практически при

любом размере окна мы видили рамку.

Сделал такую разметку. body имеет цвет lime, чтобы его проще можно было различить на странице.

<!DOCTYPE html 
	 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
	  <title>Test</title>
	  <style type="text/css">
		 * {padding:0; margin:0;}
		 body {padding:0; margin:0; background-color: lime;}
		 #main {width:100%; height:100%; border:0px; background-color: red;}
		 #main2 {margin: 10px; background-color: blue; height:100%;}
	  </style>

   </head>
   <body>

	  <div id="main">
		 <div id="main2">
text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  
text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text 
 text  text  text  text  text  text text  text  text  text  text  text  text  text  text  text  text  text  text  text  text
  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text
  text  text  text  text  text  text  text  text  text  text  text  text text  text  text  text  text  text  text  text  text 
 text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  
text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text text  text  text 
 text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text
  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text 
 text  text  text text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  
text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text
  text  text  text  text  text  text  text  text  text text  text  text  text  text  text  text  text  text  text  text  text  
text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text  text 
 text  text  text  text  text  text  text  text  text  text  text  text  text  text  text 
		 </div>
	  </div>

   </body>
</html>

Нормально разметка оторажается в ie6, в остальных браузерах сверху нет красной рамки. В Firefox и снизу рамка не получается. Как это можно исправить?

Edited March 25, 2010 by clavin

Great Rash · March 25, 2010

Была уже эта тема, воспользуйтесь поиском. Даже 2 раза кажись обсуждали.

Даже не поленился нашел

psywalker · March 25, 2010

Была уже эта тема, воспользуйтесь поиском. Даже 2 раза кажись обсуждали.
Даже не поленился нашел

Да, точняк, вот это решение clip: rect(20px auto auto 20px); мне очень понравилось

clavin · March 25, 2010

padding и margin не работают как надо

Посмотрел на форуме разные решения, может что-то универсальное получится сверстать

Great Rash · March 25, 2010

Я дал вам ссылку на готовое решение, что вам еще надо?

psywalker · March 25, 2010

Я дал вам ссылку на готовое решение, что вам еще надо?

А ему надо, чтобы ты за него сделал всю работу, ты не понял чтоли? Давай, меньше слов, бери лопату и копай.

Sign In

Рамка на странице

Question

clavin

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

clavin

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information