background pada class tidak berfungsi

saya membuat html seperti ini

<!DOCTYPE html>
<html>
<head>
	<title>Facebook- Log In or Signup</title>
	<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>

	<!-- 1. Header-->
	<div class="content content-header clearfix">

		<div class="wrapper">

			<h1>facebook</h1>

			<form action="">
				<div class="group-form">
					<label for="email">Email or phone</label>
					<input type="email" name="email" id="email">
					<input type="checkbox" name="remember">
					<a href= "">Keep me logged In</a>
				</div>

				<div class="group-form">
					<label for="password">Password</label>
					<input type="password" name="password" id="password">
					<a href="#">Forget account</a>
				</div>

				<div class="group-form">
					<input type="submit" value="log in">
				</div>

			</form>

		</div>

	</div>
	<!-- 2. Content-->
	<div class="content content-middle clearfix">

		<div class="wrapper">
			<!-- info -->

			<div class="middle-left">
				<h2>Connect with frieds and the world arounf you on facebook</h2>

				<ul>
					<li>See photos and update <span>from friends in New feed</span></li>
					<li>Share what's new <span>in your life on your time line</span></li>
					<li>Find more <span>of what you'ra looking with facebook search</span></li>
				</ul>
			</div>

			<!-- for pendaftaran-->
			<div class="middle-right">
			</div>

		</div>

	</div>

	<!-- 3. Footer-->

</body>
</html>

dan css seperti ini

*{
	padding: 0px; margin: 0px;
	font-family: sans-serif;
}

.wrapper{
	width: 900px;
	margin: 0 auto;

}

h1{
	float: left;
	font-size: 40px;
	padding-top: 10px;
}

.content-header{
	padding: 10px 0;
	background: #3a5785;
	color: white;
}

.content-header:after{
	content: "";
	display: table;
	clear: both;
}

.content-header form{
	float: right;
}

.content-header label{
	font-size: 11px;
	border-bottom: 1px solid black;
}

.content-header label,
.content-header input{
	display: block;
}

.content-header input[type="checkbox"]{
	display: inline-block;
}

.group-form{
	float: left;
	margin-left: 10px;
}

.group-form a{
	color: white;
	font-size: 11px;
	text-decoration: none;

}

.content-header input[type="submit"]{
	background-color: #5972a8;
	color: white;
	font-weight: bold;
	padding: 2px;
	border:1px solid black
	font-size: 12px;
	margin-top: 10px;
}

/*--- content middle---*/
.content-middle{
background: #edf0f5;
}

.content-middle .middle-left,
.content-middle .middle-right{
	float: left;
	width: 50%;
	background: #edf0f5;
}

h2{
	margin-top: 50px;
	margin-bottom: 40px;
}

background pada ,content-middle kenapa tidak bisa berfungsi ya?

avatar yudayuda
@yudayuda

8 Kontribusi 4 Poin

Diperbarui 3 tahun yang lalu

Tanggapan

.content-middle di tutup oleh .wrapper dan .middle-left dan middle-right. dan juga class di html harus cocok dengan class yang ada di css .content-middle .middle-left sulit di baca oleh html

1 Jawaban:

Jawaban Terpilih

<div>float di-class .content-middle .middle-left meng-override element div parent-nya.<br>untuk itu di-remove property itu agar background-nya terlihat.<br><br></div><pre>/--- content middle---/ .content-middle { background: #edf0f5; }

.content-middle .middle-left, .content-middle .middle-right { /* float: left; */ width: 50%; background: #edf0f5; }</pre>

avatar soeleman
@soeleman

120 Kontribusi 147 Poin

Dipost 3 tahun yang lalu

Login untuk ikut Jawaban