로고의 헤더

현재 헤더에 나란히 표시되는 로고를 얻으려고하고 있지만 로고 배경을 타겟팅 할 수 있지만 헤더 색상을 변경하려고하면 허용되지 않습니다. 나는 왼쪽과 오른쪽으로 플로트를 바꾸려고 노력했다. 센터는 개인적으로 나에게 최고 다. 헤더 색상을 변경할 수있는 이유는 무엇입니까? 아래 코드를 게시했습니다.로고의 헤더

<!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

무엇을한다 I 적절한 결과를 얻으려면해야만했습니다. @freginold와 @ edomingo1 모두이 문제를 해결하는 데 도움이되었습니다. 나는 div과 img을 에서 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 = "header"를 추가 할 필요가 있다고 제안했다. @ edomingo1이 제안했다. – Tacoma

. side-by-side sorting을하고 싶다면, float을 사용하십시오. 하지만 센터 배치를 위해서는 align 또는 text-align을 사용해야합니다. 다른 로고 또는 텍스트를 추가 할 당신은 당신이 사업부을 사용하고이 코드를 사용할 수 있습니다 그들이이 표시되지 않는하려면

.header{ 
text-align: center; 
}

:이 코드를 추가하여 여기에

.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

답변

관련 문제