Как отменить "перемешивание" между собой в футере баннера блока контактов и блока соцсетей?

@Vors · Регистрация: 03.06.2014

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

а то получается фигня

@Sn1p3rOk · 23.07.2015, 03:28

Что значит "перемешивание"? Вкратце опишите чтобы я не запускал ваш код.

@Gabriel_Castro · 23.07.2015, 14:06

Расскажите подробнее что должно быть.
У Вас сперва текст в <h2> "ничего лишнего..."
затем картинка с надписью "уже можно и забыть про ..."
потом <div>КОНТАКТЫ
и текст "номер телефона" со ссылками на соц сети.

И у Вас эти элементы наслаиваются!
Вам нужно это исправить?
И еще они и должны быть друг под другом и по центру?

Добавлено через 3 часа 24 минуты
Подождал час, ответа нет.
переписал год полностью.
Много лишнего и неправильного.
исправлять и объяснять что не правильно - долго.
расположите все файлы правильно.
СТРУКТУРА КАТАЛОГОВ:
в корне файлы html,
и папки (img) (css) соответственно картинки и файлы css
Вам понадобится css-reset, код предоставлю, создайте файл css и подключите к странице.
Если расположите его в папке css, то он в коде html уже подключен.
Некоторый код закомментировал, его можно удалить, остальное переписал.

Остался пустым foote, скажите что нужно там расположить и как должно выглядеть и я Вам сделаю.
Т.к. сейчас не совсем будет красиво.

Код можно полностью скопировать и заменить.

