1
У меня есть панель навигации в верхней части моей страницы с фиксированным положением, но содержимое, которое я хочу иметь ниже, заканчивается частично закрытым панелью навигации.Содержание страницы покрыто навигационной панелью
Вот HTML:
<html>
<head>
<title>A Plus Graphing</title>
<link rel="stylesheet"
type="text/css"
href="index.css"/>
</head>
<body>
<div id="all">
<div id="header">
<div class="header_container">
<h1 class="heading"><b class="a_main">A+</b> Graphing</h1>
<ul id="top_nav">
<li class="nav_item"><a href="ourmission.html">Our Mission</a></li>
<li class="nav_item"><a href="about.html">About</a></li>
<li class="nav_item"><a href="contact.html">Contact</a></li>
<li class="rfloat"><a href="register_main.html">Sign Up</a></li>
</ul>
</div>
</div>
<div id="content">
<div class="global_container">
<b class="welcome">Welcome to <b class="a">A+</b> Graphing!</b>
<div class="login_links">
<a class="login_button" href="teacher_login.html">Teacher Login</a> <a class="login_button" href="student_login.html">Student Login</a>
</div>
<p class="intro_p">A+ Graphing is designed to introduce technology in the classroom and cut down teacher grading time.<br/>
<a href="about.html">Learn More</a></p>
</div>
</div>
<div class="footer_container">
A Harsh Mehta and Kevin Turner Production
<div id="donate_main">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</div>
</div>
</body>
</html>
и CSS: `
#header {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
display: block;
background-color: #F2EEEE;
height: 51px;
width: 100%;
}
body {
font-family: arial, sans-serif;
height: 100%;
}
#all {
height: 100%;
}
body a {
color: red;
}
html {
height: 100%;
}
.a_main {
color: red;
}
.heading {
font-size: 20px;
float: left;
}
.header_container {
margin-left: auto;
margin-right: auto;
width: 700px;
height: 51px;
}
.header_teacher {
margin-left: auto;
margin-right: auto;
width: 1200px;
height: 51px;
}
body ul {
list-style-type: none;
float: left;
}
#top_nav a {
text-decoration: none;
color: black;
}
#top_nav a:hover {
text-decoration: none;
border-bottom: 5px solid red;
}
#top_nav li {
display: block;
float: left;
margin-left: 50px;
}
#content {
margin-top: 100px;
}
#content {
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
margin-top: 0;
width: 400px;
min-height: 100px;
}
.global_container {
position: absolute;
}
.welcome {
font-size: 30px;
}
.a {
color: red;
}
.login_button {
background-color: red;
color: white;
border-radius: 15px;
text-decoration: none;
padding: 5px 10px 5px 10px;
}
.intro_p {
margin-top: 60px;
margin-bottom: 300px;
}
#donate_main {
float: right;
}
.login {
}
#info_container {
margin-bottom: 350px;
}
.login_links {
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
margin-top: 20px;
width: 300px;
}
.footer_container {
margin-left: auto;
color: grey;
border-top: 1px solid grey;
padding-top: 10px;
font-size: 15px;
margin-right: auto;
margin-bottom: 0;
margin-top: 20px;
width: 700px;
}
.login_container {
margin-top: 50px;
border: 1px solid grey;
border-radius: 15px;
box-shadow: 5px 5px 5px 5px #888;
width: 450px;
margin-left: -5em;
margin-bottom: 350px;
padding: 20px 50px 50px 30px;
}
.login_class {
border-bottom: 1px solid grey;
}
.username {
width: 300px;
height: 20px;
}
.password {
width: 300px;
height: 20px;
}
.username2 {
width: 300px;
height: 30px;
}
.password2 {
width: 300px;
height: 30px;
}
.inline_info1 {
float: left;
width: 200px;
}
inline_info {
float: left;
}
.apple{
margin-top: 20px;
}
.student {
margin-top: 30px;
}
#register_content {
margin-bottom: 200px;
}
.main_inner {
margin-bottom: 300px;
}
.test_make {
margin-top: 100px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
width: 400px;
}
.list_item {
display: inline-block;
margin-right: 250px;
width: 150px;
}
#quizes_main_list {
width: 90%;
}
.inner_list{
width: 100%;
}
.greeting_head {
width: 100%;
text-align: center;
}
.view_quiz {
color: white;
background-color: red;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
border-radius: 15px;
}
#quizes_main_list a {
text-decoration: none;
}
.quiz_item {
margin-bottom: 50px;
}
.tests {
margin-top: 100px;
}
.tests a{
text-decoration: none;
}
.quiz_main {
margin-top: 200px;
}
#main {
border: 1px solid grey;
padding-bottom: 25px;
padding-top: 25px;
padding-left: 100px;
padding-right: 100px;
border-radius: 15px;
box-shadow: 5px 5px 5px 5px #888;
}
.results_main {
margin-top: 100px;
}
.score {
font-size: 50px;
}
.results_green {
color: green;
font-size: 60px;
}
#question_stat {
float: left;
}
#grades_main_list {
margin-top: 50px;
width: 90%;
}
.link_nav {
margin-top: 100px;
}
.link_inner {
color: white;
background-color: red;
border-radius: 15px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}
.global_content a{
text-decoration: none;
}
.inner_list {
margin-bottom: 30px;
border-bottom: 1px solid grey;
padding-bottom: 20px;
}
.quiz_item {
width: 100%;
}
.inline_info a{
color: white;
}
.inline_info1 a{
color: white;
}`
Заранее спасибо за любую помощь.
спасибо, что работает. Но есть ли способ сделать это, не указав верхний предел для контента? Другие сайты, которые я вижу в навигационных барах, не делают. – user2489946