Перейти к содержимому

Сервис обмена электронных валют

Партнерская программа Kredov

Проблема с резиновой вёрсткой

#1 Alex Bentley

Alex Bentley
  • Пользователь
  • 1 сообщений
  • Репутация: 0
0

Отправлено 07 Февраль 2013 - 05:31

Всем здрасьте. Разрабатываю сайт, требуется резиновая вёрстка, чтобы ширина содержимого страницы была в диапазоне от 1024 до 1280 пикселей. Вёрстка стандартная - блочная (блок header, ниже nav, ниже content в котором два блока left_c и right_c, которые обтекают с помощью float, ниже footer и всё это обрамлено блоком main).

Блоку main присвоены свойства min-width: 1024px и max-width: 1280px. Такие же свойства и у header, footer, content, nav. Всё работает лучше некуда.

Обтекающие друг друга блоки left_c и right_c, которые в блоке content, должны быть сделаны следующим образом:

1) Блок left_c должен быть фиксированным по ширине, 250px

2) Блок right_c должен быть резиновым, от 680 до 936 пикселей.

Так вот, кульминация моего вопроса, сделал для right_c ширину min-width:680px и max-width: 936px, но блоку присваивается почему то только минимальная ширина 680.

Как решить эту проблему?

Пробовал решить проблему разными способами. Убрал обрамляющий блок main. Вытащил left_c и right_c из content, который тоже удалил. Убрал обтекание, тем самым сделав left_c над right_c. Попробовал сделать опять ширину у блока и заметил, что диапазон ширины 1024-1280 ставится спокойно, и у этого же блока диапазон 680-936 не ставится. Может проблема из за поставленных ранее диапазонов у блоков header, nav, main?

HTML:

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
	<title>Главная</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">


	<div id="main">
		<div id="header">
			<div id="logo">
				<a href="index.html">
					<img src="img/logo.png" alt="Goldline International">
				</a>
			</div>
			<div id="slogan">
				<img src="img/slogan.png" alt="Ювелирные украшения - истинные ценности твоей жизни">
			</div>
			<div id="contacts">
				<p>+7 (812) <span class="number">987-65-43</span></p>
				<p>г. Санкт-Петербург</p>
				<p>ул. Улица, д.17</p>
			</div>
		</div>
		<div id="nav">
			<ul>
				<li><h2><a href="index.html" class="active_element">Главная</a></h2></li>
				<li><h2><a href="#">О компании</a></h2></li>
				<li><h2><a href="#">Программа</a></h2></li>
				<li><h2><a href="#">Коллекция</a></h2></li>
				<li><h2><a href="#">Каталог</a></h2></li>
				<li><h2><a href="#">Магазины</a></h2></li>
				<li><h2><a href="#">Статьи</a></h2></li>
				<li><h2><a href="#">Акции</a></h2></li>
				<li><h2><a href="#">Контакты</a></h2></li>
			</ul>
		</div>
		<div id="content">
			<div id="left_c">
				<h3>заголовок</h3>
				<p class="text_bold">текст</p>
				<p>текст.</p>
			</div>
			<div id="right_c"></div>
			<div id="clear"></div>
		</div>
		<div id="footer"></div>
	</div>

css

@charset "windows-1251";
@import url(reset.css);

body {/**/
	padding-top: 10px;
	background: #ffde68 url('&#46;&#46;/img/body.png') no-repeat center;
	overflow: scroll;
	font: 16px Verdana, sans-serif;
}

#main {
	min-width: 1024px;
	max-width : 1280px;
	margin: 0px auto;
	height: 100%
}

#header {
	position: relative;
	min-width: 1022px;
	max-width: 1278px;
	border-radius: 7px;
	border: 1px solid #dbc063;
	box-shadow: 3px 1px 2px #958e74;
	background: url('&#46;&#46;/img/header.png') repeat-x;
	height: 98px;
	margin-bottom: 0px;
}

#logo {
	left: 0px;
	position: absolute;
	width: 256px;
	height: 88px;
	margin: 6px 0px 6px 15px;
}

#slogan {
	position: absolute;
	left: 50%;
	margin: 6px 0px 6px -225px;
	width: 460px;
	height: 88px;
}

#contacts {
	text-align: center;
	position: absolute;
	right: 0px;
	width: 248px;
	height: 66px;
	margin: 17px 15px;
}

.number {
	font-size: 20px;
}

#nav {
	height: 30px;
	min-width: 1022px;
	max-width: 1278px;
	border-radius: 7px;
	border: 1px solid #dbc063;
	box-shadow: 3px 1px 2px #958e74;
	background: url('&#46;&#46;/img/nav.png') repeat-x;
	padding: 10px 40px;
}

#nav ul {
	text-align: justify;
	zoom: 1;
	text-justify: newspaper;
	text-align-last: justify;  
}

#nav ul:after {
	width: 100%;
	content: '';
	display: inline-block;
	height: 0px;
}

#nav ul li {
	display: inline-block;
	//display : inline;
	//zoom: 1;
	 text-align: left;
}

#nav ul li h2 {
	font: 16px Verdana, sans-serif;
}

#nav ul li h2 a {
	text-decoration: none;
	color: #000000;
	cursor: pointer;
	padding: 5px 7px;
	display: block;
}

#nav ul li h2 a:hover, .active_element {
	border-radius: 30px;
	box-shadow: 2px 2px 2px #958e74;
}

#content {
	outline: 1px solid black;
	height: 100%;
	min-width: 1022px;
	max-width: 1278px;
	border-radius: 7px;
	border: 1px solid #dbc063;
	box-shadow: 3px 1px 2px #958e74;
	background: url('&#46;&#46;/img/content.png') repeat;
	padding: 30px;
}

#left_c {
	width: 250px;/**/
	height: 100%;
	outline: 1px solid black;/**/
	float: left;
	margin-right: 30px;
}

#left_c h3 {
	font-size: 20px;
	font-weight: bold;

}

.text_bold {
	font-weight: bold;
}

#left_c p {
	padding-top: 15px;
}

#right_c {
   min-width: 680px;
	max-width: 936px;
	border: 1px solid black;
	height: 300px/**/;
	float: right;
}

#clear {
	clear: both;
}

 

 

  • 0

#2 Алия

Алия
  • Пользователь
  • 42 сообщений
  • Репутация: 10

Отправлено 09 Февраль 2013 - 22:15

Если сейчас в Ваш правый блок вставить текст, он растянется по всей ширине, но при масштабировании будет смещаться вниз под левый блок.
Попробуйте заменить:
#right_c {
   min-width: 680px;
	    max-width: 936px;
	    border: 1px solid black;
	    height: 300px/**/;
	    float: right;
на
#right_c {
width: 75%;
margin-right: -40px;
border: 1px solid black;
height: 300px/**/;
float: left;
}
и в left_c увеличьте margin-right с 30 до 40px, тогда при масштабировании получится более-менее симметрично.
Правда, правое поле у правого блока при увеличении масштаба будет уменьшаться (из-за отрицательного значения), но зато блок не спрыгнет вниз.
Если не устраивает, поиграйтесь с шириной полей блоков и процентами. Я подгоняла методом тыка.
  • 0


Оформление форума – IPBSkins.ru