Question

我知道这应该是一个简单的修复，但我似乎无法弄清楚如何将我的导航直接放在位于页面底部的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;
    }

Answer 1

尝试添加＆＃34;清除：两者＆＃34;主要航海指定：

nav {position：relative; text-align：center;明确的：既}

Answer 2

检查这是否有效：http://jsfiddle.net/IronFeast/n85Cd/2/

将h4更改为div.production，删除了页脚的高度并添加了position:relative

无法在底部元素上正确定位导航

2 个答案: