Резиновая верстка

pro100set · July 17, 2010

Помогите пожалуйста начинающему верстальщику, вопрос возможно вам покажется типовым и много раз описанным, заранее извиняюсь. В общем есть блок 1024-1280 px, в нем еще 3 блока выстроенные в ряд с бакграундами, так вот мне нужно что бы при сжатии основного блока центральный оставался фиксированной ширины а блоки по краям одновременно сворачивались, ну если свернется сначала один а потом другой то ничего страшного. Напишите пожалуйста, пример кода или кинте ссылку где можно посмотреть пример, сам я чето не нашел ничего. Зарание благодарен.

rediskavet · July 18, 2010

вот посмотрите, в след. раз пользуйтесь поиском, в старых темах давно бы уже ответ нашли. Edited July 18, 2010 by rediskavet

psywalker · July 18, 2010

Это не то http://www.psywalker.ru/Forum/Column/main2.html

d0ublezer0 · July 20, 2010

У меня похожая задача встала, но твой, волкер, метод мне не подходит.

Задача такая - левая и правая колонка используются для фона, в обоих колонках фон разный.

Эти колонки должны схлопываться по ширине, если не убираются в экран.

Центральная колонка фиксированной ширины.

У тебя все три колонки имеют явную высоту, вот это мне как раз и не подходит.

Как сделать, чтобы боковые колонки вытягивались по высоте центральной?

Если только центр в них вложить чтоли..

Edited July 20, 2010 by d0ublezer0

Searcher · July 20, 2010

да, например левую вложить в правую и в левую вложить центральную.

d0ublezer0 · July 20, 2010

Не, так не пойдет. Фон в колонках неповторяемый, он должен начинаться и заканчиваться по краям центральной колонки.

Вот пример

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

d0ublezer0 · July 20, 2010

UPD: Что-то я покопался, народ с такой задачей парится, решить не может. Колонки резина-фикс-резина и чтобы колонки были по высоте центральной. Центральная должна быть выровнена по центру страницы.

Пока на ум приходит только таблица

psywalker · July 20, 2010

Когда то верстал что то на подобии http://www.psywalker.ru/Portfolio/Archery/main-page.html

d0ublezer0 · July 20, 2010

В общем, я на табличке сделал. Сразу все вопросы отпадают - и по высоте и по положению фона.

Edited July 20, 2010 by d0ublezer0

Searcher · July 20, 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">

<head>
  <title></title>

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

body {

}

div.left {
  margin: 0 auto;
  background-color: #f00;
}

div.right {
  background-color: #0f0;
}

div.center {
  width: 600px;
  background-color: #00f;
  margin: 0 auto;
}

</style>
</head>

<body>

<div class="left">
	<div class="right">
		<div class="center">
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
			<p>чёйто тута, а?</p>
		</div>
	</div>
</div>

</body>
</html>

d0ublezer0 · July 20, 2010

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

Edited July 20, 2010 by d0ublezer0

Sign In

Резиновая верстка

Question

Link to comment

Share on other sites

10 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

Join the conversation

Обсуждения

Important Information