2017-03-04 8 views
1

私はまだhtmlとcssを学んでいて、どのように動作しているか把握しようとしており、コーディング経験はありません。もし私が愚かな、あるいは完全に冗長なものを求めたら私を許してください。divはdiv(HTML/CSS)と重なっていますか?

基本的には、私が取り組んでいる3つのdivがあります。ページの一番上に2つのdiv、ロゴの両方。左上に1つ、右上に1つ。 ナビゲーションバーの3番目のdivは、その下にはなく、重なっています。

私はちょうど<br>を扱うべきでしょうか?

参照される画像はローカルです。ライブバージョンについては、http://ddlgaming.com/giga/を参照してください。

ありがとうございます!

(彼らは私がよりよく見るのを助ける、すべての色を無視してください)、次のように私のコードは次のとおりです。

CSSとHTML:

.clearfix \t { 
 
\t \t \t clear: both; 
 
\t \t \t } 
 

 
body 
 
\t \t \t { 
 
\t \t \t background-color: rgb(21,14,43); 
 
\t \t \t background-image: url("../images/backgroundimage.jpg"); 
 
\t \t \t background-size: cover; 
 
\t \t \t background-repeat: no-repeat; 
 
\t \t \t background-attachment: fixed; 
 
\t \t \t min-height: 100%; 
 
\t \t \t background-position: center center; 
 
\t \t \t overflow: hidden; 
 
\t \t \t } 
 
\t 
 
#gigalogomainbox 
 
\t \t \t { 
 
\t \t \t float: left; 
 
\t \t \t width: 30vw; 
 
\t \t \t height: 10vw; 
 
\t \t \t overflow: hidden; 
 
\t \t \t transform: skewX(20deg); 
 
\t \t \t margin: 0 0 0 -4vw; 
 
\t \t \t } 
 
\t \t \t 
 
#gigalogobox 
 
\t \t \t { 
 
\t \t \t margin: 0 3vw 0 2vw; 
 
\t \t \t padding: 0 0 0 2vw; 
 
\t \t \t width: 100%; 
 
\t \t \t height: 8vw; 
 
\t \t \t } 
 
\t 
 
#gigalogo 
 
\t \t \t { 
 
\t \t \t width: 80%; 
 
\t \t \t margin: 3vw 2vw 0 0; 
 
\t \t \t height: 7vw; 
 
\t \t \t } 
 
\t \t \t 
 
#steamlogomainbox 
 
\t \t \t { 
 
\t \t \t width: 15vw; 
 
\t \t \t height: 10vw; 
 
\t \t \t float: right; 
 
\t \t \t margin: 0 -4vw 0 0; 
 
\t \t \t background-color: white; /*000c21*/ 
 
\t \t \t transform: skewX(-20deg); 
 
\t \t \t overflow: hidden; 
 
\t \t \t } 
 
\t \t \t \t \t 
 
#steamlogobox 
 
\t \t \t { 
 
\t \t \t margin: 0 -2vw 0 3vw; 
 
\t \t \t padding: 0; 
 
\t \t \t width: 100%; 
 
\t \t \t height: 20%; 
 
\t \t \t } 
 
#steamlogo 
 
\t \t \t { 
 
\t \t \t padding: 0 0 0 2vw; 
 
\t \t \t margin: 3vw 0vw 0 0; 
 
\t \t \t transform: skewX(20deg); 
 
\t \t \t height: 7vw; 
 
\t \t \t } 
 

 
#placeholderbartop 
 
\t \t \t { 
 
\t \t \t float: left; 
 
\t \t \t width: 60%; 
 
\t \t \t margin: 0; 
 
\t \t \t padding: 0; 
 
\t \t \t height: 10vw; 
 
\t \t \t } 
 
\t \t \t 
 

 
#navbarbox \t \t \t 
 
\t \t \t { 
 
\t \t \t display: block; 
 
\t \t \t width: 100%; 
 
\t \t \t height: 5vw; 
 
\t \t \t margin: 0vw; 
 
\t \t \t background-color: white; 
 
\t \t \t } 
 
#navbar, #navbar ul 
 
