2017-07-20 7 views
-1

これまでのところ、bodyタグ内の最初の要素(imgまたはh1のいずれか)は単純に固まっていますページの左上隅(bodyタグが始まるところです)、マージンのサイズや要素の幅に関係なく、何らかの方法で移動することは不可能です。私はちょうどそれが動作するかどうかを確認するためにそれに背景色を追加しようとしたので、私はいくつかの理由で、この要素を変更することはできませんね。Bodyタグの最初の要素は、左上隅にハードスタックされています

はここにここに私のCSSだ私のHTML

<body> 
    <header class="Top"> 
     <img src="img/logo.png" alt="NeoDance Logo" width="356" height="48" class="logo"> 

     <nav class="NavBar"> 
      <a href="" class="links">Home</a> 
      <a href="" class="links">About</a> 
      <a href="" class="links">Class schedules</a> 
      <a href="" class="links">Performances</a> 
      <a href="" class="links">Blog</a> 
      <a href="" class="links">Contact</a> 

     </nav> 
     <div class="ClearFix"></div> 

    </header> 

です。これは、行を表示する前に、私はマイヤーの完全未編集バージョンを使用していますが、CSS、CSSで指定されているようimg.logoはマージンが、適用されている必要があります

header.Top{ 
    width: 1440px; 
    margin: auto; 
    background-color: #303030; 
    overflow: hidden 

} 

div.wrapper 

img.Logo{ 



    margin-top: 35px; 
    margin-bottom: 35px; 
    margin-left: 250px; 
    margin: auto; 
    background-color: #303030; 



} 

    nav.NavBar{ 
    float: right; 
    width: 490px; 
    background-color: #303030; 
    list-style: none; 
    margin: auto; 
    margin-right: 250px 

} 

a.links{ 
    float: right; 
    font-size: 15pt; 
    font-family: 'Muli', sans-serif; 
    color: #8c8c8c; 
    margin-top: 50px; 
    margin-right: 18px; 
} 

div.container 1{ 
    width: 490px; 
    clear: both 
} 

img.dancers{ 
    float: right; 
} 

div.ClearFix{ 
    clear: both; 
} 

をリセットすることに注意してください。しかし、それだけで(それゆえ「カスケード」)

Problem

答えて

0

実際のheader要素ではなく、あなたのロゴについて話していると思います。

あなたのcssセレクタが間違っています。 img.Logoの代わりにimg.logoとなるはずです

また、あなたのCSSからそのdiv.wrapperコードを削除してください。そこには何がありますか?次に、img.logoのスタイルからmargin: autoを削除してください。

+0

ありがとう、私はロゴの代わりにロゴを使用していたことに気付かなかった。私はそれに情報を入れていなかったのでラッパーのものはそこにあったが、私はそれを使用するつもりだった。とにかく、あなたの助言は私が問題を解決するのを助けました、ありがとう! – Dasphillipbrau

+0

問題ありません。それはあなたを助けて以来、私の答えを投票してもらえますか? –

+0

私はあなたの答えに投票しましたが、私は新しいメンバーであるため投票は表示されません – Dasphillipbrau

0

CSSでの宣言の順序が重要である下の画像では、そこに立ち往生示されています。したがって

、あなたは:

img.Logo{ 
    margin-top: 35px; 
    margin-bottom: 35px; 
    margin-left: 250px; 
    margin: auto; 
    background-color: #303030; 
} 

margin:autoは、上記の余白のすべてに優先します。

他の余白の前にmargin:autoを入れてください。そうすれば動作するはずです。

+0

フィードバックのお寄せいただきありがとうございます。問題は解決されました。 – Dasphillipbrau

+0

あなたは大歓迎です!あなたは正しい答えを選んで質問に答えがつけられるようにしますか? – Vivick

関連する問題