0

Im trying to add box-shadow to both header and footer. Im trying to make it look like the content area is in the background while header and footer is "jumping out" a bit. The code for footer and header is the same, yet only footer applies it like i want to.

/* All pages layout */

html {
  background-color: #0294ea;
}

body {
  font-family: helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #0294ea;
}

.container {
  max-width: 100%;
  margin: 0 auto;
}

header {
  background-color: transparent;
  color: #FFF;
  margin-top: 20px;
}

header h1 {
  text-align: center;
}

header p {
  text-align: center;
}

.main-head {
  display: block;
  border-bottom: 2px solid #414141;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
}

.main-body {
  background-color: #FFF;
}

.content-area {
  background-color: #FFF;
  margin-left: 60px;
  margin-right: 60px;
}

.main-foot {
  background-color: transparent;
  display: block;
  border-top: 2px solid #414141;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
}

footer {
  font-size: 60%;
  text-align: center;
  color: #fff;
}


/* Site navigation */

.navigation {
  margin-top: 20px;
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  display: inline-block;
  list-style: none;
  margin-right: 5px;
}

.navigation a {
  display: block;
  text-decoration: none;
  font-weight: normal;
  font-size: 87%;
  color: #FFF;
  padding: 5px 10px;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #a14b56;
}

.navigation a:hover {
  color: #FFF;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #414141;
}


/* Universal float fix */

.fix {
  clear: both;
}

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
}


/* Index specific */

.sidebar {
  max-width: 33.33%;
}

.main-body {
  max-width: 66.66%;
}
<header>
  <div class="container">
    <div class="main-head">
      <h1>Welcome to My Page</h1>
      <p>For a Viking lifestyle</p>

      <nav class="navigation">
        <ul class="fix">
          <li><a href="index.html">Home</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

<div class="content-area group">
  <div class="container">
    <div class="main-body">

      <h1>Article 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

    <aside class="sidebar">

      <h1>This is the sidebar</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </aside>
  </div>
</div>

<footer>
  <div class="main-foot">
    <p>Copyright &copy; 2019 - Marcus Tarang | Learning HTML/CSS</p>
  </div>
</footer>
Ori Drori
  • 183,571
  • 29
  • 224
  • 209
Marcus Edelbo
  • 3
  • 1

3 Answers3

2

Force the header to be painted above the main area by changing it's position to relative (see this answer):

/* All pages layout */

html {
  background-color: #0294ea;
}

body {
  font-family: helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #0294ea;
}

.container {
  max-width: 100%;
  margin: 0 auto;
}

header {
  position: relative;
  background-color: transparent;
  color: #FFF;
  margin-top: 20px;
}

header h1 {
  text-align: center;
}

header p {
  text-align: center;
}

.main-head {
  display: block;
  border-bottom: 2px solid #414141;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
}

.main-body {
  background-color: #FFF;
}

.content-area {
  background-color: #FFF;
  margin-left: 60px;
  margin-right: 60px;
}

.main-foot {
  background-color: transparent;
  display: block;
  border-top: 2px solid #414141;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
}

footer {
  font-size: 60%;
  text-align: center;
  color: #fff;
}


/* Site navigation */

.navigation {
  margin-top: 20px;
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  display: inline-block;
  list-style: none;
  margin-right: 5px;
}

.navigation a {
  display: block;
  text-decoration: none;
  font-weight: normal;
  font-size: 87%;
  color: #FFF;
  padding: 5px 10px;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #a14b56;
}

.navigation a:hover {
  color: #FFF;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #414141;
}


/* Universal float fix */

.fix {
  clear: both;
}

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
}


/* Index specific */

.sidebar {
  max-width: 33.33%;
}

.main-body {
  max-width: 66.66%;
}
<header>
  <div class="container">
    <div class="main-head">
      <h1>Welcome to My Page</h1>
      <p>For a Viking lifestyle</p>

      <nav class="navigation">
        <ul class="fix">
          <li><a href="index.html">Home</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

<div class="content-area group">
  <div class="container">
    <div class="main-body">

      <h1>Article 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

    <aside class="sidebar">

      <h1>This is the sidebar</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </aside>
  </div>
</div>

<footer>
  <div class="main-foot">
    <p>Copyright &copy; 2019 - Marcus Tarang | Learning HTML/CSS</p>
  </div>
</footer>
Ori Drori
  • 183,571
  • 29
  • 224
  • 209
  • 1
    technically ths will not create a stacking context but will make the header be painted after the content so it's shown above it : https://stackoverflow.com/q/52694564/8620333 – Temani Afif Oct 04 '19 at 18:19
1

Just put the box shadow on the header and give it position: relative;:

header {
  box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
  position: relative;
}


/* All pages layout */

html {
  background-color: #0294ea;
}

