Рамка, А В Ней Сайт

Ritter · September 13, 2010

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

npofopr · September 13, 2010

в чем проблема то?

разве не получается прижатому к низу футеру сделать border-bottom? ну или картинку

Ritter · September 14, 2010

в чем проблема то?
разве не получается прижатому к низу футеру сделать border-bottom? ну или картинку

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

Great Rash · September 14, 2010

http://forum.htmlbook.ru/index.php?showtop...D0%B0&st=40

Searcher · September 14, 2010

Что мудрить то? Центральный блок сделайте абсолютным, укажите все координты (top, right, bottom, left) в соответствии с размерами рамки, и укажите для этого блока overflow:scroll; и будет вам скролл

Ну а все остальные тоже можно абсолютом, кроме верхнего, естественно.

Int · September 14, 2010

html
{
border: 1px solid black;
}

o_O

psywalker · September 14, 2010

html
{
border: 1px solid black;
}

o_O

Да, а теперь попробуй это используй на деле.

Great Rash · September 15, 2010

Int, а если я в рамку фон хочу?

Ritter · September 15, 2010

Короче вот сайт - _ там черная рамка, а в ней крутится каталог. Я хочу так же. Понятно что там флеш, мне нужен html и css и чтобы разрешение монитора не влияло на это дело!

Edited September 15, 2010 by Ritter

Great Rash · September 15, 2010

И в чем проблема? Что вы уже сделали кроме своего хотения?

Ritter · September 15, 2010

И в чем проблема? Что вы уже сделали кроме своего хотения?

У меня не получается сделать чтоб рамка была как-бы "поверх" основной страницы и не крутилась вместе с сайтом. в вашем примере об этом ничего нет.

Edited September 15, 2010 by Ritter

psywalker · September 15, 2010

position: fixed;

Great Rash · September 15, 2010

Вам нужно "крутить" не весь сайт а содержимое конкретного дива.

P.S. Вы знаете, что такое overflow?

P.P.S. psywalker, да не нужен тут никакой position: fixed;...

Ritter · September 15, 2010

Вам нужно "крутить" не весь сайт а содержимое конкретного дива.
P.S. Вы знаете, что такое overflow?
P.P.S. psywalker, да не нужен тут никакой position: fixed;...

Да, знаю.

Ок, конкретного дива, если так удобнее. Можно хоть какой-то минимальный пример?

Edited September 15, 2010 by Ritter

Great Rash · September 15, 2010

Эх...

<!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" xml:lang="en" lang="en">

<head>
	<title>Title</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		html, body {
			height: 100%;
		}

		.header,
		.footer {
			position: absolute;
			width: 100%;
			height: 100px;
			color: white;
			background: black;
		}

		.header div,
		.footer div,
		.body div {
			padding: 10px;
		}

		.header {
			top: 0;
		}

		.footer {
			bottom: 0;
		}

		.body {
			position: absolute;
			top: 100px;
			bottom: 100px;
			overflow: auto;
			width: 100%;
			background: silver;
		}
	</style>

	<!--[if IE 6]>
	<style type="text/css">
		.body {
			height: expression(document.documentElement.clientHeight - 200 + "px");
		}
	</style>
	<![endif]-->
</head>

<body>

	<div class="header">
		<div>
			Я хедер
		</div>
	</div>
	<div class="body">
		<div>
			<span style="white-space: nowrap;">
				Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело 
				Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело 
				Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело Я тело
			</span><br />
			Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />
			Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />
			Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />
			Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />
			Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />Я тело<br />
		</div>
	</div>
	<div class="footer">
		<div>
			Я футер
		</div>
	</div>

</body>
</html>

Searcher · September 15, 2010

Ну вот хотя бы так:

<!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" xml:lang="ru" lang="ru">
  <head> <title></title>
  <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
  <style type="text/css">
	* {margin:0; padding:0;}
	body {background-color: #ccf;}
	#container {position: absolute; left: 30px; top: 30px; right: 30px; bottom: 30px; background-color: #cfc; overflow: auto;}
  </style>
  </head>
  <body>
	<div id="container">
	  <p>В ворота гостиницы губернского города NN въехала довольно 
	  красивая рессорная небольшая бричка, в какой ездят холостяки: отставные 
	  подполковники, штабс-капитаны, помещики, имеющие около сотни душ крестьян, - 
	  словом, все те, которых называют господами средней руки. В бричке сидел 
	  господин, не красавец, но и не дурной наружности, ни слишком толст, ни 
	  слишком тонок; нельзя сказать, чтобы стар, однако ж и не так, чтобы слишком 
	  молод. Въезд его не произвел в городе совершенно никакого шума и не был 
	  сопровожден ничем особенным; только два русские мужика, стоявшие у дверей 
	  кабака против гостиницы, сделали кое-какие замечания, относившиеся, впрочем, 
	  более к экипажу, чем к сидевшему в нем. "Вишь ты, - сказал один другому, - 
	  вон какое колесо! что ты думаешь, доедет то колесо, если б случилось, в 
	  Москву или не доедет?" - "Доедет", - отвечал другой. "А в Казань-то, я думаю, 
	  не доедет?" - "В Казань не доедет", - отвечал другой. Этим разговор и 
	  кончился Да еще, когда бричка подъехала к гостинице, встретился молодой 
	  человек в белых канифасовых панталонах, весьма узких и коротких, во фраке с 
	  покушеньями на моду, из-под которого видна была манишка, застегнутая 
	  тульскою булавкою с бронзовым пистолетом. Молодой человек оборотился назад, 
	  посмотрел экипаж, придержал рукою картуз, чуть не слетевший от ветра, и 
	  пошел своей дорогой.</p>
	</div>
  </body>
</html>

да, и Great Rash тоже уже вариант предлжил...

у меня более сырой, без адаптации под ИЕ6 и т.п...

Ritter · September 15, 2010

Great Rash, спасибо.

Int · September 15, 2010

Поправил

html
{
border:2px solid black;
height:99%;
margin:0;
}

Edited September 15, 2010 by Int

psywalker · September 15, 2010

Поправил

ага, и на разных разрешениях будет по разному.

Searcher · September 16, 2010

Ребят, самое очевидное и правильное решение - установить все координаты абсолютного контейнера, чтобы он висел с нужными отступами со всех сторон. Ну а для ИЕ нужен будет только небольшой экспрэшн.

Sign In

Рамка, А В Ней Сайт

Question

Link to comment

Share on other sites

19 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information