Резина не резинит

Ritter · April 23, 2010

Имеется левый, центровой, правый блок. Все эти 3 блока в одном большом блоке, В общем банальная картина. Центровому блоку поставлена резиновая ширина, но при уменьшении от максимума, переносится вниз правый блок, а центровый не резинится вообще. Какие есть варианты?

css:

Левый:
width:200px;
float:left;

Центр:
max-width: 564px;
min-width:400px;
float:left;

Правый:
width:200px;
float:right;

Большой
max-width:1084px;
min-width:984px;
margin:0px auto;

psywalker · April 23, 2010

Подход к задаче неверный.

Ritter · April 23, 2010

psywalker said:
Подход к задаче неверный.

Я знаю. Какие есть варианты, на что обратить внимание?

psywalker · April 23, 2010

Ritter said:
Я знаю. Какие есть варианты, на что обратить внимание?

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

Ritter · April 23, 2010

psywalker said:
Ну например если ты хочешь, чтобы середина тянулась, не стоит её флоатить и при этом задавать минимальную ширину. Сделай тогда все колонки в %.

Не стал флоатить середину. Теперь середина тоже, всместе с правым сместилась вниз.

Great Rash · April 23, 2010

«трехколоночный макет» в Google.

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

Ritter · April 23, 2010

Great Rash said:
«трехколоночный макет» в Google.
Видно у вас опыта не хватает в блочной верстке, поэтому предлагаю пройти по ссылке выше и посмотреть как это делают другие и разобраться что к чему. Если возникнут вопросы задавайте - поможем.

Напишу еще раз, у меня не просто 3 блока расположенных на странице, которые нужно растянуть.

Мне нужно чтобы в элементе, например, page с фиксом 1000 px, были 3 элемена: левый с фикс, правый с фикс и резиновая середина между ними. Этим элементам пофигу на блоки рядом, каждый из этих 3, готов растянуться в 1000px. Вот как сделать, чтобы тянулся 1 элемент (середина). Приэтом все три элемента не превышают 1000 px.

Edited April 23, 2010 by Ritter

Great Rash · April 23, 2010

Quote
Мне нужно чтобы в элементе, например, page с фиксом 1000 px, были 3 элемена: левый с фикс, правый с фикс и резиновая середина между ними.

Вот тут вы совершенно четко описали трехколоночный макет... ну хорошо, трехколоночный макет засунутый не в боди а в 1000-пиксельный див.

Quote
Этим элементам пофигу на блоки рядом, каждый из этих 3, готов растянуться в 1000px.

Тут вы противоречите сами себе. Либо у вас "левый фикс" и "правый фикс", либо "каждый из этих 3, готов растянуться в 1000px". Определитесь.

Ritter · April 23, 2010

Great Rash said:
Вот тут вы совершенно четко описали трехколоночный макет... ну хорошо, трехколоночный макет засунутый не в боди а в 1000-пиксельный див.

Если это так, то по примерам не получается хоть убей.

Great Rash said:
Тут вы противоречите сами себе. Либо у вас "левый фикс" и "правый фикс", либо "каждый из этих 3, готов растянуться в 1000px". Определитесь.

Ок, мне нужна только середина в резине, она растягивается во весь 1000px, смещая блоки.

CSS:

#page {
max-width:1084px;
min-width:982px;
margin:0 auto;
padding:10px;
background:#eeeeee;
}

#left {
width:220px;
float: left;
margin-top:1px;
background:#fff;

#center {
width: 100%;
background:#fff;
padding:10px;
float: left;
border-top:1px solid #ececec;
}

#right {
width:260px;
float:right;
margin-top:1px;
background:#fff;
}

Edited April 23, 2010 by Ritter

sigma77 · April 23, 2010

Ritter,

Например так


.wrapper {
max-width:1084px;
min-width:984px;
margin:0px auto;
}
.left {
width:200px;
float:left;
}
.center{
margin-left: 201px;
margin-right: 201px;
}
.right {
width:200px;
float:right;
}

<div class="wrapper">
      <div class="left">
      </div>
      <div class="right">
      </div>      
      <div class="center">
      </div>
    </div>

Если нужно, чтобы контент в разметке был выше, будет немного другая разметка.

Great Rash · April 23, 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>An XHTML 1.0 Strict standard template</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;
			font: 14px Arial, Tahoma, Verdana, sans-serif;
		}

		div {
			height: 500px;
		}

		.container {
			overflow: hidden;
			width: 1000px;
			margin: 0 auto;
		}

		.left,
		.right {
			width: 150px;
			background: pink;
		}

		.left {
			float: left;
		}

		.right {
			float: right;
		}

		.center {
			margin: 0 150px;
			background: lightblue;
		}
	</style>
</head>

<body>

	<div class="container">
		<div class="left"></div>
		<div class="right"></div>
		<div class="center"></div>
	</div>

</body>
</html>

