0
CSSを使用して、このウェブサイトのニュースレターセクションに暗い背景色を追加しようとしています。代わりに、ほとんどのページが背景色を表示します。私は誤ってdivやセクションを開いたままにしておくことを確認するためにHTML文書をチェックしましたが、何も見つかりませんでした。 私のページの75％が「ニュースレター」セクションとして認識されている理由は誰にでも分かりますか？ HTML/CSSのセクションに背景色を追加する際にエラーが発生しました
/* Will prevent padding from affecting the width of our columns */
* {
box-sizing: border-box;
}
html, body {
font-family: 'Open Sans',sans-serf;
}
.clearfix:before, .clearfix:after {
content: " ";
display: table;
}
/* Prevents floating elements on either side. */
.clearfix:after {
clear: both;
}
.wrapper {
width: 1440px;
max-width: 90%;
margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 300;
}
/* Header */
#top_header {
padding: 1.5em 0;
}
#top_header .logo {
float: left;
text-transform: uppercase;
font-size: 1.15em;
font-weight: 700;
}
#top_header .logo span {
font-weight: 300;
color: #73e298;
}
#top_header #main_nav {
float: right;
font-size: .9em;
padding-top: 1em;
}
#top_header #main_nav a {
color: #8b8b9f;
text-decoration: none;
margin-left: 1em;
}
#banner {
background: url(../images/banner_background.jpg);
background-repeat: no-repeat;
background-size: cover;
width:100%;
padding: 6.5em, 0;
}
#banner #banner_content_wrapper {
width: 900px;
max-width: 90%;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center
}
#poster {
width: 275px;
position: relative;
float: left;
}
#poster .featured_image {
width: 100%;
max-width: 100%;
border-radius: .5em;
-webkit-box-shadow: 0px 0px 76px 0px rgba(0, 0, 0, 0.47);
-moz-box-shadow: 0px 0px 76px 0px rgba(0, 0, 0, 0.47);
box-shadow: 0px 0px 76px 0px rgba(0, 0, 0, 0.47);
}
/* Moves play button to center of poster image */
#poster .play_button {
position: absolute;
width: 80px;
left: 50%;
top: 50%;
margin: -40px 0 0 -40px;
}
/* Moves Deadpool movie info to the right of the image. With better spacing */
#content {
float: left;
width: 500px;
margin-left: 100px;
}
/* Changes Deadpool title to white, increases font size, and adjusts spacing in the display*/
#content .title {
display: inline;
font-size: 1.75em;
color: #FFFFFF;
}
/* Rating system now side by side with title instead of below.*/
#content .ratings {
display: inline;
margin-left: 1em;
}
/* Adds color and increases size of stars */
#content .ratings i {
color: #73e298;
font-size: 1.35em;
margin: 0 .15em;
}
/* Changes last star to a grey color */
#content .ratings .inactive {
color: #48494d;
}
/* Changes description color to white which shows up better with the background. Double spaces description as well.*/
.description {
color: #bbbebf;
font-size: 1em;
line-height: 2;
}
.info {
color: #FFFFFF;
font-size: .8em;
font-weight: 700;
margin-top: 3em;
}
.info span {
margin: 0 .5em;
}
.row {
width: 100%
}
/* Organizes images horizontally */
.post {
width: 14%; /* 100% /6(images) -2.5% */
float: left;
margin-right: 2.5%;
}
/* Shrinks images to playing card size. Adds space to images */
.post img {
width: 100%;
max-width: 100%;
border-radius: .5em;
}
.post .title {
font-size: 1.25em;
margin: 1em 0 0 0;
color:#252529;
}
/* Lightens the rating and mins. Slight size and margin adjustment */
.post_info {
font-size: .75em;
color: #8b8b9f;
margin: 0.5em 0;
}
/* Better spacing between top movies and top shows*/
#top_movies, #top_shows {
padding: 5em 0;
}
#top_movies, #top_shows header {
padding: 0 0 1.5em 0;
}
#top_movies, #top_shows header h2, .view_more {
display: inline;
}
#top_movies, #top_shows h2 {
font-size: 1.75em;
}
#top_movies, #top_shows, .view_more {
float: right;
font-size: .8em;
margin: .75em 3.5% 0 0;
}
/*Adds border between popular movies and tv sections*/
#top_movies {
border-bottom: 1px solid #d4d4d4;
}
#newsletter {
padding: 5em 0;
text-align: center;
background: #2a2a2e;
}
#newsletter .newsletter_inner{
width: 600px;
margin: 0 auto;
}
#newsletter h2 {
font-size: 1.75em;
color:#FFFFFF;
}<!DOCTYPE html>
<html>
<head>
<title>Movies & TV | Dan Mayle </title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<!--Header including navigation bar-->
<header id="top_header" class="clearfix">
<div class="wrapper">
<h1 class="logo">Movies<span>&</span>TV</h1>
<nav id="main_nav">
<a href="#">Movies</a>
<a href="#">TV Shows</a>
<a href="#">Celebs & Photos</a>
<a href="#">News</a>
</nav>
</div>
</header>
<section id="banner" class="clearfix">
<div id="banner_content_wrapper">
<div id="poster">
<img src="images/movies/deadpool.jpg" alt="Deadpool Movie Poster" class="featured_image">
<img src="images/play_button.png" alt="Play Trailer" class="play_button">
</div>
<div id="content">
<h2 class="title">Deadpool</h2>
<div class="ratings">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star inactive"></i>
</div>
<p class="description">A former Special Forces operative turned mercenary is subjected to a rogue experiment that leaves him with accelerated healing powers, adopting the alter ego Deadpool.</p>
<p class="info">R <span>|</span> 108 min <span>|</span> Action, Adventure, Comedy <span>|</span> 12 February 2016</p>
</div>
</div>
</section>
<section id="top_movies" class="clearfix">
<div class="wrapper">
<header class="clearfix">
<h2>Popular Movies</h2>
<p class="view_more">View All Movies</p>
</header>
<div class="row">
<div class="post">
<img src="images/movies/the-martian.jpg" alt="The Martian">
<h3 class="title">The Martian</h3>
<p class="post_info">PG13 | 144 Minutes</p>
</div>
</div>
<div class="row">
<div class="post">
<img src="images/movies/inside-out.jpg" alt="Inside Out">
<h3 class="title">Inside Out</h3>
<p class="post_info">PG | 95 Minutes</p>
</div>
</div>
<div class="row">
<div class="post">
<img src="images/movies/jurassic-world.jpg" alt="Jurassic World">
<h3 class="title">Jurassic World</h3>
<p class="post_info">PG13 | 124 Minutes</p>
</div>
</div>
<div class="row">
<div class="post">
<img src="images/movies/mad-max.jpg" alt="Mad Max">
<h3 class="title">Mad Max: Fury Road</h3>
<p class="post_info">R | 120 Minutes</p>
</div>
</div>
<div class="row">
<div class="post">
<img src="images/movies/star-wars.jpg" alt="Star Wars">
<h3 class="title">Star Wars: The Force Awakens</h3>
<p class="post_info">PG13 | 109 Minutes</p>
</div>
</div>
<div class="row">
<div class="post">
<img src="images/movies/avengers.jpg" alt="The Avengers">
<h3 class="title">Avengers: Age Of Ultron</h3>
<p class="post_info">PG13 | 141 Minutes</p>
</div>
</div>
</div>
</section>
<section id="top_shows" class="clearfix">
<div class="wrapper">
<header class="clearfix">
<h2>Popular Shows</h2>
<p class="view_more">View All Shows</p>
</header>
<div class="row">
<div class="post">
<img src="images/tv_shows/walking-dead.jpg" alt="The Walking Dead">
<h3 class="title">The Walking Dead</h3>
<p class="post_info">TV-MA | Season 4</p>
</div>
</div>
<div class="row">
<div class="post">
<img src="images/tv_shows/game-of-thrones.jpg" alt="Game Of Thrones">
<h3 class="title">Game Of Thrones</h3>
<p class="post_info">TV-MA | Season 6</p>
</div>
</div>
<div class="row">
<div class="post">
<img src="images/tv_shows/breaking-bad.jpg" alt="Breaking Bad">
<h3 class="title">Breaking Bad</h3>
<p class="post_info">TV-MA | Season 5</p>
</div>
</div>
<div class="row">
<div class="post">
<img src="images/tv_shows/empire.jpg" alt="Empire">
<h3 class="title">Empire</h3>
<p class="post_info">TV-14 | Season 2</p>
</div>
</div>
<div class="row">
<div class="post">
<img src="images/tv_shows/master-of-none.jpg" alt="Master of None">
<h3 class="title">Master of None</h3>
<p class="post_info">TV-MA | Season 1</p>
</div>
</div>
<div class="row">
<div class="post">
<img src="images/tv_shows/mr-robot.jpg" alt="Mr Robot">
<h3 class="title">Mr Robot</h3>
<p class="post_info">TV-14 | Season 1</p>
</div>
</div>
</div>
</section>
<section id="newsletter">
<div class="newsletter_inner">
<h2>Get the best Movie & TV Show trailers straight in your inbox each week.</h2>
<div class="sign_up_form">
<input type="text" placeholder="First Name">
<input type="email" placeholder="Email Address">
<button class="button">Subscribe</button>
</div>
</div>
</section>
<footer id="main_footer">
<p class="logo">Movies<span>&</span>Stuff</p>
<p class="copyright">©2016 Movies & Stuff. All Rights Reserved.</p>
<div class="links">
<a href="#">Terms of Service</a>
<a href="#">Privacy Policy</a>
</div>
</footer>
</body>
</html>
デモがありますか？ – Ricky
「float：right;」を削除します。 #top_moviesと#top_showsでそれを修正します。代りにマージン/パディングを使用して配置することができます – ryan