Contoh template dengan Margin Padding Border dan Outline

share kali ini, kita akan membuat box/badan, sidebar-kiri, sidebar-kanan dan footer, kan palsu kalau ngebahas tentang css trus ngga bisa mempraktekanya

Di masa lalu, pemimpin adalah bos. Namun kini, pemimpin harus menjadi partner bagi mereka yang dipimpin. Pemimpin tak lagi bisa memimpin hanya berdasarkan kekuasaan struktural belaka. Ken Blanchard

share kali ini, kita akan membuat box/badan, sidebar-kiri, sidebar-kanan dan footer, kan palsu kalau ngebahas tentang css trus ngga bisa mempraktekanya

Last Modif at July 10th, 2011

share kali ini, kita akan membuat box/badan, sidebar-kiri, kanan dan footer.
kan palsu kalau ngebahas tentang css trus ngga bisa mempraktekanya :malu
ok langsunga saja ya!

  • buka notepad
  • lalu copy style/markup code dibawah
  • save as(pilih all types)
  • dengan nama contohcssmodel.htm

ini codenya(agak panjang)

<html>
<head>
<title>contoh penerapan margin, padding, border dan outline</title>
<meta content="indam url:http://www.indaam.net" name="author"/>
<style type="text/css">
/*misal tag body*/body{
background-color:pink;/* warna latar belakang body pink*/
margin:0 auto 10px auto;/* jarak-luar atas 0, kiri dan kana auto, sedangkan bawah 10px */
padding:5px;/* jarak/batas dalam masing-masing 5px*/
width:800px;/* lebar 800px*/
}
/*mulai bagian header*/
#pembentuk-headernya{
height:200px;/* tingginya 200px*/
clear:both;/*fungsi ini agar agar ruas kanan-dankiri tidak bisa diisi dengan bidang lain */
margin:0 auto;/*jarak luar atas bawah 0, kiri-kanan auto */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#pembentuk-headernya .judul{
/*style ini untuk judulnya*/
padding:10px 0 0 20px;/*jarak dalam atas 10px, kanan dan bawah 0, sedangkan kiri 20px*/
font-size:40px;/* ukuran font 40px*/
text-transform:capitalize;/* setiap kata diawali dengan huruf kapaital*/
font-family:times;/* font family times*/
}
#pembentuk-headernya .deskripsinya{
padding:10px 0 0 20px;/*jarak dalam atas 10px, kanan dan bawah 0, kiri 29px*/
font-size:20px;/* ukuran font 20px*/
}
/*bagian header selesai*/
/*mulai sidebar-kiri*/
#sidebar-kiri{
min-height:1400px;/* tinggi minimal*/
float:left;/*menekan kekiri */
width:200px;/*lebar 200px */
margin:10px 0;/*jarak luar atas-bawah 10px, kiri-kanan 0 */
background-color:white;/* warna latar belakang putih*/
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-bottomleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#sidebar-kiri .anggapwidget, #sidebar-kanan .anggapwidget{
min-height:300px;/* tinggi minimal 300px*/
clear:both;/*fungsi ini agar agar ruas kanan-dankiri tidak bisa diisi dengan bidang lain */
margin:5px;/*jarak luar masing-masing 5px */
background-color:pink;/* warna latar belakang pink*/
-moz-border-radius:10px;/* */
}
#sidebar-kiri h2{
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double white;/* garis bawah lebar tebal 2px, style double warna putih*/
font-size:20px;/* ukuran font 20px*/
text-align:center;/* text rata tengah */
text-transform:capitalize;/*setiap kata diawali dengan huruf besar/kapaital */
}
/*bagian sidebar-kiri selesai*/
/*mulai badan utam*/
#badan-utamanya{
min-height:920px;/* tinggi minimal 920px*/
float:left;/* menekan kekiri*/
width:400px;/* lebar 400px*/
margin:10px;/*jarak luar masing-masing 10px */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#badan-utamanya h2{
/*style ini untuk judul badan h2*/
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double pink;/*garis bawah tebal 2px double, warna pink */
font-size:22px;/* ukuran font 22px*/
text-align:left;/*text rata kiri */
text-transform:capitalize;/* setiap kata diawali dengan huruf kapital/besar*/}
#badan-utamanya .isinya{
/*style ini untuk isi badan*/
margin:10px;/* jarak luar masing-masing 10px*/
font-size:17px;/* ukuran font 17px */
text-indent:20px;/* jrak awal paragraf*/
}
/*bagian badab selesai*/
/*mulai sidebar kanan*/
#sidebar-kanan{
min-height:1400px;/* tinggi minimal 600px*/
float:right;/* menekan ke kanan*/
width:180px;/* lebar 180px*/
margin:10 0 0 0;/*jarak luar atas 10, kiri-kanan-bawah 0 */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-bottomleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#sidebar-kanan h2{
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double pink;/*garis bawah tebal 2px titik-titik, warna pink */
font-size:18px;/*ukuran font */
text-align:right;/* text rata kanan*/
text-transform:capitalize;/* setiap kata diawali dengan huruf besar*/
}
#by-indam{
outline:white dotted 16px;/*garis luar tebal 16px titik-titik, warna putih */
min-height:40px;/*minimal tinggi 40px */
margin:10px auto;/* jatak luar atas dan bawah 10px, kiri-kanan auto*/
background-color:white;/* warna latar belakang putih*/
-moz-border-radius-bottomright:10px;/* */
-moz-border-radius-bottomleft:10px;/* */
}
#by-indam p{
text-align:right;/*text rata kanan */
margin:0;/*jarak luar masing-masing 0 */
padding:5px 10px;/* jarak dalam atas-bawah 5px, kiri-kanan 10px*/
}
</style>
</head>
<body>
<!-- dari sini pembentuk header --------------------------------------------->
<div id="pembentuk-headernya">
<!-- mulai deri sini judul header -->
<h1 class="judul">judul website sobat</h1>
<!--// //sampai disini judul header -->
<!--daisini deskripsi -->
<p class="deskripsinya">misal disini adalah deskripsi blog sobat</p>
<!-- ////sampai disini deskripsi -->
</div>
<!-- ////sampai disini pembentuk header --------------------------------------------->
<!-- dari sini sidebar kiri --------------------------------------------->
<div id="sidebar-kiri">
<!-- dari sini isi widget sidebar -->
<div class="anggapwidget">
<h2>judul sidebar kiri</h2>
</div>
<div class="anggapwidget">
<h2>judul sidebar kiri 2</h2>
</div>
<div class="anggapwidget">
<h2>judul sidebar kiri 3</h2>
</div>
<!-- ////sampai sini isi widget sidebar -->
</div>
<!-- //sampai disini sidebar kiri --------------------------------------------->
<!-- dari sini badan utama -->
<div id="badan-utamanya">
<h2>anggap disini adalah judul postingan</h2>
<!-- dari sini isi badan utama -->
<div class="isinya">
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text ini adalah text
<blockquote>&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;
&amp;lt;title&amp;gt;contoh penerapan margin, padding, border dan outline&amp;lt;/title&amp;gt;
&amp;lt;meta content="indam url:http://www.indaam.net" name="author"/&amp;gt;
&amp;lt;style type="text/css"&amp;gt;
/*misal tag body*/body{
background-color:pink;/* warna latar belakang body pink*/
margin:0 auto 10px auto;/* jarak-luar atas 0, kiri dan kana auto, sedangkan bawah 10px */
padding:5px;/* jarak/batas dalam masing-masing 5px*/
width:800px;/* lebar 800px*/
}
/*mulai bagian header*/
#pembentuk-headernya{
height:200px;/* tingginya 200px*/
clear:both;/*fungsi ini agar agar ruas kanan-dankiri tidak bisa diisi dengan bidang lain */
margin:0 auto;/*jarak luar atas bawah 0, kiri-kanan auto */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#pembentuk-headernya .judul{
/*style ini untuk judulnya*/
padding:10px 0 0 20px;/*jarak dalam atas 10px, kanan dan bawah 0, sedangkan kiri 20px*/
font-size:40px;/* ukuran font 40px*/
text-transform:capitalize;/* setiap kata diawali dengan huruf kapaital*/
font-family:times;/* font family times*/
}
#pembentuk-headernya .deskripsinya{
padding:10px 0 0 20px;/*jarak dalam atas 10px, kanan dan bawah 0, kiri 29px*/
font-size:20px;/* ukuran font 20px*/
}
/*bagian header selesai*/
/*mulai sidebar-kiri*/
#sidebar-kiri{
min-height:1400px;/* */
float:left;/*menekan kekiri */
width:200px;/*lebar 200px */
margin:10px 0;/*jarak luar atas-bawah 10px, kiri-kanan 0 */
background-color:white;/* warna latar belakang putih*/
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-bottomleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#sidebar-kiri .anggapwidget, #sidebar-kanan .anggapwidget{
min-height:300px;/* tinggi minimal 300px*/
clear:both;/*fungsi ini agar agar ruas kanan-dankiri tidak bisa diisi dengan bidang lain */
margin:5px;/*jarak luar masing-masing 5px */
background-color:pink;/* warna latar belakang pink*/
-moz-border-radius:10px;/* */
}
#sidebar-kiri h2{
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double white;/* garis bawah lebar tebal 2px, style double warna putih*/
font-size:20px;/* ukuran font 20px*/
text-align:center;/* text rata tengah */
text-transform:capitalize;/*setiap kata diawali dengan huruf besar/kapaital */
}
/*bagian sidebar-kiri selesai*/
/*mulai badan utam*/
#badan-utamanya{
min-height:920px;/* tinggi minimal 920px*/
float:left;/* menekan kekiri*/
width:400px;/* lebar 400px*/
margin:10px;/*jarak luar masing-masing 10px */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#badan-utamanya h2{
/*style ini untuk judul badan h2*/
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double pink;/*garis bawah tebal 2px double, warna pink */
font-size:22px;/* ukuran font 22px*/
text-align:left;/*text rata kiri */
text-transform:capitalize;/* setiap kata diawali dengan huruf kapital/besar*/}
#badan-utamanya .isinya{
/*style ini untuk isi badan*/
margin:10px;/* jarak luar masing-masing 10px*/
font-size:17px;/* ukuran font 17px */
text-indent:20px;/* jrak awal paragraf*/
}
/*bagian badab selesai*/
/*mulai sidebar kanan*/
#sidebar-kanan{
min-height:1400px;/* tinggi minimal 600px*/
float:right;/* menekan ke kanan*/
width:180px;/* lebar 180px*/
margin:10 0 0 0;/*jarak luar atas 10, kiri-kanan-bawah 0 */
background-color:white;/*warna latar belakang putih */
-moz-border-radius-topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
-moz-border-radius-bottomleft:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/
}
#sidebar-kanan h2{
margin:0;/*jarak luar masing-masing 0 */
padding:0;/*jarak dalam masing-masing 0 */
border-bottom:2px double pink;/*garis bawah tebal 2px titik-titik, warna pink */
font-size:18px;/*ukuran font */
text-align:right;/* text rata kanan*/
text-transform:capitalize;/* setiap kata diawali dengan huruf besar*/
}
#by-indam{
outline:white dotted 16px;/*garis luar tebal 16px titik-titik, warna putih */
min-height:40px;/*minimal tinggi 40px */
margin:10px auto;/* jatak luar atas dan bawah 10px, kiri-kanan auto*/
background-color:white;/* warna latar belakang putih*/
-moz-border-radius-bottomright:10px;/* */
-moz-border-radius-bottomleft:10px;/* */
}
#by-indam p{
text-align:right;/*text rata kanan */
margin:0;/*jarak luar masing-masing 0 */
padding:5px 10px;/* jarak dalam atas-bawah 5px, kiri-kanan 10px*/
}
&amp;lt;/style&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
&amp;lt;!-- dari sini pembentuk header ------------------------------&amp;gt;
&amp;lt;div id="pembentuk-headernya"&amp;gt;
&amp;lt;!-- mulai deri sini judul header --&amp;gt;
&amp;lt;h1&amp;gt;judul website sobat&amp;lt;/h1&amp;gt;
&amp;lt;!--// //sampai disini judul header --&amp;gt;
&amp;lt;!--daisini deskripsi --&amp;gt;
&amp;lt;p&amp;gt;misal disini adalah deskripsi blog sobat&amp;lt;/p&amp;gt;
&amp;lt;!-- ////sampai disini deskripsi --&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;!-- ////sampai disini pembentuk header ------------------------------&amp;gt;
&amp;lt;!-- dari sini sidebar kiri ------------------------------&amp;gt;
&amp;lt;div id="sidebar-kiri"&amp;gt;
&amp;lt;!-- dari sini isi widget sidebar --&amp;gt;
&amp;lt;div&amp;gt;
&amp;lt;h2&amp;gt;judul sidebar kiri&amp;lt;/h2&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;div&amp;gt;
&amp;lt;h2&amp;gt;judul sidebar kiri 2&amp;lt;/h2&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;div&amp;gt;
&amp;lt;h2&amp;gt;judul sidebar kiri 3&amp;lt;/h2&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;!-- ////sampai sini isi widget sidebar --&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;!-- //sampai disini sidebar kiri ------------------------------&amp;gt;
&amp;lt;!-- dari sini badan utama --&amp;gt;
&amp;lt;div id="badan-utamanya"&amp;gt;
&amp;lt;h2&amp;gt;anggap disini adalah judul postingan&amp;lt;/h2&amp;gt;
&amp;lt;!-- dari sini isi badan utama --&amp;gt;
&amp;lt;div&amp;gt;
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
ini adalah text ini adalah text ini adalah text
&amp;lt;/div&amp;gt;
&amp;lt;!-- //sampai disini isi badan ------------------------------&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;!-- ////sampai pembentuk badan utama -------------------------------&amp;gt;
&amp;lt;!-- dari sini sidebar kanan --&amp;gt;
&amp;lt;div id="sidebar-kanan"&amp;gt;
&amp;lt;!-- dari sini widget sidabar kanan --&amp;gt;
&amp;lt;div&amp;gt;
&amp;lt;h2&amp;gt;judul sidebar kanan&amp;lt;/h2&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;div&amp;gt;
&amp;lt;h2&amp;gt;judul sidebar kanan 2&amp;lt;/h2&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;div&amp;gt;
&amp;lt;h2&amp;gt;judul sidebar kanan 3&amp;lt;/h2&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;!-- ////sampai disini widget sidebar kanani -------------------------------&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;!--// //sampai disini sidebar kanan ------------------------------&amp;gt;
&amp;lt;div style="clear:both;/* */"&amp;gt;&amp;lt;/div&amp;gt;
&amp;lt;!-- dari sini anggap footer ------------------------------&amp;gt;
&amp;lt;div id="by-indam"&amp;gt;
&amp;lt;p&amp;gt;salam &amp;lt;a href="http://www.indaam.net" title="indam site" target="_blank"&amp;gt;indaam site&amp;lt;/a&amp;gt;&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;
&amp;lt;!-- ////sampai disini footer ------------------------------&amp;gt;
&amp;lt;!-- //sampai disini sidebar kiri --&amp;gt;
&amp;lt;!-- contoh ini bisa sobat gunakan untuk membuat themes! i love all frien's
sebenarnya masih mmau nambahin tapi cape nulisnya
semoga bermanfaat --&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
</blockquote></div>
<!-- //sampai disini isi badan --------------------------------------------->
</div>
<!-- ////sampai pembentuk badan utama ---------------------------------------------->
<!-- dari sini sidebar kanan -->
<div id="sidebar-kanan">
<!-- dari sini widget sidabar kanan -->
<div class="anggapwidget">
<h2>judul sidebar kanan</h2>
</div>
<div class="anggapwidget">
<h2>judul sidebar kanan 2</h2>
</div>
<div class="anggapwidget">
<h2>judul sidebar kanan 3</h2>
</div>
<!-- ////sampai disini widget sidebar kanani ---------------------------------------------->
</div>
<!--// //sampai disini sidebar kanan --------------------------------------------->
<div style="clear:both;/* */"></div>
<!-- dari sini anggap footer --------------------------------------------->
<div id="by-indam">
<p>salam <a href="http://www.indaam.net" title="indam site" target="_blank">indaam site</a></p>
</div>
<!-- ////sampai disini footer --------------------------------------------->
<!-- //sampai disini sidebar kiri -->
<!-- contoh ini bisa sobat gunakan untuk membuat themes! i love all frien's
sebenarnya masih mmau nambahin tapi cape nulisnya
semoga bermanfaat -->
</body>
</html>

keterangan

  • value cssnya terletak antara : (titik dua) dan ; (titik koma)
  • fungsi css adalah untuk merubah tampilan
  • kode dari /* sampai */ adalah komentar css, fungsi dari komentar ini agar kita teidak lupa pada value yang kita beri, komentar ini tidak akan berpengaruh terhadap value css
  • kode dari <!– sampai –> adala komentar html
  • silakan edit valuenya untuk belajar

semoga bermanfaat

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

2 thoughts on “Contoh template dengan Margin Padding Border dan Outline”

  1. Halo WebMaster
    Thanks 4 Sharing
    Bermanfaat sekali untuk belajar
    Izin berkeliling untuk membaca ya
    Keep Sharing Bro…

  2. wah mantab sekali , doakan saya supaya bisa seperti master.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-