Резиновый шаблон на div (слоях) и css

Главная > HTML CSS JS > Резиновый шаблон на div (слоях) и css

23 января 2012 zabey Написать комментарий К комментариям

Много решений в инете, о конструировании на слоях шаблонов страниц, но под мою задачу не было. Вот решил поделиться. ТЗ:

Три колонки (ничего нового, в принципе - не важно сколько их)
Все растягивается по ширине, пропорционально: левая - 20%; правая - 20%; центральная - 60% (ничего нового)
Слои не должны переноситься при ресайзе окна (тоже логично, но немного конфликтует со следующим пунктом)
При ресайзе слои должны ужиматься до минимально размера в 300px - левая и правая колонки, 400px - центральная

А проблема в том, что 300px получается больше 20% при общей ширине в 1000px, и слои переносятся если места не хватает. Итак, решение:

Ограничиваем слои в сжатии
Задаем параметры ширины в соответствии с ТЗ
Боковые слои выравниваем налево и направо. И обтекаем их центральным

Вот как-то так. Смотрим на практике: Демо Текст примера:

<html>
	<head>
		<style>
			.scroll-holder-right{
				width:20%;
				min-width:300px;
				height:330px;
				background-color:blue;
				display:block;
				float:right;
			}
			.scroll-holder-left{
				width:20%;
				min-width:300px;
				height:330px;
				background-color:green;
				display:block;
				float:left;
			}
			.scroll-holder-wide{
				min-width:400px;
				height:330px;
				background-color:red;
				display:block;
			}
			#content{
				width:100%;
				min-width:1000px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="scroll-holder-left"></div>
			<div class="scroll-holder-right"></div>
			<div class="scroll-holder-wide">Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</div>
		</div>
	</body>
</html>

<html>

<head>

<style>

.scroll-holder-right{

width:20%;

min-width:300px;

height:330px;

background-color:blue;

display:block;

float:right;

}

.scroll-holder-left{

width:20%;

min-width:300px;

height:330px;

background-color:green;

display:block;

float:left;

}

.scroll-holder-wide{

min-width:400px;

height:330px;

background-color:red;

display:block;

}

#content{

width:100%;

min-width:1000px;

}

</style>

</head>

<body>

<div class="scroll-holder-wide">Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</div>

</div>

</body>

</html>

На что обратить внимание:

Сначала идут слои левый и правый. Только потом основной - это важно, т.к. их придется обтекать текстом - а для этого они должны быть до текста.
Для левого и правого слоя указываем width - ширину в процентах; и min-width - минимальную ширину в пикселях;
Для центрального блока задаем только минимальную ширину (он растянется тогда но, но будет обтекать... вот так вот жестко получается :p )
И нужен контейнер - блок, который не сожмется меньше, чем суммарная минимальная ширина слоев. Иначе они начнут переноситься, начиная с центрального.

Еще пара примеров: Если нужно, что бы блоки были слева, (показывается, что все равно куда выравнивать...) Демо2 Если процентное соотношение совпадает с минимальным пиксельным соотношением размеров слоев (20% 20% 60% и 200px, 200px, 600px) Здесь для центрального блока указываем width:60% и float:left Это не очень хороший вариант, т.к. проценты есть проценты, и дробные значения округлятся. А значит при определенной ширине будет появляться зазор (справа от блоков - учитывая, что меняем выравнивание и порядок блоков. если не менять - то между центральным и правым) Демо3 Стили второго примера (только стили немного поменялись):

<style>
			.scroll-holder-right{
				width:20%;
				min-width:300px;
				height:330px;
				background-color:blue;
				display:block;
				float:left;
			}
			.scroll-holder-left{
				width:20%;
				min-width:300px;
				height:330px;
				background-color:green;
				display:block;
				float:left;
			}
			.scroll-holder-wide{
				min-width:400px;
				height:330px;
				background-color:red;
				display:block;
			}
			#content{
				width:100%;
				min-width:1000px;
			}
		</style>

<style>

.scroll-holder-right{

width:20%;

min-width:300px;

height:330px;

background-color:blue;

display:block;

float:left;

}

.scroll-holder-left{

width:20%;

min-width:300px;

height:330px;

background-color:green;

display:block;

float:left;

}

.scroll-holder-wide{

min-width:400px;

height:330px;

background-color:red;

display:block;

}

#content{

width:100%;

min-width:1000px;

}

</style>

Листинг третьего примера (Меняем стили и порядок блоков):

<html>
	<head>
		<style>
			.scroll-holder-right{
				width:20%;
				min-width:200px;
				height:330px;
				background-color:blue;
				display:block;
				float:right;
			}
			.scroll-holder-left{
				width:20%;
				min-width:200px;
				height:330px;
				background-color:green;
				display:block;
				float:left;
			}
			.scroll-holder-wide{
				width:60%;
				min-width:600px;
				height:330px;
				background-color:red;
				display:block;
				float:left;
			}
			#content{
				width:100%;
				min-width:1000px;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div class="scroll-holder-left"></div>
			<div class="scroll-holder-wide">Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</div>
			<div class="scroll-holder-right"></div>
		</div>
	</body>
</html>

<html>

<head>

<style>

.scroll-holder-right{

width:20%;

min-width:200px;

height:330px;

background-color:blue;

display:block;

float:right;

}

.scroll-holder-left{

width:20%;

min-width:200px;

height:330px;

background-color:green;

display:block;

float:left;

}

.scroll-holder-wide{

width:60%;

min-width:600px;

height:330px;

background-color:red;

display:block;

float:left;

}

#content{

width:100%;

min-width:1000px;

}

</style>

</head>

<body>

</div>

</body>

</html>

Categories: HTML CSS JS Tags: div, template, резиновый шаблон

(1 votes, average: 5,00 out of 5)

Загрузка...

Комментарии (0) Уведомления (0) Написать комментарий Уведомление

Пока что нет комментариев.

Пока что нет уведомлений.

Как менять и узнавать высоту элементов html страницы на JQuery Как открыть дочернее окно и работать с ним

backnet — ответы на простые вопросы и не очень

Резиновый шаблон на div (слоях) и css

Рекомендуем

Видеохостинг/Вебинары

Категории

Свежие комментарии

Присоединяйтесь к нам

Полезные заметки

Полезные сервисы

Архивы