Как расположить по шаблону?

@Huligan799 · Регистрация: 23.04.2010

Студворк — интернет-сервис помощи студентам

HTML5
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
<HTML>
<HEAD>
</HEAD>
<BODY>
 
<DIV class = «header»> <H1> КУБАЧИ </H1></DIV>
 
<DIV class= «menu» >
<ul class= « menu_list» >
<li> Главная </li>
<li> Новости </li>
<li> История </li>
<li> Статьи </li>
<li> Форум </li>
<li> Фото </li>
<li> Видео </li>
<li> Объявления </li>
</ul>
</DIV> 
 
<DIV class = «coutent» >
<h2> КОНТЕНТ </h2>
<p> Среди высоких гор Дагестана, некоторые вершины которых скрыты снежными покровами и белыми облаками, на крутом каменистом склоне раскинулся аул златокузнецов, как величали его издревле. На местном языке его называют Угбуг, а его жителей угбуган. В середине X века арабский географ и историк Аль-Масуди упоминает о „царстве Зерихгеран", что означает по персидски «царство кольчужников». Позже турки дали аулу название Кубачи, что значит оружейники. Это название подхватили русские, и оно теперь закрепилось за прославленным селением. Впрочем, трудно назвать это селением. Число жителей в нем доходило обычно до девяти тысяч. Это была как бы маленькая самоуправляющаяся республика, сохранявшая очень долго полную внутреннюю независимость даже при необходимости платить дань тому или иному большому государству. </p>
</DIV> 
 
<DIV class= «footer» >
<p> Кубачи (c) 2012 </p>
</DIV> 
</BODY>
</HTML>

Как расположить так как показано на шаблоне?? Помогите пожалуйста. Я новичок в HTML.

@Зверушь · 13.11.2012, 23:50

Скажем так, в учебных целях, для себя, помогу... однако мой макет далек от совершенства...

HTML5
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
<!DOCTYPE html>
<html>
<head>
<title>КУБАЧИ</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 
<div id="menu">
<ul>
<li>Главная</li>
<li>Новости</li>
<li>История</li>
<li>Статьи</li>
<li>Форум</li>
<li>Фото</li>
<li>Видео</li>
<li>Объявления</li>
</ul>
</div> 
 
<div id="rightpanel"><p>3</p></div>
 
<div id="container">
    <div id="header"><h1>КУБАЧИ</h1></div>
    
    <div id="content">
    <h2>КОНТЕНТ</h2>
        <p>Среди высоких гор Дагестана, некоторые вершины которых скрыты снежными покровами и белыми облаками, на крутом каменистом склоне раскинулся аул златокузнецов, как величали его издревле. На местном языке его называют Угбуг, а его жителей угбуган. В середине X века арабский географ и историк Аль-Масуди упоминает о „царстве Зерихгеран", что означает по персидски «царство кольчужников». Позже турки дали аулу название Кубачи, что значит оружейники. Это название подхватили русские, и оно теперь закрепилось за прославленным селением. Впрочем, трудно назвать это селением. Число жителей в нем доходило обычно до девяти тысяч. Это была как бы маленькая самоуправляющаяся республика, сохранявшая очень долго полную внутреннюю независимость даже при необходимости платить дань тому или иному большому государству.</p>
    </div> 
 
</div>
 
<div id="footer">
<p>Кубачи (c) 2012</p>
</div> 
</body>
</html>

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
* {
    margin: 0;
    padding: 0;
}
li {
    margin-left: 2em;
}
html, body {
    height: 100%;
}
p {
    padding: 0 0.5em;
    text-indent: 20px;
    text-align: justify;
}
#footer p {
    text-align: center;
}
h1, h2 {
    text-align: center;
}
#menu {
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    width: 200px;
    border-right: 2px solid black;
}
#container {
    margin-left: 202px;
    min-height: 100%;
}
#header {
    height: 50px;
    border-bottom: 2px solid black;
    text-align: center;
    background: white;
}
#footer {
    height: 50px;
    margin-left: 202px;
    margin-top: -52px;
    border-top: 2px solid black;
    background: white;
}
#content {
    margin-right: 252px;
    padding-bottom: 52px;
}
#rightpanel {
    position: fixed;
    z-index: -100;
    top: 0;
    bottom: 0;
    right: 0;
    width: 250px;
    border-left: 2px solid black;
    padding-top: 52px;
    padding-bottom: 52px;
}

Новые блоги и статьи Все статьи Все блоги /
Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .
Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .