Question

Image with visual aid for what I am trying to do

您好，

我正在设计一个网页，我试图让我的背景颜色覆盖整个标题区域。但是，它周围的区域仍然是主要页面的背景。我尝试添加边框并弄乱填充，但所有这些都会减少标题内的信息。

有没有办法让标题的背景颜色到达页面顶部并一直到页面的两边？

＆＃13;

/* our body class */

body {
  background-color: #0077BE;
}
header {
  width: 100%;
  background-color: #1C39BB;
  color: white;
}

＆＃13;

<body>
  <header>
    <h1>Welcome to Samuel Ohrenberg's portfolio!</h1>
    <center>
      <ul class='navList'>
        <li class='navButton' a href='index.html'>Home</text>
          <li>
            <div class="dropdown">
              <button class="dropbtn">&#8659; Portfolio Items &#8659;</button>
              <div class="dropdown-content">
                <a href="programPage.html">Programs</a>
                <a href="otherProjects.html">Other Projects</a>
              </div>
            </div>
            <li class='navButton' a href='videoInterview.html'>Video Interviews</text>
      </ul>
    </center>
  </header>
</body>

＆＃13;

Answer 1

您正在挑战身体的默认边距。只需从正文中删除默认边距：

body
{
    background-color: #0077BE;
    margin:0;
}

header
{
    width: 100%;
    background-color: #1C39BB;
    color: white;
}

<body>
    <header>
        <h1>Welcome to Samuel Ohrenberg's portfolio!</h1>
        <center>
            <ul class='navList'>
                <li class='navButton' a href='index.html'>Home</text>
                <li> 
                    <div class="dropdown">
                    <button class="dropbtn">&#8659; Portfolio Items &#8659;</button>
                        <div class="dropdown-content">
                            <a href="programPage.html">Programs</a>
                            <a href="otherProjects.html">Other Projects</a>
                        </div>
                    </div>
                <li class='navButton' a href='videoInterview.html'>Video Interviews</text>
            </ul>
        </center>
    </header>
</body>

Answer 2

如前所述，您需要设置元素的边距。默认情况下，我这样做（重置所有元素的边距和填充）：

* {
  margin: 0;
  padding: 0;
}

在您的示例中，它将如下所示： http://codepen.io/alebon/pen/gwaoNO

CSS / HTML标题背景颜色不覆盖页面的整个宽度

2 个答案: