Estoy tratando de agregar box-shadow tanto al encabezado como al pie de página. Estoy tratando de hacer que parezca que el área de contenido está en segundo plano mientras que el encabezado y el pie de página están "saltando" un poco. El código para el pie de página y el encabezado es el mismo, pero solo el pie de página lo aplica como yo quiero.

/* 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>
0
Marcus Edelbo 4 oct. 2019 a las 20:35

3 respuestas

La mejor respuesta

Obliga a pintar el encabezado sobre el área principal cambiando su posición a relative (mira esto respuesta):

/* 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>
2
Ori Drori 4 oct. 2019 a las 18:24

Agregue position: relative; en .main-head clase css

este es un resultado fijo

/* 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>
0
syJSdev 4 oct. 2019 a las 18:42

Simplemente ponga la sombra de la caja en el header y dele 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>
1
connexo 4 oct. 2019 a las 17:41