Cara Mengatur Body HTML Menjadi dua bagian dengan efek CSS

Cara mengatur body html menjadi dua bagian dengan efek CSS. Pada bagian pertama kita sebut saja bagian fitur menu, bagian kedua adalah bagian post konten. Pada postingan sebelumnya saya menuliskan membuat form input data, kita anggap form input data tersebut sebagai post konten .

Membuat bagian nav menu (fitur menu) pada body yang akan kita letakan di kiri. Berikut Tag Htmlnya

<nav>
 <ul>
  <li>
  <h2>Menu Pilihan</h2>
  </li> 
  <li><a href="#">Form Input Data User</a></li>
  <li><a href="#">Data User</a></li>
  <li><a href="#">Informasi</a></li>
  </ul>
</nav>

Kode html di atas kita letakan di dalam class container, seperti di bawah ini

<div class="container">
        di sini
</div>

Selanjutnya kita kita menuliskan kode post konten yang tepat bersebelahan dengan fitur menu, berikut contoh kodenya

<div class="post-content">
<h2>Form Input Data</h2>
<form action=" ">
<label>Username :</label><br>
<input type="text" name="username">
<br><br>
<label>Nama Lengkap:</label><br>
<input type="text" name="namalengkap">
<br><br>
<label>Password:</label><br>
<input type="text" name="password">
<br><br>
<label>Alamat:</label><br>
<textarea type="text" name="alamat" rows="4" cols="50"></textarea>
<br><br>
<label>Agama:</label>
<select name="agama">
    <option value="islam">Islam</option>
    <option value="kristen">Kristen</option>
    <option value="hindu">Hindu</option>
    <option value="budha">Budha</option>
    <option value="katholik">Katholik</option>
  </select>
  <br><br>
<label>Jenis Kelamin:</label>
<input type="checkbox" name="jk1" value="lakilaki"> Laki-Laki
  <input type="checkbox" name="jk2" value="perempuan"> Perempuan
  <br><br>
<input type="submit" value="Kirim">
</form>
</div>

Kode tersebut kita letakan tepat di bawah kode </nav>. Setelah kita selesai menuliskan kode di atas secara berurutan kita dapat memberikan sentuhan css agar tampilannya terlihat sesuai dengan yang kita inginkan. Pertama kita akan memberikan kode css untuk class container

.container {
margin-bottom: 5px;
}

Seperti biasa kita akan meletakan kode css di dalam tag <style>...</style>. kode css di atas berfungsi memberikan jarak antara class container dengan footer dengan jarak 5px. Selanjutnya kita akan memberikan fungsi css pada bagian fitur menu (nav menu), berikut kode css nya

nav {
    float: left;
    max-width: 160px;
    margin: 0;
    padding: 1em;
    background-color: #cdccfe;
    height: 458px;
}

nav ul {
    list-style-type: none;
    padding: 0;
    background-color: #cdccfe;
}

nav ul li {
color: #000;
float: initial;
}
nav ul li h2 {
margin: 0px;
}

nav ul li a:hover {
background-color: #fff;
border-radius: 10px;
}
nav ul a {
    text-decoration: none;
    color: #000;
    text-align: left;
    padding: 5px;
}

Kita memberikan fungsi float left untuk memberikan posisi menu tersebut berada di sebelah kiri. fungsi list-style-type : none, berfungsi untuk menghilangkan symbol bulat pada fungsi list.

Saya memberikan :hover sebagai efek ketika krusor mouse berada pada fungsi :hover makan akan memberikan efek tampilan dari kode-kode css di dalamnya, seperti background-color: #fff, berfungsi memberikan efek warna. border-radius: 10px, berfungsi memberikan efek melengkung pada pojok-pojok kotak list menu. Yang terakhir kita memberika kode css untuk class post-content, berikut kodenya

.post-content {
    margin-left: 170px;
    border-left: 1px solid gray;
    overflow: hidden;
}

Jika kita sudah menuliskan semua kode di atas secara benar makan akan menampilkan halaman seperti di bawah ini

 Demikian tulisan saya tentang bagaimana cara mengatur body html menjadi dua bagian sederhana. Semoga bermanfaat untuk teman - teman semuanya. Jika ulasan saya kurang jelas boleh kita diskusi di komentar. Terima Kasih

Share this post