Расположил меню - все блоки сдвинулись

@Divil · Регистрация: 11.04.2012

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

Здравствуйте!
Написал страницу сайта по блокам( сверху, снизу, слева и справа блоки, и средний блок(контент) с помощью div. В css файле все написал как надо.
Проблема в том, что в левом блоке, я расположил меню...и все блоки сдвинулись. Причем я проверял, это происходит из-за самого меню!
в чем может быть проблема?
вот коды:

Кликните здесь для просмотра всего текста

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Главная страница</title>
<meta http-equiv="Content-Type" content="text/html charset=utf-8, windows-1251">
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="nav.css" type="text/css">
</head>
<body>
<div id="header">
<div id="headertext">Добро пожаловать!!!</div>
</div>
 
<div id="menu">
<div id="menutext">
 <ul id="nav">
  <li><a href="index.html">Главная</a></li>
  <li><a href="#">Новости</a></li>
  <li><a href="#" class="sub" tabindex="1">Статьи</a>
   <ul>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
   </ul>
  </li>
  <li><a href="#" class="sub" tabindex="1">Файлы</a>
   <ul>
    <li><a href="#">Программы</a></li>
    <li><a href="#">Исходники</a></li>
   </ul>
  </li>
  <li><a href="#">Обратная связь</a></li>
  <li><a href="#">Гостевая книга</a></li>
  <li><a href="#">FAQ</a></li>  
 </ul>
</div>
</div>
 
<div id="content">
<div id="contenttext">
<a href="index.html">Главная</a> &gt
</div>
</div>
 
<div id="news">
<div id="vhod">
Вход
</div>
<div id="reg"><a href="reg.html">Регистрация</a></div><br/>
<div id="newstext">
Новости дня:
</div>
</div>
 
<div id="footer">
<div id="footertext">
<div id="footer1">Copyright, 2012 &copy <a href="index.html">http://www.mysite.com/</a> All rights reserved!</div>
<div id="footer2">При копировании материала с нашего сайта, ссылка на наш сайт обязательна!</div>
</div>
</div>
 
</body>
</html>

style.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
#header{
background: #c0c0c0;
color: #000000;
height: 150px;
width: 100%;
text-align: left;
font-size: 16pt;
font-weight: 700;
font-style: italic;
}
 
#menu{
background: #d0d0d0;
color: #000000;
width: 18%;
height: 1200px;
}
 
#menutext{
position: relative;
left: 5px;
font-weight: 600;
}
 
#content{
position: absolute;
left: 18%;
top: 150px;
background: #d0d0d0;
color: #000000;
width: 70%;
height: 1200px;
font-size: 10pt;
font-weight: 500;
padding: 10px;
}
 
#news{
position: absolute;
left: 88%;
top: 150px;
background: #d0d0d0;
color: #000000;
width: 12%;
height: 1200px;
font-size: 10pt;
font-weight: 600;
padding: 5px;
}
 
#newstext{
text-align: left;
border-width: 4px solid #a7b3c7;
}
 
#vhod{
text-align: center;
}
 
#reg{
text-align: center;
}
 
#footer{
height: 30px;
background: #c0c0c0;
color: #000000;
width: 100%;
font-style: italic;
text-align: center;
}
 
#footer1{
font-size: 7pt;
font-style: normal;
}
 
#footer2{
font-size: 8pt;
font-style: italic;
color: #093969;
}
 
body{
padding: 0;
margin: 0;
font-family: Tahoma, 'Times New Roman', Times, serif;
font-size: 11pt;
}

nav.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
#nav, #nav ul {
list-style: none;/* Одновременно можно задать стиль маркера, его положение, изображение, которое будет использоваться в качестве маркера */
padding: 0;/* Устанавливает значение полей вокруг содержимого элемента */
width: 130px;/* Ширина элемента */
}
 
#nav ul {
position: relative;/* Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице */
z-index: -1;/* Третье измерение, объект накладывается друг на друга */
}
 
#nav li {
position: relative;/* Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице */
z-index: 100;/* Третье измерение, объект накладывается друг на друг */
}
 
#nav ul li {
margin-top: -23px;/* Устанавливает величину отступа от верхнего края элемента */
-moz-transition: 0.4s linear 0.4s;/* Эти строки отвечают за плавное выдвижение меню */
-ms-transition: 0.4s linear 0.4s;/*  */
-o-transition: 0.4s linear 0.4s;/*  */
-webkit-transition: 0.4s linear 0.4s;/*  */
transition: 0.4s linear 0.4s;/*  */
}
 