body {
  font-family: helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #0294ea;
}

.container {
  max-width: 100%;
  margin: 0 auto;
}

header {
  background-color: transparent;
  color: #FFF;
  margin-top: 20px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
  position: relative;
}

header h1 {
  text-align: center;
}

header p {
  text-align: center;
}

.main-head {
  display: block;
  border-bottom: 2px solid #414141;
  max-width: 100%;
  box-sizing: border-box;
}

.main-body {
  background-color: #FFF;
}

.content-area {
  background-color: #FFF;
  margin-left: 60px;
  margin-right: 60px;
}

.main-foot {
  background-color: transparent;
  display: block;
  border-top: 2px solid #414141;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
}

footer {
  font-size: 60%;
  text-align: center;
  color: #fff;
}


/* Site navigation */

.navigation {
  margin-top: 20px;
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  display: inline-block;
  list-style: none;
  margin-right: 5px;
}

.navigation a {
  display: block;
  text-decoration: none;
  font-weight: normal;
  font-size: 87%;
  color: #FFF;
  padding: 5px 10px;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #a14b56;
}

.navigation a:hover {
  color: #FFF;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #414141;
}


/* Universal float fix */

.fix {
  clear: both;
}

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
}


/* Index specific */

.sidebar {
  max-width: 33.33%;
}

.main-body {
  max-width: 66.66%;
}
<header>
    <div class="container">
      <div class="main-head">
        <h1>Welcome to My Page</h1>
        <p>For a Viking lifestyle</p>

        <nav class="navigation">
          <ul class="fix">
            <li><a href="index.html">Home</a></li>
            <li><a href="#">Placeholder</a></li>
            <li><a href="#">Placeholder</a></li>
            <li><a href="#">Placeholder</a></li>
            <li><a href="#">Placeholder</a></li>
            <li><a href="#">Placeholder</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <div class="content-area group">
    <div class="container">
      <div class="main-body">

        <h1>Article 1</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </div>

      <aside class="sidebar">

        <h1>This is the sidebar</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

      </aside>
    </div>
  </div>

  <footer>
    <div class="main-foot">
      <p>Copyright &copy; 2019 - Marcus Tarang | Learning HTML/CSS</p>
    </div>
  </footer>
connexo
  • 53,704
  • 14
  • 91
  • 128
0

add the position: relative; into .main-head css class

this is fixed result

/* All pages layout */

html {
  background-color: #0294ea;
}

body {
  font-family: helvetica, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #0294ea;
}

.container {
  max-width: 100%;
  margin: 0 auto;
}

header {
  background-color: transparent;
  color: #FFF;
  margin-top: 20px;
}

header h1 {
  text-align: center;
}

header p {
  text-align: center;
}

.main-head {
  display: block;
  border-bottom: 2px solid #414141;
  box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
}

.main-body {
  background-color: #FFF;
}

.content-area {
  background-color: #FFF;
  margin-left: 60px;
  margin-right: 60px;
}

.main-foot {
  background-color: transparent;
  display: block;
  border-top: 2px solid #414141;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, .5);
  max-width: 100%;
  box-sizing: border-box;
}

footer {
  font-size: 60%;
  text-align: center;
  color: #fff;
}


/* Site navigation */

.navigation {
  margin-top: 20px;
}

.navigation ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.navigation li {
  display: inline-block;
  list-style: none;
  margin-right: 5px;
}

.navigation a {
  display: block;
  text-decoration: none;
  font-weight: normal;
  font-size: 87%;
  color: #FFF;
  padding: 5px 10px;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #a14b56;
}

.navigation a:hover {
  color: #FFF;
  border: 2px solid #414141;
  border-bottom: none;
  background-color: #414141;
}


/* Universal float fix */

.fix {
  clear: both;
}

.group:before,
.group:after {
  content: "";
  display: table;
}

.group:after {
  clear: both;
}

.group {
  zoom: 1;
}


/* Index specific */

.sidebar {
  max-width: 33.33%;
}

.main-body {
  max-width: 66.66%;
}
<header>
  <div class="container">
    <div class="main-head">
      <h1>Welcome to My Page</h1>
      <p>For a Viking lifestyle</p>

      <nav class="navigation">
        <ul class="fix">
          <li><a href="index.html">Home</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
          <li><a href="#">Placeholder</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

<div class="content-area group">
  <div class="container">
    <div class="main-body">

      <h1>Article 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

    <aside class="sidebar">

      <h1>This is the sidebar</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </aside>
  </div>
</div>

<footer>
  <div class="main-foot">
    <p>Copyright &copy; 2019 - Marcus Tarang | Learning HTML/CSS</p>
  </div>
</footer>
syjsdev
  • 1,326
  • 1
  • 9
  • 22