Попытался сделать в точности по образцу взятом здесь http://www.linedmk.com/page32.html.
Не получается прописать, страшно сказать, второй див на странице, который будет ровно под хэдером и не наползать на него. У меня стабильно генерится в верхнем левом углу окна браузера.
Класс хэдера - .container, id интересующего дива под хэдером - #maindiv.
Простите за такие элементарные вопросы, но я правде не понимаю что делаю неверно.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Font Found | Типографика и каллиграфия</title>
<meta name="keywords" content="шрифты, каллиграфия, буквы, история шрифтов, письменность">
<meta name="description" content="История развития письменности, шрифтов и типографики">
<link rel="stylesheet" href="style_main1.css" type="text/css">
<link rel="shortcut icon" href="fav.ico" type="image/x-icon">
</head>
<body bgcolor="f4d7d7">
<div class="container">
<ul class="dropdown" id="firstul">
<li class="dropdown-top">
<a class="dropdown-top" href="/">Протописьменность</a>
<ul class="dropdown-inside">
<li><a href="/">Неолит</a></li>
<li><a href="/">Энеолит</a></li>
<li><a href="/">Бронзовый век</a></li>
<li><a href="/">Железный век</a></li>
</ul>
</li>
<ul class="dropdown">
<li class="dropdown-top">
<a class="dropdown-top" href="/">Шрифт</a>
<ul class="dropdown-inside">
<li><a href="/">Типографика</a></li>
<li><a href="/">Основные понятия</a></li>
<li><a href="/">Веб-дизайн</a></li>
</ul>
</li>
<ul class="dropdown">
<li class="dropdown-top">
<a class="dropdown-top" href="/">Каллиграфия</a>
<ul class="dropdown-inside">
<li><a href="/">Иероглифическая</a></li>
<li><a href="/">Арабская каллиграфия</a></li>
<li><a href="/">Кириллица</a></li>
<li><a href="/">Латиница</a></li>
</ul>
</li>
<table>
<tr>
<td></td>
<td><a href="index_try2.html">
<img src="logo_ffh66.png" class="logo" width="120px" height="auto">
</a></td>
<td></td>
</tr>
</table>
<!--<embed src="gothic.mp3" autostart="true" hidden="false" loop="false" width="1" height="1" align="bottom"></embed>-->
</ul>
</ul>
</div>
<!--<div id="sideleft">
1
</div>-->
<div id="maindiv">
some text
</div>
</body>
</html>
------
h1 {
font-family: DejaVu Sans Mono;
}
body {
margin:0px;
padding:0px;
font-family:DejaVu Sans Mono;
}
.container {
background-color: #232323;
width: 100%;
height: 66px;
color:antiquewhite;
padding-top: 10px;
letter-spacing: 1px;
padding:0px;
padding-left: 0px;
padding-top: 7px;z
z-index: 1;
position: fixed;
opacity: 0.51;
}
.dropdown-top {
color: antiquewhite;
text-decoration: none;
}
.bc {
width: 100%;
float:left;
}
.margright {
padding-right:25px;
}
a.margright {
color:antiquewhite;
text-decoration: none;
padding-top: 10px;
}
droplink:hover {
color:ff5656;
}
.logo {
opacity: 0.2;
margin-top: -5px;
margin-left: 16px;
}
.logo:hover {
opacity: 1;
margin-top: -7px;
}
ul.dropdown li { position: relative; }
ul.dropdown,
ul.dropdown-inside {
list-style-type: none;
padding: 0;
text-decoration: none;
color: antiquewhite;
padding-right: 20px;
}
ul.dropdown-inside {
position: absolute;
left: -9999px;
text-decoration: none;
color: antiquewhite;
}
ul.dropdown li.dropdown-top {
letter-spacing: 1px;
display: inline;
float: left;
margin: 0 1px 0 0;
text-decoration: none;
color: antiquewhite;
}
ul.dropdown li.dropdown-top a {
padding: 3px 10px 4px;
padding-top: 5px;
display: block;
text-decoration: none;
color: antiquewhite;
}
ul.dropdown a.dropdown-top { }
ul.dropdown a.dropdown-top:hover { padding: 2px 10px 5px;
text-decoration: none;
color: #ff5656;
background-color: #222222;
padding-top: -15px;
}
ul.dropdown li.dropdown-top:hover .dropdown-inside {
display: block;
left: 0;
color: #ff5656;
background-color: #222222;
padding-top: -15px;
}
#firstul {
margin-left: 16px;
}
sideleft {
z-index: 0;
width: 250px;
height: 100%;
background-color: firebrick;s
}
#maindiv {
clear: left;
min-width: 100%;
min-height: 100%;
background: url("bg_1.jpg") no-repeat;
}