INK Alitalya: Membuat Desain Layout Sederhana dengan Pemanfaatan Division

Sabtu, 12 Februari 2011

Membuat Desain Layout Sederhana dengan Pemanfaatan Division

Untuk menghasilkan desai web yang baik, tidak disarankan untuk menggunakan tabel, namun dengan memanfaatkan division.

jika ingin membuat desain web seperti di atas, sebelumnya kita buat dulu file CSS-nya. berikut kode CSS, disimpan dengan nama wrapper.css

#header{
    height: 80px;
    border: 1px solid black;}
#inner{float: left;margin: 5px 0;border: 1px solid black;}
    #content{
        float: left;
        width: 380px;
        height: 230px;
        border: 1px solid black;}
    #top {
        float: left;
        width: 544px;
        height: 100px;
        border: 1px solid black;}
    #right{
        float: right;
        width: 150px;
        height: 160px;
        border: 1px solid black;}
#sidebar{
    float: left;
    margin-right: 20px;
    width: 180px;
    height: 330px;
    border: 1px solid black;}
#footer {
    clear: both;
    height: 50px;
    border: 1px solid black;}
#wrapper{
    margin: auto;
    width: 750px;
    border: 1px solid black;}

Setelah itu kita buat kode HTML-nya

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional-dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>Desain Layout dengan Division</title>
    <link rel="stylesheet" href="wrapper.css" type="text/css" />
</head>

<body>
    <div id="wrapper">
        <div id="header">Header</div>
        <div id="inner">
            <div id="sidebar">Sidebar</div>
            <div id="top">Top</div>
            <div id="content">Content</div>
            <div id="right">Right</div>
        </div>
        <div id="footer">Footer</div>
    </div>
</body>
</html>