\t \t \t { 
 
\t \t \t width: 100%; 
 
\t \t \t height: 5vw; 
 
\t \t \t margin: 0; 
 
\t \t \t background-color: green; 
 
\t \t \t } 
 
\t \t \t 
 
#navbar li 
 
\t \t \t { 
 
\t \t \t color: white; 
 
\t \t \t list-style: none; 
 
\t \t \t display: inline-block; 
 
\t \t \t padding: 1vw; 
 
\t \t \t color: red; 
 
\t \t \t font-size: 30px; 
 
\t \t \t } 
 
\t \t \t
<!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" class="clearfix"> 
 
\t <div id="gigalogobox"> 
 
\t \t <img id="gigalogo" src="images/gigalogo.png"> 
 
\t </div> 
 
\t <div class="clearfix"> 
 
\t </div> 
 
</div> 
 

 
<!--Steam logo, top right--!> 
 
<div id="steamlogomainbox"> 
 
\t <div id="steamlogobox"> 
 
\t \t <img id="steamlogo" src="images/steamlogo.png"> 
 
\t </div> 
 
\t <div class="clearfix"> 
 
\t </div> 
 
</div> 
 

 
<!--navigation barrrrrr--!> 
 
<div id="navbarbox"> 
 
\t <ul id="navbar"> 
 
\t \t <li>Home</li> 
 
\t \t <li>Servers</li> 
 
\t \t <li>Community</li> 
 
\t \t <li>Store</li> 
 
\t \t <li>Download</li> 
 
\t \t <li>Contact</li> 
 
\t </ul> 
 
</div> 
 

 
</body> 
 

 

 
</html>

+1

まずtoyourのあなたにclearfixクラスを追加することができ、あなたのHTMLがあります壊れたn。コメントは '<! - Comment - >'でなければなりません。修理する。次に、 'br'に関する2番目の質問。視覚的な問題を解決するために 'br'を使うことは良くありません。 –

+0

タイトルに「SOLVED」はありません。あなたまたは他の誰かがあなたの質問に答えた場合、それを他の人に知らせるために受け入れられたものとしてマークすることができます。 – j08691

+0

