Подвал сайта съехал наверх

@Арти7030 · Регистрация: 27.12.2012

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

После написания в #content position: absolute, подвал съехал наверх. В чем может быть проблема?

CSS

body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}
#container {
width: 100%;
}
#header {
  background: #000000;
  height: 112px;
  width: auto;
  margin-top: -8px;
  margin-left: -8px;
  margin-right: -8px;
}
#logo {
background: #000000;
height: 110px;
width: 475px;
float: left; 
}
#registry {
background: #000000;
height: 110px;
width: 227px;
float: right;
color: #ffffff;
}
#navigation {
  background: #000000;
  height: 80px;
  width: 1300px;
  margin: auto;
  border: 5px double #6080ff;
}
#menu {
  float: left;
  background: #000000;
  margin-right: 30px;
  height: 680px;
  width: 300px;
  position: absolute;
  left: 305px;
}
#content {
  background: #d2d0d2;
  height: 680px;
  width: 1010px;
  position: absolute;
  left: 605px;
}
#clear {
clear: both;
}
#footer {
  background: #838283;
  height: 80px;
  width: auto;
}

@killlfun · 02.07.2014, 21:49

Арти7030, может html еще скинешь?

@Арти7030 · 02.07.2014, 21:52 **[ТС]**

killlfun,

HTML5

<!DOCTYPE html>
<html>
<head>
<title>1</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<div id="logo">
<img src="лого1.jpg" alt="Логотип" oncontextmenu="return false;">
</div>
<div id="registry">
<form name="formreg" action=" " method="post">
<table height="110px" width="227px">
<tr>
<td>Логин</td>
<td><input type="text" name="login"></td>
</tr>
<tr>
<td>Пароль</td>
<td><input type="password" name="pass"></td>
</tr>
<tr>
<td><input type="button" name="enter" value="Вход"></td>
<td><input type="button" name="reg" value="Регистрация"></td></tr>
</table>
</form>
</div>
</div>
<div id="container">
<div id="navigation">
<img src="м1.jpg" alt="m1" style="position:relative; top:-1px; left:-47px;" oncontextmenu="return false;">
<img src="м2.jpg" alt="м2" style="position:relative; top:-6px; left: -30px;">
<img src="м3.jpg" alt="м3" style="position: relative; top: 7px; left: -5px">
<img src="м4.jpg" alt="м4" style="position: relative; top: 1px; left: 15px">
<img src="м5.jpg" alt="м5" style="position: relative; top: -1px; left: 35px">
</div>
<div id="menu"></div>
<div id="content"></div>
<div id="clear"></div>
<div id="footer"></div>
</div>
</body>
</html>

@SF · 02.07.2014, 22:10

Арти7030, зачем вам position: absolute;? уберите position: absolute; и будет все нормально

Блоки накладываются друг на друга

@Арти7030 · 02.07.2014, 22:20 **[ТС]**

SF, нужно. Если убрать absolute то отображается не так как задумано. Поэтому ещё варианты почему подвал съехал наверх.

@SF · 02.07.2014, 22:36

Арти7030, ну не знаю, что вы там задумали попробуйте так

CSS

#footer {
    position: relative;
    top: 680px;
}

Возможно в будущем конфликт будет с этими position.

@Арти7030 · 02.07.2014, 23:23 **[ТС]**

SF, психанул, засунул menu в content и получил то что хотел.

@killlfun 102 / 102 / 39 Регистрация: 25.02.2014 Сообщений: 321
	02.07.2014, 21:49	2
	Арти7030, может html еще скинешь? 0

@SF Boo 142 / 117 / 55 Регистрация: 02.12.2013 Сообщений: 396
	02.07.2014, 22:10	4
	Арти7030, зачем вам position: absolute;? уберите position: absolute; и будет все нормально Блоки накладываются друг на друга 0

@Арти7030 1 / 1 / 3 Регистрация: 27.12.2012 Сообщений: 192
	02.07.2014, 22:20 [ТС]	5
	SF, нужно. Если убрать absolute то отображается не так как задумано. Поэтому ещё варианты почему подвал съехал наверх. 0

@Арти7030 1 / 1 / 3 Регистрация: 27.12.2012 Сообщений: 192
	02.07.2014, 23:23 [ТС]	7
	SF, психанул, засунул menu в content и получил то что хотел. 0