ヘッダーのロゴ

私は現在、私のヘッダーと並んで表示されるロゴを取得しようとしていますが、ヘッダーカラーを変更しようとするとロゴの背景をターゲットにすることはできません。フロートを左と右に変更しようとしましたが、センターは私にとって個人的には最高です。ヘッダーカラーを変更できる理由は何ですか？私は以下のコードを掲載しました。ヘッダーのロゴ

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>Title</title> 
    <div class="header"> 
    <img src="logo.png" alt="logo"/> 
</div> 
    <style type="text/css"> 

     body { 
      min-width: 630px; 
     } 

     #container { 
      padding-left: 200px; 
      padding-right: 190px; 
     } 

     #container .column { 
      position: relative; 
      float: left; 
     } 

     #center { 
      padding: 10px 20px; 
      width: 100%; 
     } 

     #left { 
      width: 180px; 
      padding: 0 10px; 
      right: 240px; 
      margin-left: -100%; 
     } 

     #right { 
      width: 130px; 
      padding: 0 10px; 
      margin-right: -100%; 
     } 

     #footer { 
      clear: both; 
     } 

     * html #left { 
      left: 150px; 
     } 

     #container { 
      overflow: hidden; 
     } 

     #container .column { 
      padding-bottom: 1001em; 
      margin-bottom: -1000em; 
     } 


     * html body { 
      overflow: hidden; 
     } 

     * html #footer-wrapper { 
      float: left; 
      position: relative; 
      width: 100%; 
      padding-bottom: 10010px; 
      margin-bottom: -10000px; 
      background: #fff; 
     } 


     body { 
      margin: 0; 
      padding: 0; 
      font-family:Sans-serif; 
      line-height: 2.24em; 
     } 

     p { 
      color: #000000 
     } 

     nav ul { 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
     } 

     nav ul a { 
      color: white; 
      text-decoration: none; 
     } 

     #header { 
      font-size: large; 
      padding: 0.3em; 
      background: #000000; 
     } 

     #footer { 
      font-size: large; 
      padding: 0.3em; 
      background: #e4e2e2; 
     } 

     #left { 
      background: #d3d2d2; 
     } 

     #right { 
      background: #d3d2d2; 
     } 

     #center { 
      background: #e4e2e2; 
     } 

     #container .column { 
      padding-top: 1em; 
     } 
    .header img { 
    width: 250px; 
    height: 80px; 
    float: center; 
    background: #ffffff; 
} 

    .header h1 { 
    position: relative; 
    top: 18px; 
    left: 10px; 
} 

    </style>

出典

2017-04-26 Tacoma

をここで私があります適切な結果を得るためにしなければならなかった。 @freginoldと@ edomingo1の両方がこの問題を解決するのを助けました。 divとimgをheadからbodyに移動してから、id="header"をdivに追加して、適切な変更を行うことができなくてはなりませんでした。すべてのフィードバックありがとうございました:)ありがとう！

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Title</title> 
     <style type="text/css"> 

      body { 
       min-width: 630px; 
      } 

      #container { 
       padding-left: 200px; 
       padding-right: 190px; 
      } 

      #container .column { 
       position: relative; 
       float: left; 
      } 

      #center { 
       padding: 10px 20px; 
       width: 100%; 
      } 

      #left { 
       width: 180px; 
       padding: 0 10px; 
       right: 240px; 
       margin-left: -100%; 
      } 

      #right { 
       width: 130px; 
       padding: 0 10px; 
       margin-right: -100%; 
      } 

      #footer { 
       clear: both; 
      } 

      * html #left { 
       left: 150px; 
      } 

      #container { 
       overflow: hidden; 
      } 

      #container .column { 
       padding-bottom: 1001em; 
       margin-bottom: -1000em; 
      } 


      * html body { 
       overflow: hidden; 
      } 

      * html #footer-wrapper { 
       float: left; 
       position: relative; 
       width: 100%; 
       padding-bottom: 10010px; 
       margin-bottom: -10000px; 
       background: #fff; 
      } 


      body { 
       margin: 0; 
       padding: 0; 
       font-family:Sans-serif; 
       line-height: 2.24em; 
      } 

      p { 
       color: #000000 
      } 

      nav ul { 
       list-style-type: none; 
       margin: 0; 
       padding: 0; 
      } 

      nav ul a { 
       color: white; 
       text-decoration: none; 
      } 

      #header { 
       font-size: large; 
       padding: 0em; 
       margin: 0em; 
       background: #000000; 
      } 

      #footer { 
       font-size: large; 
       padding: 0.3em; 
       background: #e4e2e2; 
      } 

      #left { 
       background: #d3d2d2; 
      } 

      #right { 
       background: #d3d2d2; 
      } 

      #center { 
       background: #e4e2e2; 
      } 

      #container .column { 
       padding-top: 1em; 
      } 
     .header img { 
     width: 250px; 
     height: 80px; 
     float: top; 
     background: #000000; 
    } 

     .header h1 { 
     position: relative; 
     top: 18px; 
     left: 10px; 
    } 


     </style> 
    </head> 
    <body> 

    <div class="header" id="header"> 
     <img src="logo.png" alt="logo"/> 
    </div>

