CSS/HTML заголовок Цвет фона Не Охватывая всю ширину страницы

Image with visual aid for what I am trying to do CSS/HTML заголовок Цвет фона Не Охватывая всю ширину страницы

Здравствуйте,

Я работаю над разработкой веб-странице, и я стараюсь, чтобы получить мой цвет фона, чтобы покрыть всю область заголовка , Тем не менее, он сохраняет область вокруг нее, которая является фоном главной страницы. Я попытался добавить границы и возиться с дополнением, но все, что делает, - это уменьшение информации внутри заголовка.

Есть ли способ получить цвет фона для заголовка, чтобы попасть в верхнюю часть страницы и полностью выйти на обе стороны страницы?

/* our body class */ 
 

 
body { 
 
    background-color: #0077BE; 
 
} 
 
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>

источник

2016-09-10 Samuel Ohrenberg

Вы оспариваете запас по умолчанию тела. Просто удалите запас по умолчанию от тела:

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>

источник

2016-09-10 19:28:59

Это так просто! Спасибо! Простое последующее наблюдение, есть ли простой способ получить цвет фона для достижения верхней части страницы? Таким образом, весь верхний сегмент имеет более темный цвет, а затем он становится светлее. http://i.imgur.com/HlyQSjv.png –

Пустое пространство над заголовком h1. Установите 'margin-top: 0' для' h1' –

Вы можете выполнить поиск 'reset.css', чтобы сбросить все свойства по умолчанию на null. Однако вам может потребоваться переопределить поведение по умолчанию для некоторых элементов. –

-1

Как уже упоминалось, вам необходимо установить запас ваших элементов. По умолчанию я это делаю (сброс поля и отступы для всех элементов):

* { 
    margin: 0; 
    padding: 0; 
}

В вашем примере это будет выглядеть так: http://codepen.io/alebon/pen/gwaoNO

источник

2016-09-10 19:32:20 Alebon

CSS/HTML заголовок Цвет фона Не Охватывая всю ширину страницы

ответ

Смежные вопросы