导航栏飞到底部
问题描述:
我想在两个图标/徽标下面创建一个导航栏,但它会飞到页面的底部,或覆盖2个标志。真人版可在http://ddlgaming.com/giga/导航栏飞到底部
这是到目前为止我的代码: (请忽略一些颜色:白色,这是帮我看得更清楚。)
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="css/mainframe.css" type="text/css" rel=stylesheet>
<script src="scripts/jquery.js"></script>
<body>
<!--Giga logo, top left--!>
<div id="gigalogomainbox">
<div id="gigalogobox">
<img id="gigalogo" src="images/gigalogo.png">
</div>
<div class="clearfix">
</div>
</div>
<!--Steam logo, top right--!>
<div id="steamlogomainbox">
<div id="steamlogobox">
<img id="steamlogo" src="images/steamlogo.png">
</div>
<div class="clearfix">
</div>
</div>
<!--navigation barrrrrr--!>
<div id="navbarbox">
<ul id="navbar">
<li>Home</li>
<li>Servers</li>
<li>Community</li>
<li>Store</li>
<li>Download</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
CSS:
.clearfix {
clear: both;
}
body
{
background-color: rgb(21,14,43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#gigalogomainbox
{
float: left;
width: 30%;
height: 50vw;
overflow: hidden;
transform: skewX(20deg);
}
#gigalogobox
{
margin: 0 3vw 0 5vw;
padding: 0 0 0 2vw;
background-color: white;
width: 80%;
height: 20%;
}
#gigalogo
{
width: 90%;
float: left;
margin: 2.5vw 2vw 0 0;
}
#steamlogomainbox
{
width: 10%;
height: 50vw;
float: right;
overflow: hidden;
}
#steamlogobox
{
margin: 0 -2vw 0 3vw;
padding: 0;
width: 100%;
height: 20%;
float: right;
background-color: white; /*000c21*/
transform: skewX(-20deg);
}
#steamlogo
{
width: 65%;
float: right;
margin: 3vw 2vw 0 0;
transform: skewX(20deg);
}
#placeholderbartop
{
float: left;
width: 60%;
margin: 0;
padding: 0;
height: 10vw;
}
#navbarbox
{
width: 100%;
}
#navbar, #navbar ul
{
width: 100%;
height: 5vw;
margin: 0;
color: white;
background-color: white;
display: inline-block;
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding: 1vw;
color: red;
font-size: 30px;
}
答
您已将logo设置为50vw的高度。因此,它的屏幕高度为一半(50vw =视图宽度的50%),所需要的是将高度设置为与图像高度相同(50px?px =像素)。然后,它将其余部分推到底部。
+0
谢谢!我一定是盲目的,无视这一点 – Mark
答
这是你在找什么?
body
{
background-color: rgb(21,14,43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#navbarbox \t \t \t
{
width: 100%;
}
#navbar, #navbar ul
{
width: 90%;
height: 70px;
margin: 0;
color: white;
background-color: white;
display: inline-block;
}
#gi {
margin-top: -10px;
width:80px;
height: 50px;
line-height: 50px;
vertical-align:middle;
} \t \t \t
#steam{
margin-top: -10px;
width: 80px;
height: 60px;
line-height: 70px;
vertical-align: middle;
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding-top:15px;
padding-right: 1%;
color: red;
font-size: 80%;
}
<div id="navbarbox">
<ul id="navbar">
<li><img id="gi" src="http://ddlgaming.com/giga/images/gigalogo.png"></li>
<li>Home</li>
<li>Servers</li>
<li>Community</li>
<li>Store</li>
<li>Download</li>
<li>Contact</li>
<li><img id="steam" src="http://ddlgaming.com/giga/images/steamlogo.png"></li>
</ul>
</div>
你需要知道的第一件事情就是在你把你的标签的顺序。像这里你的导航栏在底部,你确定你把它放在底部吗?和PLZ,如果你可以做一个你想要的图形模型,这对其他人来说可以帮助你很有帮助 –