Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
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>