出典

2017-04-26 16:26:18 Tacoma

あなたはそれ自身の中括弧で色を取得しようとしていますか、色の周りの中括弧を見てください。

出典

2017-04-26 15:53:32

HTMLマークアップではクラスセレクタを使用していますが、CSSではIDセレクタを使用しています。予想される結果を表示するには、div class = "header"をdiv id = "header"に置き換えてください。

出典

2017-04-26 15:55:14 edomingo1

あなたの解決策は決まっていませんでしたありがとうございました！私はdivも体に移さなければなりませんでした。 – Tacoma

bodyではなくdivとimgをドキュメントのheadに含めました。以下の例を参照してください。あなたのヘッダーをbodyに移動し、それをターゲットにできることを示すために色を黄色に変更しました。（もちろん、画像は、ここではロードされません。）Uは、センターのfloatを使用することはできません

.header { 
 
    color: yellow; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <title>Title</title> 
 
    <style type="text/css"> 
 

 
     body { 
 
      min-width: 630px; 
 
     } 
 

 
     #container { 
 
      padding-left: 200px; 
 
      padding-right: 190px; 
 
     } 
 

 
     #container .column { 
 
      position: relative; 
 
      float: left; 
 
     } 
 

 
     #center { 
 
      padding: 10px 20px; 
 
      width: 100%; 
 
     } 
 

 
     #left { 
 
      width: 180px; 
 
      padding: 0 10px; 
 
      right: 240px; 
 
      margin-left: -100%; 
 
     } 
 

 
     #right { 
 
      width: 130px; 
 
      padding: 0 10px; 
 
      margin-right: -100%; 
 
     } 
 

 
     #footer { 
 
      clear: both; 
 
     } 
 

 
     * html #left { 
 
      left: 150px; 
 
     } 
 

 
     #container { 
 
      overflow: hidden; 
 
     } 
 

 
     #container .column { 
 
      padding-bottom: 1001em; 
 
      margin-bottom: -1000em; 
 
     } 
 

 

 
     * html body { 
 
      overflow: hidden; 
 
     } 
 

 
     * html #footer-wrapper { 
 
      float: left; 
 
      position: relative; 
 
      width: 100%; 
 
      padding-bottom: 10010px; 
 
      margin-bottom: -10000px; 
 
      background: #fff; 
 
     } 
 

 

 
     body { 
 
      margin: 0; 
 
      padding: 0; 
 
      font-family:Sans-serif; 
 
      line-height: 2.24em; 
 
     } 
 

 
     p { 
 
      color: #000000 
 
     } 
 

 
     nav ul { 
 
      list-style-type: none; 
 
      margin: 0; 
 
      padding: 0; 
 
     } 
 

 
     nav ul a { 
 
      color: white; 
 
      text-decoration: none; 
 
     } 
 

 
     #header { 
 
      font-size: large; 
 
      padding: 0.3em; 
 
      background: #000000; 
 
     } 
 

 
     #footer { 
 
      font-size: large; 
 
      padding: 0.3em; 
 
      background: #e4e2e2; 
 
     } 
 

 
     #left { 
 
      background: #d3d2d2; 
 
     } 
 

 
     #right { 
 
      background: #d3d2d2; 
 
     } 
 

 
     #center { 
 
      background: #e4e2e2; 
 
     } 
 

 
     #container .column { 
 
      padding-top: 1em; 
 
     } 
 
    .header img { 
 
    width: 250px; 
 
    height: 80px; 
 
    float: center; 
 
    background: #ffffff; 
 
} 
 

 
    .header h1 { 
 
    position: relative; 
 
    top: 18px; 
 
    left: 10px; 
 
} 
 

 
    </style> 
 
</head> 
 
    
 
<body> 
 

 
<div class="header"> 
 
    <img src="logo.png" alt="logo"/> 
 
</div> 
 

 
</body> 
 
</html>

出典

2017-04-26 15:56:25 freginold

私はそれを理解した、私はあなたのようにボディと私はdivとimgを移動しなければならなかったが、私はid = "ヘッダー" @ edomingo1のようにも追加する必要が示唆した。 – Tacoma

。あなたが並んで並べ替えをしたいのであれば、フロートを使用します。しかし、配置するにはalignまたはtext-alignを使用する必要があります。このコードを追加します。

.header{ 
text-align: center; 
}

あなたが別のロゴやテキストを追加したいとあなたは彼らがこのあなたがのdivを使用して、このコードを使用することができます表示されない場合：

.logo{ 
width: 250px; 
height: 80px; 
text-align: center; 
background: #ffffff; 
} 
</style> 
</head> 
<body> 
<div class="logo"> 
    <img src="logo.png"/> 
</div>

出典

2017-04-26 16:18:33 mymiracl

答えて

関連する問題