Вопрос по резиновой вёрстке с полями

@LEXXX_NF · November 13, 2009

Столкнулся с таким пожеланием дизайнера:

- сайт должен растягиваться;

- при этом у сайта есть поля слева и справа от области контента. При разрешении >= 1280px, эти поля составляют 8% от ширины.

- при разрешении <= 1024 поля должны исчезать и всё пространство браузера должна занимать область контента.

- при разрешении 1024 - 1280 с поля просто должны быть, видимо, какого-то переходного размера.

Интересно, вообще возможно, чтобы поля то были, то не были?

Разумеется, всё это без javascript'а.

shvv · November 13, 2009

Столкнулся с таким пожеланием дизайнера:
- сайт должен растягиваться;
- при этом у сайта есть поля слева и справа от области контента. При разрешении >= 1280px, эти поля составляют 8% от ширины.
- при разрешении <= 1024 поля должны исчезать и всё пространство браузера должна занимать область контента.
- при разрешении 1024 - 1280 с поля просто должны быть, видимо, какого-то переходного размера.
Интересно, вообще возможно, чтобы поля то были, то не были?
Разумеется, всё это без javascript'а.

Может так:

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
	  * {
		  margin: 0px;
		  padding: 0px;
	  }

	  body {
		  width: 100%;
	  }

	  .wrapper {
		  max-width: 92%;
		  min-width: 1024px;
		  background: red;
		  margin: 0 auto;
	  }

	</style>
  </head>
  <body>
	<div class="wrapper">
	  Test block
	</div>
  </body>

Edited November 13, 2009 by shvv

rus · November 13, 2009

Столкнулся с таким пожеланием дизайнера:
- сайт должен растягиваться;
- при этом у сайта есть поля слева и справа от области контента. При разрешении >= 1280px, эти поля составляют 8% от ширины.
- при разрешении <= 1024 поля должны исчезать и всё пространство браузера должна занимать область контента.
- при разрешении 1024 - 1280 с поля просто должны быть, видимо, какого-то переходного размера.
Интересно, вообще возможно, чтобы поля то были, то не были?
Разумеется, всё это без javascript'а.

Вот только недавно была похожая задачка, спроси у psywalkera он ее по ходу решал с mishka2.

Great Rash · November 16, 2009

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

@LEXXX_NF · November 16, 2009

shvv, rus, спасибо за варианты.

Great Rash, я рад, что для тебя такие задачки просты, ты, наверно, кучу собак на этом съел, молодец!

psywalker · November 16, 2009

Great Rash, я рад, что для тебя такие задачки просты, ты, наверно, кучу собак на этом съел, молодец!

Да он вообще маньяк своего дела, я сам таких не встречал ещё, он походу не собаку съел, а слона как минимум :rolleyes: :unsure:

Great Rash · November 16, 2009

@LEXXX_NF

Если не лень покажите картинку того, что хотите получить.

psywalker

Да ну, ты меня давно заборол. Я пожалуй не такой маньяк.

psywalker · November 16, 2009

psywalker
Да ну, ты меня давно заборол. Я пожалуй не такой маньяк.

Ааа, ну да, конечно..20 раз..тебя хрен заборешь, ты если захочешь, кого хочешь уложишь, так что не рассказывай мне тут :rolleyes: :unsure:

@LEXXX_NF · November 16, 2009

Если не лень покажите картинку того, что хотите получить.

У меня есть только словесное описание дизайнера, попробую изобразить:

В общем тут:

1. При разрешении < 1024 полей нет, всё пространство занято контентом.

2. При большем разрешении появляются поля (на картинке я написал 8%, но это не обязательно).

3. При разрешении > 1280 поля должны составлять 8% от ширины окна.

4. При этом область контента должна тянуться только до 1440px в ширину.

* Что должно происходить с полями в интервале разрешений от 1024 до 1280 - неизвестно, поля просто должны быть.

mozg4d · November 16, 2009

Может я не в теме.. но зачем?

1024 - (8% от 1280) * 2 ~ 1075

Из-за 50-ти пикселей чтоли?

Edited November 16, 2009 by mozg4d

Searcher · November 17, 2009

Может я не в теме.. но зачем?
1024 - (8% от 1280) * 2 ~ 1075
Из-за 50-ти пикселей чтоли?

там же диапазон от 1024 до 1440

без JS помоему это никак не решить, читайте про адаптивную разметку

@LEXXX_NF · November 17, 2009

Может я не в теме.. но зачем?
1024 - (8% от 1280) * 2 ~ 1075
Из-за 50-ти пикселей чтоли?

Что-то я не понял вашей математики, но смысл в том, чтобы при низких разрешениях поля не занимали драгоценное место.

Great Rash · November 17, 2009

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

@LEXXX_NF · November 17, 2009

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

Если б я знал, какие нужны подробности, я бы описал.

Поля - однородно-серые.

Great Rash · November 17, 2009

Тогда все еще проще. Делаете серый бекграунд у body и размещаете основной контент по центру страницы например так:

