私はまだ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>
まずtoyourのあなたに
clearfix
クラスを追加することができ、あなたのHTMLがあります壊れたn。コメントは '<! - Comment - >'でなければなりません。修理する。次に、 'br'に関する2番目の質問。視覚的な問題を解決するために 'br'を使うことは良くありません。 –タイトルに「SOLVED」はありません。あなたまたは他の誰かがあなたの質問に答えた場合、それを他の人に知らせるために受け入れられたものとしてマークすることができます。 – j08691
私は知らなかった申し訳ありません:( – Mark