Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
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?
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>