#nav li a {
background-color: #d0d0d0;/* Цвет фона элемента */
color: #000000;/* Цвет текста элемента */
display: block;/* Определяет, как элемент должен быть показан в документе */
font-size: 12px;/* Размер шрифта */
font-weight: bold;/* Полужирное начертание шрифта */
line-height: 25px;/* Межстрочный интервал */
outline: 0;/* Одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента */
padding-left: 15px;/* Устанавливает значение поля от левого края содержимого элемента */
text-decoration: none;/* Убирает оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания */
}
 
#nav li a.sub {
background: #d0d0d0;/* Позволяет установить одновременно до пяти характеристик фона */
}
 
#nav li a:hover {
background-color: #909090;/* Цвет фона элемента */
}
 
#nav ul li a {
background-color: #e0e0e0;/* Цвет фона элемента */
border-bottom: 1px solid #707070;/* Позволяет одновременно установить толщину, стиль и цвет границы внизу элемента */
color: #000000;/* Цвет текста элемента */
font-size: 11px;/* Размер шрифта элемента */
line-height: 22px;/* Межстрочный интервал */
}
 
#nav ul li a:hover {
background-color: #808080;/* Цвет фона элемента */
color: #000000;/* Цвет текста элемента */
}
 
#nav a.sub:focus {
background: #bcbdc1;/* Позволяет установить одновременно до пяти характеристик фона */
outline: 0;/* Одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента */
}
 
#nav a:focus ~ ul li {
margin-top: 0;/* Устанавливает величину отступа от верхнего края элемента */
-moz-transition: 0.4s linear;/*  */
-ms-transition: 0.4s linear;/*  */
-o-transition: 0.4s linears;/*  */
-webkit-transition: 0.4s linears;/*  */
transition: 0.4s linear;/*  */
}
 
#nav a.sub:active {
background: #bcbdc1;/* Позволяет установить одновременно до пяти характеристик фона */
outline: 0;/* Одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента */
}
 
#nav a:active ~ ul li {
margin-top: 0;/* Устанавливает величину отступа от верхнего края элемента */
}
 
#nav ul:hover {
display: block;/* Определяет, как элемент должен быть показан в документе */
}

Добавлено через 10 часов 17 минут
люди помогите пожалуста!!!! срочно надо!!!!

@EPMAK · 02.09.2012, 02:12

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

Здравствуйте!

флоат модель:
изменения найдете в этом 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
#header{
background: #c0c0c0;
color: #000000;
height: 150px;
width: 100%;
text-align: left;
font-size: 16pt;
font-weight: 700;
font-style: italic;
 
}
 
#menu{
background: #d0d0d0;
color: #000000;
width: 18%;
height: 1200px;
}
 
#menutext{
position: relative;
left: 5px;
font-weight: 600;
}
 
#content{
/*position: absolute;
left: 18%;
top: 153px;*/
background: #d0d0d0;
color: #000000;
width: 70%;
height: 1200px;
font-size: 10pt;
font-weight: 500;
/*padding: 10px;*/
}
 
#news{
/*position: absolute;
left: 88%;
top: 153px;*/
background: #d0d0d0;
color: #000000;
width: 10%;
height: 1200px;
font-size: 10pt;
font-weight: 600;
padding: 0px 25px 0px 0px;/*25 px - регулятор правого отступа к правому краю, блока news. Регулируем сами - ручками(если понадобится).*/
}
 
 #menu,#content,#news{position:relative;float:left;}
#newstext{
text-align: left;
/*border-width: 4px solid #a7b3c7;*//*правильно будет без width*/
}
 
#vhod{
text-align: center;
}
 
#reg{
text-align: center;
}
 
#footer{
height: 30px;
background: #c0c0c0;
color: #000000;
width: 100%;
font-style: italic;
text-align: center;
clear:left;
}
 
#footer1{
font-size: 7pt;
font-style: normal;
}
 
#footer2{
font-size: 8pt;
font-style: italic;
color: #093969;
}
 
body{
padding: 0;
margin: 0;
font-family: Tahoma, 'Times New Roman', Times, serif;
font-size: 11pt;
}

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	Установка Emscripten SDK (emsdk) и CMake на Windows для сборки C и C++ приложений в WebAssembly (Wasm) 8Observer8 30.01.2026 Чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. Система контроля версиями Git. . .	Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .