正确的CSS定位帮助需要 [英] Proper CSS positioning help needed
本文介绍了正确的CSS定位帮助需要的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我目前的HTML：
<！DOCTYPE HTML> ;
< html lang =en>
< head>
< title> Nathan Langer< / title>
< meta charset =utf-8>
< link rel =stylesheettype =text / csshref =style.css>
< / head>
< body>
< div id =wrapper =>
< div id =name>
< h1> Nathan Langer< / h1>
< / div>
< nav>
< ul>
< li>< a href =resume.html>简历< img src =images / resume logo.pngwidth =35height =35>< strong><< ; /强>< / A>< /锂>
< li>< a href =portfolio> Portfolio< img src =images / portfolio logo.pngwidth =45height =35>< strong><强>< / A>< /锂>
< li>< a href =aboutme>我做了什么< / a>< / s> < / ul>
< / nav>
< h3>对于专业视频和媒体制作< / h3>
< / div> <！ - 关闭包装 - >
< / body>
< / html>
和我的CSS：
body {
background-image：url（images / cool.png）;
vertical-align：middle;
background-size：100％;
background-position：fill;
背景重复：不重复;
}
#wrapper {
width：auto;
height：auto;
margin-left：auto;
margin-right：auto;
}
#name {
text-align：center;
font-size：35px;
颜色：白色;
font-family：Herculanum，Eras Demi ITC，sans-serif;
}
nav {
position：relative;
bottom：-550px;
left：250px;
}
nav ul {
list-style：none;
margin-right：-50px;
}
li {
display：inline;
border：2px solid rgb（256,256,256）;
font-family：Herculanum，Eras Demi ITC，sans-serif;
font-size：25px;
border-top-left-radius：1em;
border-right-right-radius：1em;
背景颜色：＃A3A3A3;
padding：10px 20px;
}
nav li a：hover {text-decoration：none;}
nav li a：visited {color：rgb（256,256,256）;}
nav li a：link {text-decoration：none;颜色：＃989898;}
h3 {
text-decoration：none;
text-align：center;
位置：绝对;
背景颜色：＃A3A3A3;
职位：亲属;
bottom：-550px;
颜色：白色;
解决方案
您可以添加下面的CSS ，它覆盖整个浏览器背景和图像。
body {
background：url（images / cool.png）no-repeat center center fixed;
-webkit-background-size：cover;
-moz-background-size：cover;
-o-background-size：cover;
background-size：cover;
}
Basically what I am trying to do is have my background image fill the page and have my nav, on top of my footer, and have both remain at the bottom. I've tried a lot of different things and I can seem to position them properly. I have a very basic proof of what I want my website to look like but i can't post pictures yet... Any help is much appreciated.
this is my current HTML:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Nathan Langer</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper=">
<div id="name">
<h1>Nathan Langer</h1>
</div>
<nav>
<ul>
<li><a href="resume.html">Resume<img src="images/resume logo.png"width="35"height="35"><strong></strong></a></li>
<li><a href="portfolio">Portfolio<img src="images/portfolio logo.png" width="45"height="35"><strong></strong></a></li>
<li><a href="aboutme">What I Do<img src="images/camera logo.png" width="75"height="35"></a></li>
</ul>
</nav>
<h3>For professional video and media production</h3>
</div> <!-- close for wrapper -->
</body>
</html>
And my CSS:
body {
background-image: url(images/cool.png);
vertical-align: middle;
background-size:100%;
background-position: fill;
background-repeat: no-repeat;
}
#wrapper {
width: auto;
height: auto;
margin-left: auto;
margin-right: auto;
}
#name {
text-align: center;
font-size: 35px;
color: white;
font-family: Herculanum, "Eras Demi ITC", sans-serif;
}
nav{
position: relative;
bottom: -550px;
left: 250px;
}
nav ul {
list-style: none;
margin-right: -50px;
}
li {
display: inline;
border: 2px solid rgb(256,256,256);
font-family: Herculanum, "Eras Demi ITC", sans-serif;
font-size:25px;
border-top-left-radius:1em;
border-top-right-radius:1em;
background-color: #A3A3A3;
padding: 10px 20px;
}
nav li a:hover {text-decoration:none ;}
nav li a:visited {color: rgb(256,256,256);}
nav li a:link {text-decoration:none; color: #989898;}
h3 {
text-decoration:none ;
text-align: center;
position: absolute;
background-color: #A3A3A3;
position: relative;
bottom: -550px;
color: white;
}
解决方案
You could add the below CSS, which covers the whole browser background with the image.
body {
background: url(images/cool.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
这篇关于正确的CSS定位帮助需要的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
