Информация к новости
  • Просмотров: 517
  • Автор: sulicompany
  • Дата: 3-08-2013, 22:32
 (голосов: 0)
3-08-2013, 22:32

Верстаем шаблон в три колонки

Категория: Программирование » PHP


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

Чтобы не отделяться от всех, сегодня я расскажу и наглядно покажу, как сделать простую верстку в три колонки на чистом CSS.

Итак, для начала скопируйте этот html код (объяснение будет ниже) в файл index.html

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
 
<title>CSS template</title>
 
<head>
 
<link rel="stylesheet" type="text/css" href="main.css">
 
</head>
 
<body>
 
<div id="main_block">
 
<div id="header">
 
</div>
 
<div id="left-column">
 
</div>
 
<div id="content">
 
</div>
 
<div id="right-column">
 
</div>
 
<div id="footer">
 
</div>
 
</div>
 
</body>
 
</html>

Это просто html каркас, теперь, чтобы все было в три колонки, нам нужно применить CSS стили. В строке <link rel="stylesheet" type="text/css" href="main.css"> мы подключаем файл  с таблицами стилей.

Вот код, который вам нужно сохранить в файл main.css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
*
{
 
margin:0;
 
padding:0;
 
}
 
#main_block
 
{
 
width:900px;
 
min-height:600px;
 
margin:0 auto;
 
}
 
#header
 
{
 
height:100px;
 
background:lightyellow2;
 
}
 
#left-column
 
{
 
min-height:500;
 
width:200;
 
background:orange;
 
float:left;
 
word-wrap:break-word;
 
}
 
#content
 
{
 
width:500;
 
min-height:500;
 
background:lightyellow3;
 
float:left;
 
word-wrap:break-word;
 
}
 
#right-column
 
{
 
width:200;
 
min-height:500;
 
background:orange;
 
float:left;
 
word-wrap:break-word;
 
}
 
#footer
 
{
 
clear:both;
 
width:900;
 
height:50;
 
background:green;
 
}

Теперь разъяснения всего что мы наделали=). Думаю html код вам и так понятен, если будут вопросы, пишите в комментарии.

У main_block мы устанавливаем ширину в 900 пикселей, в нем будем размещать все остальные блоки с контентом и менюшками.

Left-column — это наша левая колонка, в которой будет размещаться меню или что-нибудь еще. Там мы ставим float:left, для того чтобы она прижималась к левому краю главного блока. Теперь размещаем блок с контентом, это #content. Там тоже стоит float:left; то есть он уже будет прижиматься к левому меню, а дальше #right-column который жмется к блоку с контентом.

Ширина у меню 200, плюс ширина контента 500, плюс ширина правой колонки 200 = 900, то есть ширина нашего главного блока , в котором все располагается. Background ставьте сами, здесь он только для наглядности.

Вот скриншот что должно было получиться:

css шаблон в три колонки