Специально для тех кто любит резиновые дизайны - HTML и CSS

megarazum · 12.02.2011, 21:18

Специально для тех кто любит резиновые шаблоны написал структуру, надеюсь больше не будет вопросов как сделать расширяющийся слой и прочие. Сделать 2 слоя очень просто. Я постарался с тремя. Знаю что многим пригодится. Очень легко эта структура встраивается во все CMS. Удачи всем с версткой. Кому необходимо может скачать. Каждая строчка с комментарием. Так что изменения труда не составит.

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>TITLE</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="body"> <!--Общий слой под это дело-->
    <div id="left_column">&nbsp;<!--Стираем пустой пробел и размещаем что хотим в левой колонке--></div> <!-- Левая колонка -->
        <div id="center_column">&nbsp;<!--Стираем пустой пробел и размещаем что хотим в центральной колонке--></div> <!-- Центральная колонка-->
            <div id="right_column">&nbsp;<!--Стираем пустой пробел и размещаем что хотим в правой колонке--></div> <!-- Правая колонка -->
</div>
</body>
</html>

И сам css

Код:

body {
background-color: grey;/* Цвет фона */
}

#body {
min-width:1000px; /* Минимальная ширина всего слоя ( при сужении браузера слои не наложатся друг на друга,
а так же от минимальной ширины этого слоя зависит ширина слоя посередине )*/
position:relative; /* Относительное позиционирование чтобы была зависимость для других слоев в этом слое */
}

#left_column { /* Левая колонка для размещения менюх */
 width: 250px; /* Ширина блока */
 height:100px; /* Высота блока */
 left: 20px; /* Положение от левого края ( впритык к левому краю браузера не оч красиво :) ) */
 border: 1px solid #fff; /* Рамка вокруг слоя шириной в 1px и бел */
 background: #ecb; /* Цвету фона */
 position: absolute; /* Абсолютное позиционирование */
}

#center_column { /* Центральная колонка для размещения контента */
margin: 0px 270px 0px 270px; /* Отступы вокруг блока ( если задавать ширину то у нас не получится заполнять слой при растягивании )*/
height:100px; /* Высота блока */
border: 1px solid #fff; /* Рамка вокруг слоя шириной в 1px и бел */
background: orange; /* Цвет фона */
position: relative; /* Относительное позиционирование, но чтобы уже была зависимость с соседними слоями */
}

#right_column { /* Правая колонка для размещения менюх */
width: 250px; /* Ширина блока */
height:100px; /* Высота блока */
top:0px; /* Отступ от верхнего края ( если не задать, то из за относительного позиционирования расположется ниже на ту высоту,
которая указана в предыдущем блоке) */
right: 20px; /* Положение от правого края */
border: 1px solid #fff; /* Рамка вокруг слоя шириной в 1px и бел */
background: #ecb; /* Цвет фона */
position: absolute; /* Абсолютное позиционирование */
}

Не забываем говорить спасибо

Все удачного кодинга!

wm_leviathan · 12.02.2011, 21:22

зачет. спасибо думаю в хозяйстве пригодится

JTG · 12.02.2011, 22:47

А у вас молоко убежало тег <title> не закрыт

megarazum · 12.02.2011, 22:56

поправил) хоть это не так значимо, все равно спасибо за внимательность.

Magneto · 12.02.2011, 23:58

Автор путает слои с колонками.

megarazum · 13.02.2011, 10:52

Я условно называю колонками. Чтоб понятнее было. Вы же разбираетесь Вам все понятно, а сколько тех кто постоянно задает вопросы?)

12.02.2011, 22:47	#3
JTG я получил эту роль Старожил Регистрация: 25.05.2007 Сообщений: 3,694	А у вас молоко убежало тег <title> не закрыт пыщь

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
для тех, кто хочет сделать добро!!!	darkkhan	Паскаль, Turbo Pascal, PascalABC.NET	5	21.01.2011 23:30

12.02.2011, 21:22	#2
wm_leviathan Форумчанин Регистрация: 17.02.2010 Сообщений: 399	зачет. спасибо думаю в хозяйстве пригодится

12.02.2011, 22:56	#4
megarazum Регистрация: 12.02.2011 Сообщений: 8	поправил) хоть это не так значимо, все равно спасибо за внимательность.

12.02.2011, 23:58	#5
Magneto Форумчанин Регистрация: 10.02.2008 Сообщений: 178	Автор путает слои с колонками.

13.02.2011, 10:52	#6
megarazum Регистрация: 12.02.2011 Сообщений: 8	Я условно называю колонками. Чтоб понятнее было. Вы же разбираетесь Вам все понятно, а сколько тех кто постоянно задает вопросы?)