Ritter · April 23, 2010

Great Rash, пожалуйста помоги сделать из этого примера html странички. На ней видно мою проблему.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

#page {
max-width:1084px;
min-width:982px;
margin:0 auto;
padding:10px;
background:#eeeeee;
}

#left {
width:220px;
float: left;
margin-top:1px;
background:#fff;
}

#center {
width: 100%;
background:#fff;
padding:10px;
float: left;
border-top:1px solid #ececec;
}

#right {
width:260px;
float:right;
margin-top:1px;
background:#fff;
}
</style>

</head>

<body>
<div id="page">
<div id="left"> прмпмло оам ылоумрувр олур мур кмрукмр клуроммулм мку лмрулмр друм удм рдкм рдл му </div>
<div id="center">мукмку уууу  ууууу ууу уууууууууу м ук ум умум мму м укуммк</div>
<div id="right">ыомльрвам мвам вмв вамм вам ва ва амв авмвм вамвам м в а ва  мвм в</div>
</div>

</body>

</html>

Great Rash · April 23, 2010

Я уже написал вам готовый пример.

Ritter · April 23, 2010

Great Rash said:
Я уже написал вам готовый пример.

Ваш готовый пример не делает резину!

Great Rash · April 23, 2010

Вы подумать можете хоть чуток или вам только готовые примеры подавай?

sigma77 · April 23, 2010

Ritter

http://forum.htmlbook.ru/index.php?showtop...st&p=147179

Ritter · April 23, 2010

Great Rash said:
Вы подумать можете хоть чуток или вам только готовые примеры подавай?

Если вы знаете решение проблемы то помогите, если не знаете - промолчите.

sigma77 said:
Ritter
http://forum.htmlbook.ru/index.php?showtop...st&p=147179

Я попробывал так сделать. середина все равно занимает весь 1000px div, выходя за рамки левого и правого блока.

Justnewone · April 23, 2010

Самое время картинку показать.

Решения по вашим объяснениям приведены, дважды.

sigma77 · April 23, 2010

Ritter said:
Я попробывал так сделать. середина все равно занимает весь 1000px div, выходя за рамки левого и правого блока.

Тогда я не понимаю, что вам нужно.

1) Окно на весь экран

2)Уменьшение размера окна

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

Edited April 23, 2010 by sigma77

Ritter · April 23, 2010

Justnewone said:
Самое время картинку показать.
Решения по вашим объяснениям приведены, дважды.

http://files.mail.ru/JR7EMG

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

sigma77 · April 23, 2010

Ritter

И где здесь решение, которое мы с Great Rash показывали?

Justnewone · April 23, 2010

Ritter said:
http://files.mail.ru/JR7EMG
лежит страничка, в браузере, если разрешение не меньше 1280, будет все ровно, если окно браузера уменьшать, правый блок сьедет вниз, а центр не маштабируется. Вот хотелось бы сделать, чтобы блоки оставались на местах, а цент умешался в зависимости от разрешения экрана.

Повторюсь, Вам уже ДВАЖДЫ показали готовое решение с резиной (к слову сказать, в примере Вашем резины нету никакой).

Ritter · April 23, 2010

Ок, пусть будет так как показывали. Тогда в этом случае, как сделать чтобы правый блок не смещался вниз. Обязательное условие, правый блок должен идти после div center, т.е.:

 <div class="container">
		<div class="left"></div>

		<div class="center"></div>

	  <div class="right"></div>
	</div>

Мне нужно чтобы в коде было имеено так. Но в этом случае правый блок смещается вниз.

В примере показано:

 <div class="container">
		<div class="left"></div>

<div class="right"></div>

<div class="center"></div>
	</div>

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

Edited April 23, 2010 by Ritter

sigma77 · April 23, 2010

Ritter,

Тогда так


* {padding: 0; margin: 0;}

.wrapper {
min-width: 760px;
max-width: 1020px;
margin: 0 auto;
position: relative;
}
* html .wrapper {height: 1px;}

.left {
position: absolute;
top: 0;
left: 0;
width: 200px;
background: green;  
}

.center{
background: orange;
margin: 0 200px;
}

.right {
width:200px;
position: absolute;
top: 0;
right: 0;
background: blue;
}

Ritter · April 23, 2010

sigma77, огромный респект тебе. спасибо.

Теперь вот как сделать, чтобы левый и правый блок при условии position:absolute; не лезли на элементы распологающих ниже их.

Edited April 23, 2010 by Ritter

Justnewone · April 23, 2010

Ritter said:
sigma77, огромный респект тебе. спасибо.
Теперь вот как сделать, чтобы левый и правый блок при условии position:absolute; не лезли на элементы распологающих ниже их.

Еще страшнее, как сделать, чтобы при переполнее в них контента они не проваливались через своего родителя...

Sign In

Резина не резинит

Question

Link to comment

Share on other sites

30 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

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