私は知らなかった申し訳ありません:( – Mark

答えて

0

浮かべ要素が必要なためですブロック要素がそれらの下に表示されるように「クリア」されなければ、ブロック要素のインラインコンテンツが浮動要素を囲むことになります。使用できるCSSには.clearfixクラスがあります。これを#navbarboxに適用するか、新しい要素にあなたのロゴをラップし、その要素に.clearfixクラスを適用することができます。

btw htmlのコメント構文が間違っています。 <!-- comment -->する必要があり、ない<!-- comment --!>

.clearfix \t { 
 
\t \t \t clear: both; 
 
\t \t \t } 
 

 
body 
 
\t \t \t { 
 
\t \t \t background-color: rgb(21,14,43); 
 
\t \t \t background-image: url("../images/backgroundimage.jpg"); 
 
\t \t \t background-size: cover; 
 
\t \t \t background-repeat: no-repeat; 
 
\t \t \t background-attachment: fixed; 
 
\t \t \t min-height: 100%; 
 
\t \t \t background-position: center center; 
 
\t \t \t overflow: hidden; 
 
\t \t \t } 
 
\t 
 
#gigalogomainbox 
 
\t \t \t { 
 
\t \t \t float: left; 
 
\t \t \t width: 30vw; 
 
\t \t \t height: 10vw; 
 
\t \t \t overflow: hidden; 
 
\t \t \t transform: skewX(20deg); 
 
\t \t \t margin: 0 0 0 -4vw; 
 
\t \t \t } 
 
\t \t \t 
 
#gigalogobox 
 
\t \t \t { 
 
\t \t \t margin: 0 3vw 0 2vw; 
 
\t \t \t padding: 0 0 0 2vw; 
 
\t \t \t width: 100%; 
 
\t \t \t height: 8vw; 
 
\t \t \t } 
 
\t 
 
#gigalogo 
 
\t \t \t { 
 
\t \t \t width: 80%; 
 
\t \t \t margin: 3vw 2vw 0 0; 
 
\t \t \t height: 7vw; 
 
\t \t \t } 
 
\t \t \t 
 
#steamlogomainbox 
 
\t \t \t { 
 
\t \t \t width: 15vw; 
 
\t \t \t height: 10vw; 
 
\t \t \t float: right; 
 
\t \t \t margin: 0 -4vw 0 0; 
 
\t \t \t background-color: white; /*000c21*/ 
 
\t \t \t transform: skewX(-20deg); 
 
\t \t \t overflow: hidden; 
 
\t \t \t } 
 
\t \t \t \t \t 
 
#steamlogobox 
 
\t \t \t { 
 
\t \t \t margin: 0 -2vw 0 3vw; 
 
\t \t \t padding: 0; 
 
\t \t \t width: 100%; 
 
\t \t \t height: 20%; 
 
\t \t \t } 
 
#steamlogo 
 
\t \t \t { 
 
\t \t \t padding: 0 0 0 2vw; 
 
\t \t \t margin: 3vw 0vw 0 0; 
 
\t \t \t transform: skewX(20deg); 
 
\t \t \t height: 7vw; 
 
\t \t \t } 
 

 
#placeholderbartop 
 
\t \t \t { 
 
\t \t \t float: left; 
 
\t \t \t width: 60%; 
 
\t \t \t margin: 0; 
 
\t \t \t padding: 0; 
 
\t \t \t height: 10vw; 
 
\t \t \t } 
 
\t \t \t 
 

 
#navbarbox \t \t \t 
 
\t \t \t { 
 
\t \t \t display: block; 
 
\t \t \t width: 100%; 
 
\t \t \t height: 5vw; 
 
\t \t \t margin: 0vw; 
 
\t \t \t background-color: white; 
 
\t \t \t } 
 
#navbar, #navbar ul 
 
\t \t \t { 
 
\t \t \t width: 100%; 
 
\t \t \t height: 5vw; 
 
\t \t \t margin: 0; 
 
\t \t \t background-color: green; 
 
\t \t \t } 
 
\t \t \t 
 
#navbar li 
 
\t \t \t { 
 
\t \t \t color: white; 
 
\t \t \t list-style: none; 
 
\t \t \t display: inline-block; 
 
\t \t \t padding: 1vw; 
 
\t \t \t color: red; 
 
\t \t \t font-size: 30px; 
 
\t \t \t } 
 
\t \t \t
<!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" class="clearfix"> 
 
\t <div id="gigalogobox"> 
 
\t \t <img id="gigalogo" src="images/gigalogo.png"> 
 
\t </div> 
 
\t <div class="clearfix"> 
 
\t </div> 
 
</div> 
 

 
<!--Steam logo, top right--> 
 
<div id="steamlogomainbox"> 
 
\t <div id="steamlogobox"> 
 
\t \t <img id="steamlogo" src="images/steamlogo.png"> 
 
\t </div> 
 
\t <div class="clearfix"> 
 
\t </div> 
 
</div> 
 

 
<!--navigation barrrrrr--> 
 
<div id="navbarbox" class="clearfix"> 
 
\t <ul id="navbar"> 
 
\t \t <li>Home</li> 
 
\t \t <li>Servers</li> 
 
\t \t <li>Community</li> 
 
\t \t <li>Store</li> 
 
\t \t <li>Download</li> 
 
\t \t <li>Contact</li> 
 
\t </ul> 
 
</div> 
 

 
</body> 
 

 

 
</html>

0

あなたはclear: bothを使用するか、または単にすべてのnavbarbox

.clearfix \t { 
 
\t \t \t clear: both; 
 
\t \t \t } 
 

 
body 
 
\t \t \t { 
 
\t \t \t background-color: rgb(21,14,43); 
 
\t \t \t background-image: url("../images/backgroundimage.jpg"); 
 
\t \t \t background-size: cover; 
 
\t \t \t background-repeat: no-repeat; 
 
\t \t \t background-attachment: fixed; 
 
\t \t \t min-height: 100%; 
 
\t \t \t background-position: center center; 
 
\t \t \t overflow: hidden; 
 
\t \t \t } 
 
\t 
 
#gigalogomainbox 
 
\t \t \t { 
 
\t \t \t float: left; 
 
\t \t \t width: 30vw; 
 
\t \t \t height: 10vw; 
 
\t \t \t overflow: hidden; 
 
\t \t \t transform: skewX(20deg); 
 
\t \t \t margin: 0 0 0 -4vw; 
 
\t \t \t } 
 
\t \t \t 
 
#gigalogobox 
 
\t \t \t { 
 
\t \t \t margin: 0 3vw 0 2vw; 
 
\t \t \t padding: 0 0 0 2vw; 
 
\t \t \t width: 100%; 
 
\t \t \t height: 8vw; 
 
\t \t \t } 
 
\t 
 
#gigalogo 
 
\t \t \t { 
 
\t \t \t width: 80%; 
 
\t \t \t margin: 3vw 2vw 0 0; 
 
\t \t \t height: 7vw; 
 
\t \t \t } 
 
\t \t \t 
 
#steamlogomainbox 
 
\t \t \t { 
 
\t \t \t width: 15vw; 
 
\t \t \t height: 10vw; 
 
\t \t \t float: right; 
 
\t \t \t margin: 0 -4vw 0 0; 
 
\t \t \t background-color: white; /*000c21*/ 
 
\t \t \t transform: skewX(-20deg); 
 
\t \t \t overflow: hidden; 
 
\t \t \t } 
 
\t \t \t \t \t 
 
#steamlogobox 
 
\t \t \t { 
 
\t \t \t margin: 0 -2vw 0 3vw; 
 
\t \t \t padding: 0; 
 
\t \t \t width: 100%; 
 
\t \t \t height: 20%; 
 
\t \t \t } 
 
#steamlogo 
 
\t \t \t { 
 
\t \t \t padding: 0 0 0 2vw; 
 
\t \t \t margin: 3vw 0vw 0 0; 
 
\t \t \t transform: skewX(20deg); 
 
\t \t \t height: 7vw; 
 
\t \t \t } 
 

 
#placeholderbartop 
 
\t \t \t { 
 
\t \t \t float: left; 
 
\t \t \t width: 60%; 
 
\t \t \t margin: 0; 
 
\t \t \t padding: 0; 
 
\t \t \t height: 10vw; 
 
\t \t \t } 
 
\t \t \t 
 

 
#navbarbox \t \t \t 
 
\t \t \t { 
 
\t \t \t display: block; 
 
\t \t \t width: 100%; 
 
\t \t \t height: 5vw; 
 
\t \t \t margin: 0vw; 
 
\t \t \t background-color: white; 
 
     clear: both; /*add this*/ 
 
\t \t \t } 
 
#navbar, #navbar ul 
 
\t \t \t { 
 
\t \t \t width: 100%; 
 
\t \t \t height: 5vw; 
 
\t \t \t margin: 0; 
 
\t \t \t background-color: green; 
 
\t \t \t } 
 
\t \t \t 
 
#navbar li 
 
\t \t \t { 
 
\t \t \t color: white; 
 
\t \t \t list-style: none; 
 
\t \t \t display: inline-block; 
 
\t \t \t padding: 1vw; 
 
\t \t \t color: red; 
 
\t \t \t font-size: 30px; 
 
\t \t \t } 
 
\t \t \t
<!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" class="clearfix"> 
 
\t <div id="gigalogobox"> 
 
\t \t <img id="gigalogo" src="images/gigalogo.png"> 
 
\t </div> 
 
\t <div class="clearfix"> 
 
\t </div> 
 
</div> 
 

 
<!--Steam logo, top right--> 
 
<div id="steamlogomainbox"> 
 
\t <div id="steamlogobox"> 
 
\t \t <img id="steamlogo" src="images/steamlogo.png"> 
 
\t </div> 
 
\t <div class="clearfix"> 
 
\t </div> 
 
</div> 
 

 
<!--navigation barrrrrr--> 
 
<div id="navbarbox"> 
 
\t <ul id="navbar clearfix"><!--or do this--> 
 
\t \t <li>Home</li> 
 
\t \t <li>Servers</li> 
 
\t \t <li>Community</li> 
 
\t \t <li>Store</li> 
 
\t \t <li>Download</li> 
 
\t \t <li>Contact</li> 
 
\t </ul> 
 
</div> 
 

 
</body> 
 

 

 
</html>

関連する問題