Wednesday, 3 February 2016

Membuat Box Model Mengunakan Kode HTML Dan CSS

Setelah selesai belajar dasar-dasar css beserta stylenya, sekarang kita mulai memasuki materi yang lebih advance lagi. Yang akan kita bahas kali ini adalah box css. Didalam html, semua elemen seperti p, div, h dan lain-lain pada dasarnya dianggap kolom kotak yang membungkus isi (html) didalam css, istilah “model kotak / box” digunakan ketika berbicara tentang design dan tata letak.

Berikut ini adalah Script dari Kode HTML untuk membuat Box Model scriptnya ada di bawah ini:

Index.html

<!DOCTYPE html>
<html>
<head>
 <title>Link and list</title>
 <link rel="stylesheet" type="text/css" href="style.css">
 
</head>

<body>
 <div id="canvas">
  <div id="header">    
    <center>Contoh Header</center>

  </div>
  <div id="menu">
   <ul>
    <li class="utama"><a href="index.html">Beranda</a></li>
    <li class="utama"><a href="profile.html">Profile</a></li>
    <li class="utama"><a href="event.html">Event</a></li>
    <li class="utama"><a href="galery.html">galery</a></li>
    <li class="utama"><a href="contact.html">Contact</a></li>
   </ul>
  </div>
  <div id="isi">
   
   <center>Contoh isi</center>
  </div>
  <div id="footer">
   Copyright 2015 - All Reserved By Pemrograman web.
  </div>
 </div>
</body>
</html>

Dan untuk CSS.
style.css

body{
 font-family: sans-serif;
 font-size: 14px;
}
@media screen and (max-width: 700px) {
 #isi {
  width: auto;
  float: none;
 }
 #canvas {
  width: auto;
  float: none; 
 }
 #header {
  width: auto;
  float: none;
 }
 #menu {
  width: auto;
  float: none;
 }
 #isi {
  width: auto;
  float: none;
 }
 #footer {
  width: auto;
  float: none;
 } 
}
#canvas{
 margin: 0 auto;
 border:1px solid silver;
}
#header{
 background:yellow;
 height: 80px;
 width: 99%;
 padding: 10px 0px 0px 10px;
 
}
#header{
 font-size: 20px;
 padding: auto;

}
#menu{
 background-color: #ffffff;

}
#menu ul{
 list-style: none;
 margin: 0;
 padding: 0; 
 text-align: right;
}
#menu ul li{
 display: inline-table; 
}
#menu ul li:hover{
 background-color: #0033cc;
}

#menu ul li a{
 display: block;
 text-decoration: none;
 line-height: 40px;
 padding: 0 20px;
 color: #000000;

}
.utama ul{
 display: none;
 position: absolute;
 z-index: 2;
}
.utama:hover ul{
 display: block;
}
.utama ul li{
 display: block;
 background-color: #6cf;
 width: 140px; 
}
#isi{
 padding: auto;
 background-color: #6cf; 
 max-width: 100%;
 max-height: 100%;
 min-height: 400px;
 margin: 10px 10px 10px 10px;
 color: black;
}
#isi a {
 margin: 20px;
 margin: 10px 10px 10px 10px;
}
#isi a img {
 border: 1px;
}
#footer{
 text-align: center;
 padding: 30px;
 background-color: #ccc;

}

Hasilnya, browser akan menampilkan tabel seperti gambar di bawah ini..