我知道这应该是一个简单的修复，但我似乎无法弄清楚如何将我的导航直接放置在位于页面底部的 h4 的顶部。我想让这个功能在我的网站上继续存在，并且在我解决这个问题之前不想继续。很感谢任何形式的帮助。
HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Nathan Langer</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Dr+Sugiyama' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="wrapper=">
<div id="name">
<h1>Nathan Langer</h1>
</div>
<div id="content"></div>
<div id="footer">
<nav>
<ul>
<li><a href="index.html"><strong>home</strong><img class="logos" src="images/homelogo.png" width="45"height="35"></a></li>
<li><a href="resume.html"><strong>resume</strong><img class="logos" src="images/resume logo.png" width="36"height="37"></a></li>
<li><a href="portfolio.html"><strong>portfolio</strong><img class="logos" src="images/portfolio logo.png" width="45"height="35"></a></li>
<li><a href="what i do.html"><strong>what i do</strong><img class="logos" src="images/camera logo.png" width="60"height="37"></a></li>
</ul>
</nav>
<h4>for professional video and media production</h4>
</div>
</div> <!-- close for wrapper -->
</body>
</html>
CSS
body {
background: url(images/test.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#wrapper {
margin: auto}
#name {
text-align: center;
margin-top: -65px;
font-size: 40px;
color: white;
font-family: 'Dr Sugiyama', cursive;
text-shadow: 0 1px 0 #333,
0 2px 0 #333,
0 3px 0 #333,
0 4px 0 #333,
0 5px 0 #333,
0 5px 4px #989898;
}
#footer {
width:100%;
height:93px;
position:absolute;
bottom:0;
left:0;
right:0;
}
nav{position: relative;text-align: center;}
nav ul {list-style: none; }
li {
display: inline;
border: 2px solid rgb(256,256,256);
font-family:'Ubuntu', sans-serif;
border-top-left-radius:1em;
border-top-right-radius:1em;
background-color: #A3A3A3 ;
padding: 13px;
margin: 10px;
}
img.logos{vertical-align: -11px; padding-left: 3px;}
nav li a:hover {text-decoration:none ;}
nav li a:visited {color: rgb(256,256,256);}
nav li a:link {text-decoration:none; color: white;}
h4 {
text-decoration:none ;
text-align: center;
background-color: #A3A3A3;
color: white;
font-family: Tahoma, Geneva, sans-serif;
}
/* resume page */
/* end resume page */
/* portfolio page */
#warning {
text-align: center;
color: white;
font-size: 35px;
padding-top: 100px;
}
最佳答案
检查这是否有效:http://jsfiddle.net/IronFeast/n85Cd/2/
将 h4 更改为 div.production，删除了页脚的高度并添加了 position:relative
关于html - 无法在底部元素上正确定位导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24388524/