Кстати, я отформатировал код в правильное и удобное представление, так как он и должен выглядеть.
Остался только раздел с книгами по ФИЛОСОФИИ, сделайте сами по примеру выше.

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
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html>
<head>
<title>страница История как наука</title>
<meta charset="windows-1251">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<!--<div id="str"></div>-->
    <div id="header">
        <img align="right" src=http://www.imageup.ru/img280/2085138/3205841.jpg class="ipgW">
        <h1>
            Sckriptoriumsz.com
        </h1>
        <h2>
            Сайт безумного &laquo;книжного крота&raquo;
        </h2>
    </div>
    <div id="nav">
        <ul class="main-menu">
            <li><a href="#">ГЛАВНАЯ</a></li>
            <li><a href="#">ОТЕЧЕСТВЕННАЯ ИСТОРИЯ</a>
                <ul class="sub-menu">
                    <li><a href="#">Источники</a></li>
                    <li><a href="#">Авторы и работы</a></li>
                </ul>
            </li>
            <li><a href="#">ЗАРУБЕЖНАЯ ИСТОРИЯ</a>
                <ul class="sub-menu">
                    <li><a href="#">Источники</a></li>
                    <li><a href="#">Авторы и работы</a></li>
                </ul>
            </li>
            <li><a href="#">ИСТОРИЯ КАК НАУКА</a>
                <ul class="sub-menu">
                    <li><a href="#">Вспомогательные исторические дисциплины</a></li>
                    <li><a href="#">Теория.методология и философия истории</a></li>
                </ul>
            </li>
            <li><a href="">КОНТАКТЫ</a></li>
        </ul>
    </div>
    <div id="content">
        <h4>Теория. методология и философия исторического знания</h4>
                <h3>МЕТОДОЛОГИЯ:</h3>
                <p>
                    <a href=# target="_blank">
                        АЛЕКСАНДР ЛАПЛО-ДАНИЛЕВСКИЙ&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(fb2-PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        БОРИС МОГЛЬНИЦКИЙ&nbsp;&nbsp;&laquo;Введение в методологию истории&raquo;&nbsp;&nbsp;(DJVU-odt-PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ВАЛЕНТИН КОЛОМИЙЦЕВ&nbsp;&nbsp;&laquo;Методология истории (от источника к исследованию)&raquo;&nbsp;&nbsp;(Firefox Html Document-DJVU)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ВИКТОР ВАЗЮЛИН&nbsp;&nbsp;&laquo;Логика истории. Вопросы теории и методологии&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ВЛАДИМИР СИДОРЦОВ&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(PDF )
                    </a>
                </p>
                <p>
                    <a href=#>
                        ИВАН КОВАЛЬЧЕНКО&nbsp;&nbsp;&laquo;Методы исторического исследования&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ИЗРАИЛЬ БИСК&nbsp;&nbsp;&laquo;Методология истории Курс лекций&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ИОГАНН ГУСТАВ ДРОЙЗЕН&nbsp;&nbsp;&laquo;Историка. Лекции об энциклопедии и методологии истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=target="_blank">
                        ЛЕВ СКВОРЦОВ&nbsp;&nbsp;&laquo;История и антиистория К критике буржуазной философии истории&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ЛЕОНИД ЗАШКИЛЬНЯК&nbsp;&nbsp;&laquo;Методология истории от древности до современности&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ЛОРИНА РЕПИНА&nbsp;&nbsp;&laquo;Историческая наука сегодня. Теории, методы, перспективы&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href=#>
                        МАРИЯ ЛАПТЕВА&nbsp;&nbsp;&laquo;Теория и методология истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href=#>
                        МАРИЯ РУМЯНЦЕВА&nbsp;&nbsp;&laquo;Теория истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        НАДЕЖДА ДОРОШЕНКО&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href=#>
                        НИКОЛАЙ СМОЛЕНСКИЙ&nbsp;&nbsp;&laquo;Теория и методология истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ШАРЛЬ ЛАНГЛУА&nbsp;&nbsp;&laquo;Введение в изучение истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
            <h3>ФИЛОСОФИЯ:</h3>
            <p><a href=https://yadi.sk/d/fZVYjNLdeyAN4
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;История России конец или новое начало&raquo;&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=https://yadi.sk/d/qJHCVe8_eyAw9
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Россия критика исторического опыта&raquo; Том1&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=https://yadi.sk/d/exqOtX-geyC6Q
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Россия критика исторического опыта&laquo; Том2&nbsp;&nbsp;(PDF)</a></p>
            <p><a href=https://yadi.sk/d/38vTOgpOeyC26
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Труды&raquo;&nbsp;&nbsp;(PDF)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ЕРЫГИН&nbsp;&nbsp;&laquo;Восток запад Россия (становление цивилизационного подхода)&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ИРВИН&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(fb2-doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ЛОМОНОСОВ&nbsp;&nbsp;&laquo;Опыт трансцендентальной философии истории&raquo;&raquo;&nbsp;&nbsp;(doc-Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР МАЛИНОВ АЛЕКСАНДР ПРОХОРЕНКО&nbsp;&nbsp;&laquo;Философия истории в России&raquo;&nbsp;&nbsp;(DJVU-PDF)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ПАНАРИН (под ред)&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(fb2-doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСЕЙ ЛОСЕВ&nbsp;&nbsp;&laquo;Античная философия истории&raquo;&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=
            target="_blank">АНАТОЛИЙ АЛФЕРОВ&nbsp;&nbsp;&laquo;Идея общественного прогресса. Содержание и становление&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">АНДРЕЙ РОДИН&nbsp;&nbsp;&laquo;Философия и конец истории&raquo;&nbsp;&nbsp;(doc-Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АРНОЛЬД ТОЙНБИ&nbsp;&nbsp;&laquo;Постижение истории&raquo;&nbsp;&nbsp;(Firefox HTML Document-PDF)</a></p>
            <p><a href=
            target="_blank">АРОН ГУРЕВИЧ&nbsp;&nbsp;&laquo;Философия и история Теория формаций и реальность истории&raquo;&nbsp;&nbsp;(doc- Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АРТУР ДАНТО&nbsp;&nbsp;&laquo;Аналитическая философия истории&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">ВАЛЕНТИН РЮМИН&nbsp;&nbsp;&laquo;Историософия А.Дж. Тойнби&raquo;&nbsp;&nbsp;(doc- Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">ВАЛЬТЕР БЕНЬЯМИН&nbsp;&nbsp;&laquo;О понятии истории&raquo;&nbsp;&nbsp;( Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">ВИКТОР ИЛЬИМ&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(PDF-DJVU)</a></p>
            <p><a href=
            target="_blank">ВИКТОР ФЕЛЛЕР&nbsp;&nbsp;&laquo;Введение в историческую антропологию.&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВИЛЬЯМ ГРИН&nbsp;&nbsp;&laquo;Каркас истории&raquo;&nbsp;&nbsp;(txt- Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВЛАДИМИР ПАНТИН&nbsp;&nbsp;&laquo;Циклы и волны глобальной истории&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВОЙЦЕХ ВЖОЗЕК&nbsp;&nbsp;&laquo;Историография как игра метафор - судьбы новой исторической науки&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ГЕОРГ ВИЛЬГЕЛЬМ ГЕГЕЛЬ&nbsp;&nbsp;&laquo;Философия истории (Слово о сущем)&raquo;&nbsp;&nbsp;(PDF-fb2-DJVU)</a></p>
        </div>
    <div id="clear"></div>
    <div id="footer">
        <h1>Ничего лишнего &ndash; только необходимое</h1>
        
    </div>
</div>
</body>
</html>

css-reset

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
/* reset.css document */
@charset "windows-1251";
html, body, div, span, applet, object, iframe, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline;
      outline: none;
      -webkit-font-smoothing: antialiased;
      -webkit-text-size-adjust: 100%;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      list-style:none;
    }
html, body
    {
        height: 100%;
    }
 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
    {
        display: block;
    }
 
ol, ul
    {
        list-style: none;
    }
 
blockquote, q
    {
        quotes: none;
    }
blockquote:before, blockquote:after, q:before, q:after
    {
        content: '';
        content: none;
    }
strong
    {
        font-weight: bold;
    }
 
table
    {
        border-collapse: collapse;
        border-spacing: 0;
    }
img
    {
        border: 0; max-width: 100%;
    }

и основной css

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
body
    {
        padding:0;
        margin:0;
        background:#222222;
    }
 
h1
    {   
        text-align:left;
        margin:45px 0px 0px 25px;
        font-size:68px;
        color:black;
        text-shadow:1px 1px 2px WHITE,-1px -1px 2px WHITE;
    }
h2
    {
        text-align:left;
        margin:20px 0px 0px 25px;
        font-size:23px;
        color:white;
    }
 
h4
    {
        text-align:center;
        padding:5px 0px 5px 0px;
        background:purple;
        font-size:27px;
        color:white;
    }
 
h5
    {
        text-align:right;
        margin:25px 422px 15px 0px;
        font-size: 25px;
    }
 
#container
    {
        position:relative;
        width: 95%;
        background:#323232;
        margin:100px auto;
    }
 
/*
    #str
        {
            height: 51px;
            width:100%;
            background:black;
            margin-bottom:-55px; 
            padding:0;
            border: 10px solid #f00;
        }
*/
 
#header
    {
        height: 250px;
        width:100%;
    }
 
 
#nav
    {
        float: left;
        width: 250px;
    }
 
    
/*
    .ipgW
        {
            float:right ;
            margin-right: 65px;
            margin-top: 45px;
        }   
*/
    
    .main-menu
        {
            list-style:none;
            margin:25px auto;
        }
 
 
            .main-menu a
                {
                    display:block;
                    color:#fff;
                    padding:8px 14px;
                    text-decoration:none;
                }
            
            .main-menu a:hover
                {
                    background:#004000; 
                }
            
            .main-menu> li
                {
                    position: relative;
                }
            
            .main-menu  .sub-menu
                {
                    list-style:none;
                    display:none;
                    padding:0;
                    margin:0;
                    background:darkblue;
                    position:absolute;
                    top:5px;
                    left:250px;
                    z-index:11;
                    width:170px;
                }
            
            .main-menu>li:hover .sub-menu
                {
                    display:block;
                }
 
#content
    {
        position:relative;
        margin:0 0 0 250px;
        padding:5px;
        color:#fff;;
    }
 
        #content p
            {
                padding:10px;
            }
 
 
/*
.Sschindlerr ul
    {
        font-size:18px;
        list-style-type:circle;
        text-align:left;
        padding-top:45px;
    }
 
 
.DRINKC
    {
        text-decoration:none;
        padding:18px 25px;
    }
 
.Sschindler2r ul
    {
        font-size:18px;
        list-style-type:circle;
        text-align:left;
        padding-top:45px;
    }
 
.DRINKz
    {
        text-decoration:none;
        padding:8px 25px;
    }
*/
#clear
    {
        clear:both;
        padding:0;
        margin:0;
    }
 
#footer
    {
        color:white;
        height:300px;
        border:1px solid#f00;
    }
 
/*
.ipgQ {
text-align:right;
margin:25px 422px 15px 0px;
border:3px solid #fff;
}
 
.svyaz {
background: darkblue;
border:1px solid white;  
color: #fff;
margin: 47px 0px 27px 435px;
padding: 25px;
width:23em;
height: 120px;
}
 
.svyaz p {
margin: 4em 0; 
overflow: hidden;
height: 100%;
}
 
.svyaz img {
border:2px solid white;  
float: left; 
margin-right: 2em;
}
 
.share{
width:270px;
border:1px solid white;
border-radius:2%;
margin:0 auto;
margin-top:120px;
padding:10px;
padding-left:20px;
background:blue;
}
 
.share b{
margin-right:15px;
color:white;
font-weight:normal;
text-transform:uppercase;
}
 
.social {
display:inline-block;
border:1px solid white;
border-radius:50%;
width:40px;
height:40px;
margin-right:10px;
vertical-align:middle;
line-height: 38px;
text-decoration:none;
}
 
.social-vk{
text-align:center;
color:white;
background-color:#400000;
background-position: 0 0;
}
 
.social-fb{
text-align:center;
color:white;
background-color:#400000;
background-position: -40px 0;
}
 
.social-tw{
text-align:center;
color:white;
background-color:#400000;
background-position: -80px 0;
}
*/

Еще, для красоты я изменил основной фон и фон тегов, но передать картинки (патерны) не могу.
Для видимости цвет немного отличается. Его и нужно заменить.
Здесь уже на Ваше усмотрение.

@Vors · 23.07.2015, 15:01 **[ТС]**

Сообщение от Gabriel_Castro

Вам нужно это исправить?
И еще они и должны быть друг под другом и по центру?

да - друг под другом и по центру
а у меня блок с контактами
прилипает собака к баннеру
[del]

к тому же в первом списке лит-ры откуда-то
взялось черное выделение пунктов списка
при наведении мыши (не планировалось вообще!)

Что сразу не ответил -прошу прощения
вырубил ноут чтоб по нему ж не настучать
со злости

не вытанцовывалось как себе представлял

за "вычищенный" код
и потраченное на мня время
спасибо

про цвета мне и раньше твердили - вероятно
от темного фона придется таки отказываться

Добавлено через 55 секунд

Сообщение от Sn1p3rOk

не запускал ваш код.

вирусов не запускаю чес-слово

Добавлено через 7 минут

Сообщение от Gabriel_Castro

кажите что нужно там расположить и как должно выг

должно было
сверху вниз соот-но одно под другим
1 текст Ничего лишнего только необходимое
2 баннер с текстом про библ-ку
3 блок контактов
4 блок соцсетей

как вар- т
блок соцсетей и блок контактов на одном уровне
соцсети слева -контакты справа
()для красоты

@Alexander519151 · 23.07.2015, 18:20

Всем привет.
Gabriel_Castro , Вы молодец! Посмотрел Ваш код, очень хорошо. (и правильно и красиво)
Все рассказали. Получается Вы заново написали весь код для сайта. (пусть это и одна страница, но на ее основе все и делается).
И мне стало интересно, т.к. Gabriel_Castro, не говорит, что нужно искать ответы в интернете, а взял и сделал.
Хочу посмотреть на конечный вариант и, возможно, что-то добавлю.
Vors: Подскажите, пожалуйста, каким редактором Вы пользуетесь?

@Gabriel_Castro · 24.07.2015, 08:31

Сообщение от Vors

про цвета мне и раньше твердили - вероятно
от темного фона придется таки отказываться

Это дело вкуса, кому как нравится. Черный, так черный. Главное как Вам нравится.

Сообщение от Vors

должно было
сверху вниз соот-но одно под другим
1 текст Ничего лишнего только необходимое
2 баннер с текстом про библ-ку
3 блок контактов
4 блок соцсетей
как вар- т
блок соцсетей и блок контактов на одном уровне
соцсети слева -контакты справа

Хорошо, сегодня сделаю. Постараюсь до 13:00 по МСК.

Добавлено через 2 часа 55 минут
Все, готово.
Посмотрите, если что-то изменить скажите.
кнопки соц. сетей картинкой и в рамке. Т.к. картинок у Вас нет, то будет отображаться только рамка.
Когда поставите картинки, уберите рамку в css.

Вот код заменить полностью с тега footer 178 строка и до конца.

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
    <div id="footer">
        <h5>Ничего лишнего – только необходимое</h5>
        <img src=http://www.imageup.ru/img273/2066489/free-banners-and-flyers15.jpg width="444" height="90">
        <div class="block_socials">
            <div class="socials2">
                <a href="http://о-вконтакте.рф/">
                    <img src="/img/f.png" width="40" height="40" alt="f">
                </a>
                <a href="https://ru.wikipedia.org/wiki/Facebook">
                    <img src="/img/f.png" width="40" height="40" alt="f">
                </a>
                <a href="http://landorn.ru/soc-seti/vse-o-tvittere-sozdanie-raskrutka-i-monetizaciya-akkaunta-v-twitter.html">
                    <img src="/img/f.png" width="40" height="40" alt="f">
                </a>
            </div><!--socials2-->
            
            <div class="contacts">
                <h2>
                    КОНТАКТЫ<br>
                    +7 (921) 555 33 22<br>
                    <a href="mailto:mai@htmlacadamy.ru">
                        mail@htmlacademy.ru
                    </a>
                </h2>
            </div><!--contacts-->
        </div><!--block_socials-->
    </div><!--footer-->
</div><!--container-->
</body>
</html>

И код css.
Заметить #footer и до конца, ничего не оставляя.

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
#footer
    {
        position:relative;
        color:white;
        height:300px;
        background-color:#424242;
    }
 
        #footer img
            {
                display:block;
                margin:10px auto;
            }
 
        h2
            {
                text-align:center;
            }
        .block_socials
            {
                position:relative;
                display:block;
                width:650px;
                height:200px;
                margin:0 auto;
            }
            
            .socials2
                {
                    display:block;
                    position:relative;
                    float:left;
                    width:320px;
                    margin:0 auto;
                    padding:0;
                }
                
                    #footer .socials2 img
                        {
                            float:left;
                            margin:30px;
                            border:1px solid #f00;
                        }
            
            .contacts
                {
                    display:block;
                    position:relative;
                    float:left;
                    width:320px;
                    margin:0 auto;
                    padding:o;
                }

Вопросы, исправления - задавайте, говорите - поможем.

@Vors · 24.07.2015, 16:56 **[ТС]**

Сообщение от Alexander519151

Vors: Подскажите, пожалуйста, каким редактором Вы пользуетесь?

notepad++

да за меня тут многие сделали очень ОЧЕНЬ много
такя и не отрицаю
и благодарить вроде не забываб

Добавлено через 1 час 15 минут

Сообщение от Gabriel_Castro

Вопросы, исправления - задавайте, говорите - поможем.

социальные кнопки предполагалось сделать круглыми а не квадратными
+ они были в моем "кривом"
коде покрашены в цвет "#400040"
и никакого фонового img
куда теперь в какое место кода вставить border-radius 50 процентов
к тому же буквы
VK
Fb
Tw

были ровно посередине кругов а не в левом углу
верхнем

Добавлено через 16 минут
Gabriel_Castro,
а вот картинок иконок для контактов вообще нет
хотя вот они в предыдущем моем неправильном коде

HTML5
1
2
3
4
5
6
<img src="http://www.imageup.ru/img272/2184892/ff.jpg">
+7 (921) 555 33 22
</p>
<p>
<img src="http://www.imageup.ru/img272/2184893/i.jpg">
<a href="mailto:mai@htmlacadamy.ru">mail@htmlacademy.ru</a>

Добавлено через 3 минуты

Как отменить "перемешивание" между собой в футере баннера блока контактов и блока соцсетей?

иконки к контактам
круглые соцкнопки
которые надо бы увеличить ну пусть до 65 пикс

Комментарий администратора TaatshiЗагружайте изображения и файлы на форум и прикрепляйте к сообщению.
Обновленная Памятка «Как работать в редакторе сообщений»

@Gabriel_Castro · 25.07.2015, 08:17

Хорошо, понял Вас, сегодня сделаю. До 13:00 по МСК

Добавлено через 2 часа 24 минуты
все готово.

кнопки соц сетей:
- на чистом css,
- круглые,
- при наведении плавное перетекание цвета,
- при нажатии плавное вдавливание.

Предлагаю не использовать картинки для контактов (клавиатура и конверт) - мешают.
Если очень нужно, то:
- либо табличная верстка только для footer'a
- либо большая вложенность div
из-за этого много лишнего кода.

Немного переделал код в footer'e
Убрал лишнее и убрал лишнюю вложенность.

Для кнопок соц. сетей можно сделать тень и при нажатии добиться красивого эффекта нажатия.
Попробуйте сами. Сперва тень только cybpe, при нажатии тень только сверху и плавно.

вот код, полностью меняем footer и до конца (вообще все до конца.)

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
    <div id="footer">
        <h5>Ничего лишнего – только необходимое</h5>
        <img src=http://www.imageup.ru/img273/2066489/free-banners-and-flyers15.jpg width="444" height="90">
        <div class="contacts">
            <h2>КОНТАКТЫ</h2>
            <a href="http://о-вконтакте.рф/">
                <div class="vk">
                    VK
                </div>
            </a>
            <a href="https://ru.wikipedia.org/wiki/Facebook">
                <div class="f">
                    Fb
                </div>
            </a>
            <a href="http://landorn.ru/soc-seti/vse-o-tvittere-sozdanie-raskrutka-i-monetizaciya-akkaunta-v-twitter.html">
                <div class="tw">
                    Tw
                </div>
            </a><br>
                +7 (921) 555 33 22<br><br><br>
            <a href="mailto:mai@htmlacadamy.ru">
                mail@htmlacademy.ru
            </a>
        </div><!--contacts-->
    </div><!--footer-->
</div><!--container-->
</body>
</html>

и css меняем footer и до конца.

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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
#footer
    {
        position:relative;
        color:white;
        height:350px;
        background-color:#424242;
    }
 
        #footer img
            {
                display:block;
                margin:10px auto;
            }
 
        h2
            {
                text-align:center;
            }
        .contacts
            {
                position:relative;
                display:block;
                width:555px;
                height:200px;
                margin:0 auto;
            }
            
                    .contacts .vk
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:10px 0 0 7px;
                            font-size:38px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                        
                            .contacts a:hover .vk
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            .contacts a:active .vk
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }
                            
                    .contacts .f
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:9px 0 0 16px;
                            font-size:40px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                        
                            .contacts a:hover .f
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            
                            .contacts a:active .f
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }
                            
                    .contacts .tw
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:9px 0 0 12px;
                            font-size:40px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                    
                            .contacts a:hover .tw
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            .contacts a:active .tw
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }

Вот, как-то, так.
смотрите, пробуйте.

@Vors · 26.07.2015, 15:56 **[ТС]**

Gabriel_Castro,
соцкнопки получились достаточно крупными и видными
только вот почему номер тел-на (в последствии номер джаббера
или аськи) справа от них притом чуть ли не впритык?
а емейл (впоследствии тоже совершенно понтяно иной)
ПОД НИМИ и опять же вплотную?!

@Vors · 26.07.2015, 15:58 **[ТС]**

тогда как уговорились соцкнопки и контакты под баннером о библ-ке
притом соцкнопки ближе к левом борту футера а конткакты к правому!

@Vors · 26.07.2015, 16:13 **[ТС]**

в вашем коде (влож 1)

нет блоков перехода страниц
блока комментариев
в от отличии от моего тяжелого варианта кода
(вл2)

+
в меню и соот-но субменю нет рамок
субменю слишкм далеко отстает при выпадении от
основного менб

@Vors · 26.07.2015, 16:21 **[ТС]**

Сообщение от Gabriel_Castro

и основной css

Сообщение от Gabriel_Castro

css-reset

не понимаю простите разницы и назначения reset

а также

Сообщение от Gabriel_Castro

не urf-8 разве??

Добавлено через 3 минуты
а вот это
<p>

JavaScript
1
2
3
<a href=# target="_blank">
АЛЕКСАНДР ЛАПЛО-ДАНИЛЕВСКИЙ&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(fb2-PDF)</a>
</p>

и впрямь лучше чем

HTML5
1
2
3
4
МЕТОДОЛОГИЯ:
<li><a class="DRINKC" href=
 target="_blank">АЛЕКСАНДР ЛАПЛО-ДАНИЛЕВСКИЙ&nbsp;&nbsp;«Методология истории»&nbsp;&nbsp;(fb2-PDF)</a></li>
<li><a class="DRINKC" href=

@Gabriel_Castro · 27.07.2015, 08:45

Сообщение от Vors

соцкнопки получились достаточно крупными и видными
только вот почему номер тел-на (в последствии номер джаббера
или аськи) справа от них притом чуть ли не впритык?
а емейл (впоследствии тоже совершенно понтяно иной)
ПОД НИМИ и опять же вплотную?!

У Вас по другому.
Вот мой скрин всей страницы.

тлф и E-mail строго равномерно по верикали от середины кнопок.
Буквы на кнопках ровно по центру. Зависит от размера шрифта, от названия шрифта и потом в ручную подгоняются внутренние отступы.

Сообщение от Vors

в меню и соот-но субменю нет рамок

если нужна рамка, то можно приписать в css с 62 строки. Далее я указал код с комментариями.

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
    .main-menu
        {
            list-style:none;
            margin:25px auto;
            border:1px solid#f00; /*рамка только для всего блока меню*/
        }
 
 
            .main-menu a
                {
                    display:block;
                    color:#fff;
                    padding:8px 14px;
                    text-decoration:none;
                    border:1px solid#0f0; /*рамка для всего меню и для каждого пункта и для под меню*/
                }
            
            .main-menu a:hover
                {
                    background:#004000; 
                }
            
            .main-menu> li
                {
                    position: relative;
                }
            
            .main-menu  .sub-menu
                {
                    list-style:none;
                    display:none;
                    padding:0;
                    margin:0;
                    background:darkblue;
                    position:absolute;
                    top:5px;
                    left:250px; /*отступ слева для под меню*/
                    z-index:11;
                    width:170px;
                    border:1px solid#ff0; /* указывает другую рамку для под меню с пунктами*/
                }
                /*если указать все три рамки, по не красиво. Указываем одну или две, если нужно переназначить для под меню.*/

Сообщение от Vors

субменю слишкм далеко отстает при выпадении от
основного менб

У меня на скрине - сразу после основного меню.
Этот параметр указан в строке 96 в коде без применения варианта из этого ответа.
В любом случае есть комментарий в коде выше в данном ответе.

reset.css нужен для сброса параметров по умолчанию, которые есть в браузере, для очистки или удаления отступов, маркеров рамок и т.д.
У нас в коде используется тег li он, по умолчанию идет с маркерами, в меню и в других местах он нам не нужен. Поэтому на данной странице мы применили reset.css и в т.ч. избавились от этих маркеров.
reset.css каждый составляет сам для каждого сайта.
Некоторые не заморачиваются и применяют полный reset.css повсеместно.
У меня на многих сайтах указано только

CSS
1
2
3
4
5
6
html, body {
    position:relative;
    margin:0;
    padding:0;
    height:100%;
    }

и то только в main.css, в начале, и все

По поводу

HTML5
1
<meta charset="windows-1251">

На этот вопрос Вам никто точно не ответит. (... сейчас гневные высказывания посыпятся)
utf-8 универсальная кодировка, которая и должна использоваться, в соответствии со спецификациями W3C (это организация, которая разрабатывает правила для web). И по ее мнению нельзя использовать НИКАКОЙ другой язык кроме английского (латиница).
Соответственно для сайтов на русском языке (по их мнению) (nuzhno pisat tolko tak) - блин, еле написал.

Что бы на странице отображались не каракули, а русские символы (кириллица) нужно использовать (windows-1251) это кодировка русских символов.
Да, не проходит проверку на W3С, говорит ошибка в кодировке, измените на utf-8
Ну и ладно, я делаю сайты для России, а не для америки. И, соответственно текст должен быть на русском языке!

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

Далее по поводу ссылок, сразу с комментариями.

HTML5
1
2
3
4
<a href=# target="_blank">
 
<a href=# - это пустая ссылка.
target="_blank"> - этот параметр указывает, что данную ссылку нужно открывать в новом окне.

Если нужен весь код, со всеми изменениями, скажите, а то в этом сообщении уже предел.

@Vors · 27.07.2015, 13:44 **[ТС]**

Сообщение от Gabriel_Castro

Если нужен весь код, со всеми изменениями,

да -нужен
а что насчет комментов и переходника страниц?
у меня правильно? (вложение2)

@Gabriel_Castro · 28.07.2015, 11:54

Хорошо, вот код

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
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html>
<head>
<title>страница История как наука</title>
<meta charset="windows-1251">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<!--<div id="str"></div>-->
    <div id="header">
        <img align="right" src=http://www.imageup.ru/img280/2085138/3205841.jpg class="ipgW">
        <h1>
            Sckriptoriumsz.com
        </h1>
        <h2>
            Сайт безумного &laquo;книжного крота&raquo;
        </h2>
    </div>
    <div id="nav">
        <ul class="main-menu">
            <li><a href="#">ГЛАВНАЯ</a></li>
            <li><a href="#">ОТЕЧЕСТВЕННАЯ ИСТОРИЯ</a>
                <ul class="sub-menu">
                    <li><a href="#">Источники</a></li>
                    <li><a href="#">Авторы и работы</a></li>
                </ul>
            </li>
            <li><a href="#">ЗАРУБЕЖНАЯ ИСТОРИЯ</a>
                <ul class="sub-menu">
                    <li><a href="#">Источники</a></li>
                    <li><a href="#">Авторы и работы</a></li>
                </ul>
            </li>
            <li><a href="#">ИСТОРИЯ КАК НАУКА</a>
                <ul class="sub-menu">
                    <li><a href="#">Вспомогательные исторические дисциплины</a></li>
                    <li><a href="#">Теория.методология и философия истории</a></li>
                </ul>
            </li>
            <li><a href="">КОНТАКТЫ</a></li>
        </ul>
    </div>
    <div id="content">
        <h4>Теория. методология и философия исторического знания</h4>
                <h3>МЕТОДОЛОГИЯ:</h3>
                <p>
                    <a href=# target="_blank">
                        АЛЕКСАНДР ЛАПЛО-ДАНИЛЕВСКИЙ&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(fb2-PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        БОРИС МОГЛЬНИЦКИЙ&nbsp;&nbsp;&laquo;Введение в методологию истории&raquo;&nbsp;&nbsp;(DJVU-odt-PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ВАЛЕНТИН КОЛОМИЙЦЕВ&nbsp;&nbsp;&laquo;Методология истории (от источника к исследованию)&raquo;&nbsp;&nbsp;(Firefox Html Document-DJVU)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ВИКТОР ВАЗЮЛИН&nbsp;&nbsp;&laquo;Логика истории. Вопросы теории и методологии&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ВЛАДИМИР СИДОРЦОВ&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(PDF )
                    </a>
                </p>
                <p>
                    <a href=#>
                        ИВАН КОВАЛЬЧЕНКО&nbsp;&nbsp;&laquo;Методы исторического исследования&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ИЗРАИЛЬ БИСК&nbsp;&nbsp;&laquo;Методология истории Курс лекций&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ИОГАНН ГУСТАВ ДРОЙЗЕН&nbsp;&nbsp;&laquo;Историка. Лекции об энциклопедии и методологии истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=target="_blank">
                        ЛЕВ СКВОРЦОВ&nbsp;&nbsp;&laquo;История и антиистория К критике буржуазной философии истории&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ЛЕОНИД ЗАШКИЛЬНЯК&nbsp;&nbsp;&laquo;Методология истории от древности до современности&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ЛОРИНА РЕПИНА&nbsp;&nbsp;&laquo;Историческая наука сегодня. Теории, методы, перспективы&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href=#>
                        МАРИЯ ЛАПТЕВА&nbsp;&nbsp;&laquo;Теория и методология истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href=#>
                        МАРИЯ РУМЯНЦЕВА&nbsp;&nbsp;&laquo;Теория истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        НАДЕЖДА ДОРОШЕНКО&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href=#>
                        НИКОЛАЙ СМОЛЕНСКИЙ&nbsp;&nbsp;&laquo;Теория и методология истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ШАРЛЬ ЛАНГЛУА&nbsp;&nbsp;&laquo;Введение в изучение истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
            <h3>ФИЛОСОФИЯ:</h3>
            <p><a href=https://yadi.sk/d/fZVYjNLdeyAN4
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;История России конец или новое начало&raquo;&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=https://yadi.sk/d/qJHCVe8_eyAw9
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Россия критика исторического опыта&raquo; Том1&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=https://yadi.sk/d/exqOtX-geyC6Q
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Россия критика исторического опыта&laquo; Том2&nbsp;&nbsp;(PDF)</a></p>
            <p><a href=https://yadi.sk/d/38vTOgpOeyC26
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Труды&raquo;&nbsp;&nbsp;(PDF)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ЕРЫГИН&nbsp;&nbsp;&laquo;Восток запад Россия (становление цивилизационного подхода)&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ИРВИН&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(fb2-doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ЛОМОНОСОВ&nbsp;&nbsp;&laquo;Опыт трансцендентальной философии истории&raquo;&raquo;&nbsp;&nbsp;(doc-Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР МАЛИНОВ АЛЕКСАНДР ПРОХОРЕНКО&nbsp;&nbsp;&laquo;Философия истории в России&raquo;&nbsp;&nbsp;(DJVU-PDF)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ПАНАРИН (под ред)&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(fb2-doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСЕЙ ЛОСЕВ&nbsp;&nbsp;&laquo;Античная философия истории&raquo;&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=
            target="_blank">АНАТОЛИЙ АЛФЕРОВ&nbsp;&nbsp;&laquo;Идея общественного прогресса. Содержание и становление&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">АНДРЕЙ РОДИН&nbsp;&nbsp;&laquo;Философия и конец истории&raquo;&nbsp;&nbsp;(doc-Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АРНОЛЬД ТОЙНБИ&nbsp;&nbsp;&laquo;Постижение истории&raquo;&nbsp;&nbsp;(Firefox HTML Document-PDF)</a></p>
            <p><a href=
            target="_blank">АРОН ГУРЕВИЧ&nbsp;&nbsp;&laquo;Философия и история Теория формаций и реальность истории&raquo;&nbsp;&nbsp;(doc- Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АРТУР ДАНТО&nbsp;&nbsp;&laquo;Аналитическая философия истории&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">ВАЛЕНТИН РЮМИН&nbsp;&nbsp;&laquo;Историософия А.Дж. Тойнби&raquo;&nbsp;&nbsp;(doc- Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">ВАЛЬТЕР БЕНЬЯМИН&nbsp;&nbsp;&laquo;О понятии истории&raquo;&nbsp;&nbsp;( Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">ВИКТОР ИЛЬИМ&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(PDF-DJVU)</a></p>
            <p><a href=
            target="_blank">ВИКТОР ФЕЛЛЕР&nbsp;&nbsp;&laquo;Введение в историческую антропологию.&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВИЛЬЯМ ГРИН&nbsp;&nbsp;&laquo;Каркас истории&raquo;&nbsp;&nbsp;(txt- Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВЛАДИМИР ПАНТИН&nbsp;&nbsp;&laquo;Циклы и волны глобальной истории&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВОЙЦЕХ ВЖОЗЕК&nbsp;&nbsp;&laquo;Историография как игра метафор - судьбы новой исторической науки&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ГЕОРГ ВИЛЬГЕЛЬМ ГЕГЕЛЬ&nbsp;&nbsp;&laquo;Философия истории (Слово о сущем)&raquo;&nbsp;&nbsp;(PDF-fb2-DJVU)</a></p>
        </div>
    <div id="clear"></div>
    
    <div id="footer">
        <h5>Ничего лишнего – только необходимое</h5>
        <img src=http://www.imageup.ru/img273/2066489/free-banners-and-flyers15.jpg width="444" height="90">
        <div class="contacts">
            <h2>КОНТАКТЫ</h2>
            <a href="http://о-вконтакте.рф/">
                <div class="vk">
                    VK
                </div>
            </a>
            <a href="https://ru.wikipedia.org/wiki/Facebook">
                <div class="f">
                    Fb
                </div>
            </a>
            <a href="http://landorn.ru/soc-seti/vse-o-tvittere-sozdanie-raskrutka-i-monetizaciya-akkaunta-v-twitter.html">
                <div class="tw">
                    Tw
                </div>
            </a><br>
                +7 (921) 555 33 22<br><br><br>
            <a href="mailto:mai@htmlacadamy.ru">
                mail@htmlacademy.ru
            </a>
        </div><!--contacts-->
    </div><!--footer-->
</div><!--container-->
</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
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
body
    {
        padding:0;
        margin:0;
        background:#222222;
    }
 
h1
    {   
        text-align:left;
        margin:45px 0px 0px 25px;
        font-size:68px;
        color:black;
        text-shadow:1px 1px 2px WHITE,-1px -1px 2px WHITE;
    }
h2
    {
        text-align:left;
        margin:20px 0px 0px 25px;
        font-size:23px;
        color:white;
    }
 
h4
    {
        text-align:center;
        padding:5px 0px 5px 0px;
        background:purple;
        font-size:27px;
        color:white;
    }
 
h5
    {
        text-align:right;
        margin:25px 422px 15px 0px;
        font-size: 25px;
    }
 
#container
    {
        position:relative;
        width: 95%;
        background:#323232;
        margin:100px auto;
    }
 
#header
    {
        height: 250px;
        width:100%;
    }
 
 
#nav
    {
        float: left;
        width: 250px;
    }
 
    
    .main-menu
        {
            list-style:none;
            margin:25px auto;
            border:1px solid#f00; /*рамка только для всего блока меню*/
        }
 
 
            .main-menu a
                {
                    display:block;
                    color:#fff;
                    padding:8px 14px;
                    text-decoration:none;
                    border:1px solid#0f0; /*рамка для всего меню и для каждого пункта и для под меню*/
                }
            
            .main-menu a:hover
                {
                    background:#004000; 
                }
            
            .main-menu> li
                {
                    position: relative;
                }
            
            .main-menu  .sub-menu
                {
                    list-style:none;
                    display:none;
                    padding:0;
                    margin:0;
                    background:darkblue;
                    position:absolute;
                    top:5px;
                    left:250px; /*отступ слева для под меню*/
                    z-index:11;
                    width:170px;
                    border:1px solid#ff0; /* указывает другую рамку для под меню с пунктами*/
                }
                /*если указать все три рамки, по не красиво. Указываем одну или две, если нужно переназначить для под меню.*/
            
            .main-menu>li:hover .sub-menu
                {
                    display:block;
                }
 
#content
    {
        position:relative;
        margin:0 0 0 250px;
        padding:5px;
        color:#fff;;
    }
 
        #content p
            {
                padding:10px;
            }
 
 
#clear
    {
        clear:both;
        padding:0;
        margin:0;
    }
 
#footer
    {
        position:relative;
        color:white;
        height:350px;
        background-color:#424242;
    }
 
        #footer img
            {
                display:block;
                margin:10px auto;
            }
 
        h2
            {
                text-align:center;
            }
        .contacts
            {
                position:relative;
                display:block;
                width:555px;
                height:200px;
                margin:0 auto;
            }
            
                    .contacts .vk
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:10px 0 0 7px;
                            font-size:38px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                        
                            .contacts a:hover .vk
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            .contacts a:active .vk
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }
                            
                    .contacts .f
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:9px 0 0 16px;
                            font-size:40px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                        
                            .contacts a:hover .f
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            
                            .contacts a:active .f
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }
                            
                    .contacts .tw
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:9px 0 0 12px;
                            font-size:40px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                    
                            .contacts a:hover .tw
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            .contacts a:active .tw
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }

по поводу ссылок

HTML5
1
2
3
4
5
6
7
8
<a href="#prev">Назад</a><!--здесь не знаю, может кто подскажет, не сталкивался-->
<a href="#1">1</a><!--здесь правильно, только ссылка пустая. нужно указать на какой файл ссылается
(вместо #1 нужно index.html если файл в этой же папке, если в другой, готорая в этой же, то folder/index.html,
если папка уровнем выше, то переход на каталог выше ../folder/index.html,
можно от корня /index.html, /folder/folder2/index.thml) имя файла привел для примера.-->
<a href="#2">2</a>
<a href="#3">3</a>
<a href="#next" >Вперед</a>

По поводу коментариев, расскажите подробнее. Не понял задачи.

@Gabriel_Castro · 28.07.2015, 11:54

Хорошо, вот код

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
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html>
<head>
<title>страница История как наука</title>
<meta charset="windows-1251">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<!--<div id="str"></div>-->
    <div id="header">
        <img align="right" src=http://www.imageup.ru/img280/2085138/3205841.jpg class="ipgW">
        <h1>
            Sckriptoriumsz.com
        </h1>
        <h2>
            Сайт безумного &laquo;книжного крота&raquo;
        </h2>
    </div>
    <div id="nav">
        <ul class="main-menu">
            <li><a href="#">ГЛАВНАЯ</a></li>
            <li><a href="#">ОТЕЧЕСТВЕННАЯ ИСТОРИЯ</a>
                <ul class="sub-menu">
                    <li><a href="#">Источники</a></li>
                    <li><a href="#">Авторы и работы</a></li>
                </ul>
            </li>
            <li><a href="#">ЗАРУБЕЖНАЯ ИСТОРИЯ</a>
                <ul class="sub-menu">
                    <li><a href="#">Источники</a></li>
                    <li><a href="#">Авторы и работы</a></li>
                </ul>
            </li>
            <li><a href="#">ИСТОРИЯ КАК НАУКА</a>
                <ul class="sub-menu">
                    <li><a href="#">Вспомогательные исторические дисциплины</a></li>
                    <li><a href="#">Теория.методология и философия истории</a></li>
                </ul>
            </li>
            <li><a href="">КОНТАКТЫ</a></li>
        </ul>
    </div>
    <div id="content">
        <h4>Теория. методология и философия исторического знания</h4>
                <h3>МЕТОДОЛОГИЯ:</h3>
                <p>
                    <a href=# target="_blank">
                        АЛЕКСАНДР ЛАПЛО-ДАНИЛЕВСКИЙ&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(fb2-PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        БОРИС МОГЛЬНИЦКИЙ&nbsp;&nbsp;&laquo;Введение в методологию истории&raquo;&nbsp;&nbsp;(DJVU-odt-PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ВАЛЕНТИН КОЛОМИЙЦЕВ&nbsp;&nbsp;&laquo;Методология истории (от источника к исследованию)&raquo;&nbsp;&nbsp;(Firefox Html Document-DJVU)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ВИКТОР ВАЗЮЛИН&nbsp;&nbsp;&laquo;Логика истории. Вопросы теории и методологии&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ВЛАДИМИР СИДОРЦОВ&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(PDF )
                    </a>
                </p>
                <p>
                    <a href=#>
                        ИВАН КОВАЛЬЧЕНКО&nbsp;&nbsp;&laquo;Методы исторического исследования&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ИЗРАИЛЬ БИСК&nbsp;&nbsp;&laquo;Методология истории Курс лекций&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ИОГАНН ГУСТАВ ДРОЙЗЕН&nbsp;&nbsp;&laquo;Историка. Лекции об энциклопедии и методологии истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=target="_blank">
                        ЛЕВ СКВОРЦОВ&nbsp;&nbsp;&laquo;История и антиистория К критике буржуазной философии истории&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href= #>
                        ЛЕОНИД ЗАШКИЛЬНЯК&nbsp;&nbsp;&laquo;Методология истории от древности до современности&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ЛОРИНА РЕПИНА&nbsp;&nbsp;&laquo;Историческая наука сегодня. Теории, методы, перспективы&raquo;&nbsp;&nbsp;(DJVU)
                    </a>
                </p>
                <p>
                    <a href=#>
                        МАРИЯ ЛАПТЕВА&nbsp;&nbsp;&laquo;Теория и методология истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href=#>
                        МАРИЯ РУМЯНЦЕВА&nbsp;&nbsp;&laquo;Теория истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href= #>
                        НАДЕЖДА ДОРОШЕНКО&nbsp;&nbsp;&laquo;Методология истории&raquo;&nbsp;&nbsp;(doc)
                    </a>
                </p>
                <p>
                    <a href=#>
                        НИКОЛАЙ СМОЛЕНСКИЙ&nbsp;&nbsp;&laquo;Теория и методология истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
                <p>
                    <a href=#>
                        ШАРЛЬ ЛАНГЛУА&nbsp;&nbsp;&laquo;Введение в изучение истории&raquo;&nbsp;&nbsp;(PDF)
                    </a>
                </p>
            <h3>ФИЛОСОФИЯ:</h3>
            <p><a href=https://yadi.sk/d/fZVYjNLdeyAN4
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;История России конец или новое начало&raquo;&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=https://yadi.sk/d/qJHCVe8_eyAw9
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Россия критика исторического опыта&raquo; Том1&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=https://yadi.sk/d/exqOtX-geyC6Q
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Россия критика исторического опыта&laquo; Том2&nbsp;&nbsp;(PDF)</a></p>
            <p><a href=https://yadi.sk/d/38vTOgpOeyC26
            target="_blank">АЛЕКСАНДР АХИЕЗЕР&nbsp;&nbsp;&laquo;Труды&raquo;&nbsp;&nbsp;(PDF)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ЕРЫГИН&nbsp;&nbsp;&laquo;Восток запад Россия (становление цивилизационного подхода)&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ИРВИН&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(fb2-doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ЛОМОНОСОВ&nbsp;&nbsp;&laquo;Опыт трансцендентальной философии истории&raquo;&raquo;&nbsp;&nbsp;(doc-Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР МАЛИНОВ АЛЕКСАНДР ПРОХОРЕНКО&nbsp;&nbsp;&laquo;Философия истории в России&raquo;&nbsp;&nbsp;(DJVU-PDF)</a></p>
            <p><a href=
            target="_blank">АЛЕКСАНДР ПАНАРИН (под ред)&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(fb2-doc)</a></p>
            <p><a href=
            target="_blank">АЛЕКСЕЙ ЛОСЕВ&nbsp;&nbsp;&laquo;Античная философия истории&raquo;&nbsp;&nbsp;(fb2)</a></p>
            <p><a href=
            target="_blank">АНАТОЛИЙ АЛФЕРОВ&nbsp;&nbsp;&laquo;Идея общественного прогресса. Содержание и становление&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">АНДРЕЙ РОДИН&nbsp;&nbsp;&laquo;Философия и конец истории&raquo;&nbsp;&nbsp;(doc-Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АРНОЛЬД ТОЙНБИ&nbsp;&nbsp;&laquo;Постижение истории&raquo;&nbsp;&nbsp;(Firefox HTML Document-PDF)</a></p>
            <p><a href=
            target="_blank">АРОН ГУРЕВИЧ&nbsp;&nbsp;&laquo;Философия и история Теория формаций и реальность истории&raquo;&nbsp;&nbsp;(doc- Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">АРТУР ДАНТО&nbsp;&nbsp;&laquo;Аналитическая философия истории&raquo;&nbsp;&nbsp;(doc)</a></p>
            <p><a href=
            target="_blank">ВАЛЕНТИН РЮМИН&nbsp;&nbsp;&laquo;Историософия А.Дж. Тойнби&raquo;&nbsp;&nbsp;(doc- Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">ВАЛЬТЕР БЕНЬЯМИН&nbsp;&nbsp;&laquo;О понятии истории&raquo;&nbsp;&nbsp;( Firefox HTML Document)</a></p>
            <p><a href=
            target="_blank">ВИКТОР ИЛЬИМ&nbsp;&nbsp;&laquo;Философия истории&raquo;&nbsp;&nbsp;(PDF-DJVU)</a></p>
            <p><a href=
            target="_blank">ВИКТОР ФЕЛЛЕР&nbsp;&nbsp;&laquo;Введение в историческую антропологию.&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВИЛЬЯМ ГРИН&nbsp;&nbsp;&laquo;Каркас истории&raquo;&nbsp;&nbsp;(txt- Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВЛАДИМИР ПАНТИН&nbsp;&nbsp;&laquo;Циклы и волны глобальной истории&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ВОЙЦЕХ ВЖОЗЕК&nbsp;&nbsp;&laquo;Историография как игра метафор - судьбы новой исторической науки&raquo;&nbsp;&nbsp;(Firefox HTML Document-doc)</a></p>
            <p><a href=
            target="_blank">ГЕОРГ ВИЛЬГЕЛЬМ ГЕГЕЛЬ&nbsp;&nbsp;&laquo;Философия истории (Слово о сущем)&raquo;&nbsp;&nbsp;(PDF-fb2-DJVU)</a></p>
        </div>
    <div id="clear"></div>
    
    <div id="footer">
        <h5>Ничего лишнего – только необходимое</h5>
        <img src=http://www.imageup.ru/img273/2066489/free-banners-and-flyers15.jpg width="444" height="90">
        <div class="contacts">
            <h2>КОНТАКТЫ</h2>
            <a href="http://о-вконтакте.рф/">
                <div class="vk">
                    VK
                </div>
            </a>
            <a href="https://ru.wikipedia.org/wiki/Facebook">
                <div class="f">
                    Fb
                </div>
            </a>
            <a href="http://landorn.ru/soc-seti/vse-o-tvittere-sozdanie-raskrutka-i-monetizaciya-akkaunta-v-twitter.html">
                <div class="tw">
                    Tw
                </div>
            </a><br>
                +7 (921) 555 33 22<br><br><br>
            <a href="mailto:mai@htmlacadamy.ru">
                mail@htmlacademy.ru
            </a>
        </div><!--contacts-->
    </div><!--footer-->
</div><!--container-->
</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
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
body
    {
        padding:0;
        margin:0;
        background:#222222;
    }
 
h1
    {   
        text-align:left;
        margin:45px 0px 0px 25px;
        font-size:68px;
        color:black;
        text-shadow:1px 1px 2px WHITE,-1px -1px 2px WHITE;
    }
h2
    {
        text-align:left;
        margin:20px 0px 0px 25px;
        font-size:23px;
        color:white;
    }
 
h4
    {
        text-align:center;
        padding:5px 0px 5px 0px;
        background:purple;
        font-size:27px;
        color:white;
    }
 
h5
    {
        text-align:right;
        margin:25px 422px 15px 0px;
        font-size: 25px;
    }
 
#container
    {
        position:relative;
        width: 95%;
        background:#323232;
        margin:100px auto;
    }
 
#header
    {
        height: 250px;
        width:100%;
    }
 
 
#nav
    {
        float: left;
        width: 250px;
    }
 
    
    .main-menu
        {
            list-style:none;
            margin:25px auto;
            border:1px solid#f00; /*рамка только для всего блока меню*/
        }
 
 
            .main-menu a
                {
                    display:block;
                    color:#fff;
                    padding:8px 14px;
                    text-decoration:none;
                    border:1px solid#0f0; /*рамка для всего меню и для каждого пункта и для под меню*/
                }
            
            .main-menu a:hover
                {
                    background:#004000; 
                }
            
            .main-menu> li
                {
                    position: relative;
                }
            
            .main-menu  .sub-menu
                {
                    list-style:none;
                    display:none;
                    padding:0;
                    margin:0;
                    background:darkblue;
                    position:absolute;
                    top:5px;
                    left:250px; /*отступ слева для под меню*/
                    z-index:11;
                    width:170px;
                    border:1px solid#ff0; /* указывает другую рамку для под меню с пунктами*/
                }
                /*если указать все три рамки, по не красиво. Указываем одну или две, если нужно переназначить для под меню.*/
            
            .main-menu>li:hover .sub-menu
                {
                    display:block;
                }
 
#content
    {
        position:relative;
        margin:0 0 0 250px;
        padding:5px;
        color:#fff;;
    }
 
        #content p
            {
                padding:10px;
            }
 
 
#clear
    {
        clear:both;
        padding:0;
        margin:0;
    }
 
#footer
    {
        position:relative;
        color:white;
        height:350px;
        background-color:#424242;
    }
 
        #footer img
            {
                display:block;
                margin:10px auto;
            }
 
        h2
            {
                text-align:center;
            }
        .contacts
            {
                position:relative;
                display:block;
                width:555px;
                height:200px;
                margin:0 auto;
            }
            
                    .contacts .vk
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:10px 0 0 7px;
                            font-size:38px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                        
                            .contacts a:hover .vk
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            .contacts a:active .vk
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }
                            
                    .contacts .f
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:9px 0 0 16px;
                            font-size:40px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                        
                            .contacts a:hover .f
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            
                            .contacts a:active .f
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }
                            
                    .contacts .tw
                        {
                            width:70px;
                            height:70px;
                            float:left;
                            margin:30px;
                            padding:9px 0 0 12px;
                            font-size:40px;
                            background-color:#400040;
                            border:2px solid #0f0;
                            border-radius:50%;
                        }
                    
                            .contacts a:hover .tw
                                {
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                    background-color:#0f0;
                                }
                            .contacts a:active .tw
                                {
                                    position:relative;
                                    top:2px;
                                    -moz-transition:0.5s;
                                    -o-transition:0.5s;
                                    -webkit-transition:0.5s;
                                }

по поводу ссылок

HTML5
1
2
3
4
5
6
7
8
<a href="#prev">Назад</a><!--здесь не знаю, может кто подскажет, не сталкивался-->
<a href="#1">1</a><!--здесь правильно, только ссылка пустая. нужно указать на какой файл ссылается
(вместо #1 нужно index.html если файл в этой же папке, если в другой, готорая в этой же, то folder/index.html,
если папка уровнем выше, то переход на каталог выше ../folder/index.html,
можно от корня /index.html, /folder/folder2/index.thml) имя файла привел для примера.-->
<a href="#2">2</a>
<a href="#3">3</a>
<a href="#next" >Вперед</a>

По поводу коментариев, расскажите подробнее. Не понял задачи.

@Alexander519151 · 28.07.2015, 20:51

Сообщение от Alexander519151

Vors: Подскажите, пожалуйста, каким редактором Вы пользуетесь?

Сообщение от Vors

notepad++

Хотел бы посоветовать Adobe Dreamveawer. Вот здесь есть хорошее описание.
Через что вы редактируете код?

@Vors · 30.07.2015, 16:23 **[ТС]**

Сообщение от Alexander519151

Хотел бы посоветовать Adobe Dreamveawer. Вот здесь есть хорошее описание.
Через что вы редактируете код?

угу гляну

а интерфейс у него можно черно-белым сделать?

Добавлено через 2 минуты

Сообщение от Gabriel_Castro

По поводу коментариев, расскажите подробнее. Не понял задачи.

сам код блока комментов более менее?

Добавлено через 11 минут

HTML5
1
2
3
4
5
6
7
<div class=" comment-author">Игорь Савицкий</div>
 <span class="comment-email"><a href=" ">mail@.ru</a></span>
  <div class=" comment-text">
Неплохая в принципе по данной тематике  подборочка литературы. Только вот не лучше ли было выбрать другой способ представления? Скажем сначала только иностранных авторов а потом уж отечественных. А то у вас все впережку как-то. Опять же работы написаны в разное время….
     <br>
  <div class=" comment-data">1 апреля</div>
    </div>

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
comment{
background:black;
max-width: 500px;
margin:55px 0px 55px 35px;
border:1px solid white;
padding: 20px;
}
 
.comment-avatar{
float: left;
margin-right: 15px;
border:1px solid white;
width:70px;
height:70px;
background:url("https://htmlacademy.ru/assets/course14/avatar.png") no-repeat 50% 50% #7f8c8c;
}
 
.comment-author{
font-size:16px;
font-weight:bold;
margin-bottom: 35px
color:#fff;
}
 
.comment-text{
max-width: 450px;
min-height: 120px;
margin-left: 90px;
margin-right: 5px;
margin-top: 45px
padding: 15px;
padding-left: 15px;
padding-right: 15px;
padding-top: 25px;
text-align:justify;
color:white;
}
 
.comment-data{
margin-bottom: 25px
font-size:12px;
font-style: italic;
text-decoration:overline;
color:#bdc3c7;
}
 
.comment-reply{
float: right;
width:15px;
height:15px;
border:2px solid white;
background:darkorange;
}

@Gabriel_Castro · 01.08.2015, 09:16

Был занят.

Сообщение от Vors

сам код блока комментов...

Да, все правильно.
Только я бы хотел уточнить, эти комментарии Вы будете оформлять, или Вы бы хотели систему комментариев установить на сайте?

Сообщение от Vors

а интерфейс у него можно черно-белым сделать?

Да, можно. Сам работаю в Dreamweaver. Цветовую схему можно изменить как угодно.

@Vors · 01.08.2015, 16:51 **[ТС]**

Сообщение от Gabriel_Castro

или Вы бы хотели систему комментариев установить на сайте?

именно
а вот тут
https://htmlacademy.ru/courses/55/run/13
где я шабллон брал
данный момент не шибко уточняектся

Добавлено через 1 минуту

Сообщение от Gabriel_Castro

Да, можно. Сам работаю в Dreamweaver. Цветовую схему можно изменить как угодно.

ясно

Новые блоги и статьи Все статьи Все блоги /
Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит токи на L и напряжения на C в установ. режимах до и. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .

Как отменить "перемешивание" между собой в футере баннера блока контактов и блока соцсетей?

Решение

Решение

Решение

Решение

@Alexander519151 461 / 461 / 6 Регистрация: 08.05.2013 Сообщений: 242
	23.07.2015, 18:20
	Всем привет. Gabriel_Castro , Вы молодец! Посмотрел Ваш код, очень хорошо. (и правильно и красиво) Все рассказали. Получается Вы заново написали весь код для сайта. (пусть это и одна страница, но на ее основе все и делается). И мне стало интересно, т.к. Gabriel_Castro, не говорит, что нужно искать ответы в интернете, а взял и сделал. Хочу посмотреть на конечный вариант и, возможно, что-то добавлю. Vors: Подскажите, пожалуйста, каким редактором Вы пользуетесь? 1

@Vors 11 / 11 / 2 Регистрация: 03.06.2014 Сообщений: 375
	26.07.2015, 15:56 [ТС]
	Gabriel_Castro, соцкнопки получились достаточно крупными и видными только вот почему номер тел-на (в последствии номер джаббера или аськи) справа от них притом чуть ли не впритык? а емейл (впоследствии тоже совершенно понтяно иной) ПОД НИМИ и опять же вплотную?! Миниатюры 0

@Vors 11 / 11 / 2 Регистрация: 03.06.2014 Сообщений: 375
	26.07.2015, 15:58 [ТС]
	тогда как уговорились соцкнопки и контакты под баннером о библ-ке притом соцкнопки ближе к левом борту футера а конткакты к правому! 0