CSS
.my_div {
	margin: 0 auto;
	min-width: 1024px; /* советую сделать минимальную ширину не 1024, а 1004 пикселя из-за скроллбара */
	max-width: 1400px;
}

HTML
<div class="my_div"></div>

Чем не устраивает этот вариант?

@LEXXX_NF · November 17, 2009

Чем не устраивает этот вариант?

Этот вариант не даёт полей на резрешении меньше 1400px, так как div растягивается на все 100% окна.

mozg4d · November 17, 2009

При разрешении > 1280 поля должны составлять 8% от ширины окна.

Соответственно при разрешении 1281 мы выигрываем 50 пикселей по сравнению с 1024.. А те у кого разрешение - выше - открывают броузер в оконном режиме. вот и не понятно - зачем..

@LEXXX_NF · November 18, 2009

А те у кого разрешение - выше - открывают броузер в оконном режиме.

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

Great Rash · November 18, 2009

А не подходит решение в сообщении номер 2?

@LEXXX_NF · November 18, 2009

А не подходит решение в сообщении номер 2?

Оно не подошло из-за того, что нельзя зафиксировать максимальную ширину области контента. Но, добавив дополнительный обёрточный блок, эту проблемку удалось решить. И как я сразу до этого не догадался?!

Конечный вариант кода такой:

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Block with margins</title>
	<style type="text/css">
	  * {
		margin: 0px;
		padding: 0px;
	  }

	  body {
		width: 100%;
		background: grey;
	  }

	  .wrapper {
		max-width: 84%;
		min-width: 1024px;
		background: red;
		margin: 0 auto;
	  }

	  .w0 {
		max-width: 1667px;
		margin: 0 auto;
	  }
	</style>
  </head>
  <body>
	<div class="w0">
	  <div class="wrapper">
		Lorem ipsum dolor sit amet
	  </div>
	</div>
  </body>
</html>

Извините, что так долго полоскал мозги.

И всем спасибо за хорошие решения и интересные ссылки!

mishka · November 18, 2009

Для разрешения по ширине 1024px оптимальная ширина страницы 1000px! Иначе будет появлятся горизонтальный скролл. Вы же ширину вертикального скролла не учитываете.

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Block with margins</title>
	<style type="text/css">
	body{
		margin:0;
		background:#808080;
	}
	.w0{
		max-width:1714px;
		margin:0 auto;
	}
	.wrapper{
		max-width:84%;
		min-width:1000px;
		background:#f00;
		margin:0 auto;
	}
	</style>
</head>
<body>
	<div class="w0">
		<div class="wrapper">
			Lorem ipsum dolor sit amet
		</div>
	</div>
</body>
</html>

ничего революционного я не сделал, просто подправил твой код.

и 84% от 1667 разве это 1440?

Edited November 18, 2009 by mishka2

psywalker · November 18, 2009

Для разрешения по ширине 1024px оптимальная ширина страницы 1000px! Иначе будет появлятся горизонтальный скролл. Вы же ширину вертикального скролла не учитываете.
<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Block with margins</title>
	<style type="text/css">
	body{
		margin:0;
		background:#808080;
	}
	.w0{
		max-width:1714px;
		margin:0 auto;
	}
	.wrapper{
		max-width:84%;
		min-width:1000px;
		background:#f00;
		margin:0 auto;
	}
	</style>
</head>
<body>
	<div class="w0">
		<div class="wrapper">
			Lorem ipsum dolor sit amet
		</div>
	</div>
</body>
</html>
ничего революционного я не сделал, просто подправил твой код.
и 84% от 1667 разве это 1440?

Так медведь, а как же ИЕ6

@LEXXX_NF · November 18, 2009

Для разрешения по ширине 1024px оптимальная ширина страницы 1000px! Иначе будет появлятся горизонтальный скролл. Вы же ширину вертикального скролла не учитываете.

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

и 84% от 1667 разве это 1440?

1400 - это 84% от 1667. Согласен, тут правильнее написать 1714px, но это - опять-таки - не принципиально.

mishka · November 18, 2009

Вы конечно правы. Но, думаю, конкретные размеры в пикселях - это фигня, не достойная обсуждения, ибо важна сама суть метода.
1400 - это 84% от 1667. Согласен, тут правильнее написать 1714px, но это - опять-таки - не принципиально.

Ну дык я же говорю что ничего революционного не внес. Просто подкоректировал под заданные размеры.

Я на эту тему только сегодня наткнулся, когда ты уже дал решение задачи. Решение отличное. Лучше не придумать. Только для ие6 надо експрешены дописать и все ок.

Edited November 18, 2009 by mishka2

mozg4d · November 20, 2009

А те у кого разрешение - выше - открывают броузер в оконном режиме.
Сомневаюсь в достоверности вашего утверждения. Есть ли какая-нибудь статистика, подтверждающая его?

http://www.baekdal.com/articles/Usability/...ze-preliminary/

старьё конечно..

Sign In

Вопрос по резиновой вёрстке с полями

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

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

Обсуждения

Important Information