Здравствуйте, я сделал верстку для одностраничного сайта, и зафиксировал меню в верху, но при переходе по ссылкам данный блок наезжает на другие, вопрос в том как сделать так чтобы он не наезжал, а край к краю становился с другими блоками, похоже это довольно таки не простая задачка.
http://jsfiddle.net/pdYYL/, посмотрите что неправильно.
Или код:
| Код |
html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type='text/css'>
body {
margin: 0;
}
header {
background-color: #FFA1A1;
height: 80px;
position: fixed;
width: 100%;
top: 5px;
}
#content1 {
background-color: #79a86f;
height: 400px;
}
#content2 {
background-color: #8c73ba;
height: 400px;
}
#content3 {
background-color: #2bc4bf;
height: 400px;
}
footer {
background-color: #eded9c;
height: 100px;
}
li {
display: inline;
}
</style>
</head>
<body>
<header>
Header
<ul>
<li><a href="#content1">Content one</a></li>
<li><a href="#content2">Content two</a></li>
<li><a href="#content3">Content three</a></li>
</ul>
</header>
<div id="content1">
Content one
</div>
<div id="content2">
Content two
</div>
<div id="content3">
Content three
</div>
<footer>
Footer
</footer>
</body>
</html>
|
|
)