ナビゲーションバーが下部に飛んでいます

ナビゲーションバーを作成しようとしていますが、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; 
      }

出典

2017-03-03 Mark

あなたが知る必要がある最初の事はあなたがあなたのタグを配置する順序です。ここのようにあなたのnav barは底にあります、これを底に置いてもよろしいですか？あなたがグラフィックモックアップをすることができればあなたが望むものを作ることができれば、他の人があなたを助けるのに本当に役立つでしょう –

ロゴに50vwの高さを設定しました。つまり、画面の高さの半分（50vw =ビュー幅の50％）が必要です。高さは画像の高さ（50px？px =ピクセル）と同じに設定します。次に、残りの部分を下に押しています。

出典

2017-03-03 18:41:15 Zetura

ありがとう！私はそれを無視するために盲目になったに違いない – 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>

出典

2017-03-03 19:41:57

ナビゲーションバーが下部に飛んでいます

答えて

関連する問題