Вроде ничего сложного не делаю, но выходит все неправильно... Подскажите в чем ошибка? Почему появился отступ между header'ом и body? Центральный div съехал куда-то вниз, правый непонятно как расположен?
Вот код страницы и стиля:
| Код |
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Название</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
</head>
<body>
<!-- start page -->
<div id="page">
<!-- start header -->
<div id="header">
<h1><center>Шапка сайта</center></h1>
</div>
<!-- end header -->
<div id="pg_left">
<div id="left_menu">
<div id="menu_l">
<h2>Меню</h2>
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="right_menu" class="pg_menu">
<h3>bllll</h3>
<div type="calendar" id="datepicker">
</div>
</div>
<!-- start content -->
<div id="content">
<h3>div content</h3>
sfd
</div>
<!-- end content -->
</div>
</div>
<!-- end page -->
<div id="footer">
</div>
</body>
</html>
|
| Код |
body {
margin-top: 10px;
padding: 0;
background: #787878;
text-align: justify;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #616161;
}
#header {
width: 100%;
height: 40px;
background-color: #ccbbaa;
border: 2px;
border-radius: 10px;
}
#page {
width: 1000px;
margin: 0px auto;
}
#pg_left{
width: 800px;
background-color: #cc3315;
}
#left_menu{
margin: 0px 0px 0px 0px;
width: 200px;
background-color: #444444;
}
#menu_l{
border: 2px;
border-radius: 10px;
background-color: #112233;
text-align: center;
margin-top: 0px;
height: 30px;
}
#right_menu{
margin: 0px 0px 0px 800px;
width: 20%;
background-color: #431265;
}
#content{
width: 600px;
margin: 0px 200px 0px 200px;
background-color: #555555;
}
.pg_menu {
font-size: 12px;
}
|
|