1
ヘッダと.content-containerの間に100pxのマージンを設定したいと思います。ヘッダーまたは.content-containerのいずれかに余白を設定するたびに、背景イメージもプッシュされます。おそらく、.content-wrapとheaderセレクタの位置属性に接続されているかもしれませんが、わかりません。私はフロントエンド開発者にとってまだ新しいので、どこに問題があるのか分かりません。ヘッダマージンが背景画像でdivを押している
html, body, header, h1, h2, h3, div, figure, figcaption, img, p, a {
margin: 0;
padding: 0;
border: 0;
}
html, body {
height: 100%;
}
h1, h2, h3, p {
font-family: sans-serif;
}
.sticky-footer-wrapper {
min-height: 100%;
/*Equal to height of footer*/
margin-bottom: -200px;
}
.content-wrap {
width: 100%;
height: 100%;
display: block;
position: relative;
z-index: -10;
}
.content-wrap::after {
content: "";
background: #5F5449 url(http://margraonline.com/wp-content/uploads/2015/08/pretty-coffee-beans.jpeg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
header {
position: relative;
height: 100px;
background: #291711;
}
header img {
display: block;
padding-top: 20px;
padding-right: 10px;
padding-left: 20px;
float: left;
}
header h1 {
color: #EEF0F2;
font-size: 40px;
font-weight: bold;
padding-top: 20px;
padding-left: 20px;
}
header nav {
float: right;
padding-bottom: 0;
}
header nav a {
text-decoration: none;
color: #D1BEB0;
padding-right: 15px;
font-size: 20px;
}
a:nth-child(5) {
padding-right: 55px;
}
a:hover {
color: #938BA1;
}
#active-link {
color: #938BA1;
text-decoration: underline;
}
.content-container {
margin-top: 100px;
margin-bottom: 300px;
width: 60%;
background-color: #D9C9BE;
border: 2px solid #291711;
}
.content-container h2 {
font-size: 36px;
color: #4E453C;
text-decoration: underline;
text-align: center;
padding: 15px 0;
}
.content-container h3 {
font-size: 26px;
color: #3C2C26;
text-align: center;
padding: 20px 0 10px 0;
}
figure {
display: block;
border: 1px solid #3C2C26;
background-color: #FFFCF3;
height: 300px;
width: 400px;
margin: 0 auto;
}
figure img {
width: 100%;
text-align: center;
}
figcaption, p {
text-align: center;
padding-bottom: 10px;
}
blockquote {
position: relative;
font-size: 18px;
}
footer, push {
height: 200px;
}
footer {
width: 100%;
background-color: #291711;
text-align: center;
}
footer nav a {
float: inherit;
text-decoration: none;
color: #D1BEB0;
font-size: 28px;
font-family: Arial, serif;
font-weight: lighter;
padding-right: 15px;
}
#top-row {
padding-top: 25px;
padding-bottom: 15px;
}
#bottom-row {
padding-bottom: 25px;
}
footer p {
color: #D1BEB0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Bloc Frontend Formations Part 1</title>
</head>
<body>
<div class="sticky-footer-wrapper">
<header>
<img src="https://i.imgur.com/v6FOpf0.png" title="source: imgur.com" />
<h1>Specialty Coffee Company</h1>
<nav>
<a href="#">Home</a>
<a href="#">About SCC</a>
<a id="active-link" href="#">Rare Coffees</a>
<a href="#">Store</a>
<a href="#">Contact us</a>
</nav>
</header>
<!-- Content Wrap -->
<div class="content-wrap">
<!-- Content Container -->
<section class="content-container">
<h2>Rare Coffees</h2>
<h3>Kopi Luwak</h3>
<figure>
<img src="https://www.indoneo.com/wp-content/uploads/2017/03/luwak_coffee_for_sale.jpg" alt="Kopi Luwak Coffee">
<figcaption><i>Kopi luwak for sale in Indonesia.</i></figcaption>
</figure>
<blockquote>"It’s the world’s most expensive coffee, and it’s made from poop. Or rather, it’s made from coffee beans that are partially digested and then pooped out by the civet, a catlike creature. A cup of kopi luwak, as it’s known, can sell for as much as $80 in the United States."</blockquote>
<p><cite>The Disturbing Secret Behind the World’s Most Expensive Coffee</cite> by Rachael Bale. <a href="http://www.nationalgeographic.com/">National Geographic</a>. <time>April 29, 2016</time></p>
<!-- End Content Container -->
</section>
<!-- End Content Wrap -->
</div>
<!-- Push for Sticky Footer -->
<div class="push"></div>
<!-- End Sticky Footer Wrapper -->
</div>
<footer>
<nav id="top-row">
<a href="#">Locations</a>
<a href="#">Press</a>
<a href="#">Blog</a>
<a href="#">Jobs</a>
<a href="#">FAQ</a>
</nav>
<nav id="bottom-row">
<a href="#">Sustainability</a>
<a href="#">Contact</a>
</nav>
<p>Speciality Coffee Company, Torokvész út 95-97, Budapest</p>
</footer>
</body>
</html>
正しいです！ .content-containerに余白の代わりにパディングを追加する必要がありました。ありがとう！ –