Minggu, 19 September 2010

Dasar-dasar CSS #4

Sudah lama kita tidak membahas dasar-dasar CSS, untuk seri sebelumnya silakan lihat:
Dasar-dasar CSS #1
Dasar-dasar CSS #2
Dasar-dasar CSS #3
Nah, kali ini kita akan membahas tentang CSS untuk layout.

Sintaks-sintaks CSS untuk layout diantaranya:

1. background: Untuk mengeset background. Ada beberapa sintak untuk background, yaitu:

a. background-color: yaitu warna background.
b. background-image:url('URLGAMBAR.jpg'); yaitu URL gambar yang dijadikan background.
c. background-repeat: bernilai "repeat", "repeat-x", "repeat-y", dan "no-repeat". Maksudnya adalah pengulangan gambar. "repeat" artinya gambar akan diulang, memenuhi layar. "repeat-x" artinya gambar akan diulang sepanjang horizontal, "repeat-y" gambar akan diulang secara vertikal, sedangkan "no-repeat" artinya gambar hanya ditampilkan 1x, tidak akan diulang.
d. background-position: nilainya "nilaihorizontal nilaivertikal". Maksudnya adalah posisi latarbelakang dari layer (bagian div/span/element yang diberi latar). Misal: body{background-position:10px 30px} maka latar belakang dari bagian body akan diberi jarak 10 piksel antara batas pinggir kiri body dan 30piksel dari batas pinggir atas body. Anda juga bisa mengisinya dengan "top" "middle" "bottom" untuk nilaihorizontal, dan "left" "center" "right" untuk nilaivertikal (pilih salah satu).
e. background-attachment: Nilainya "fixed" dan "scroll". "fixed" artinya tampilan gambar latar belakang akan tetap sepanjang anda meng-scroll mouse anda.Sedangkan "scroll" kebalikannya.

2. width: Nilainya berupa nilai dalam piksel atau "auto". Untuk menentukan lebar elemen.
3. height: Idem dengan width bedanya height untuk menentukan tinggi elemen.
4. margin: Batas antara suatu element dengan elemen diluarnya. Nilainya bisa berupa auto atau nilai dalam piksel. Sintaksnya begini: margin:marginatas marginkanan marginbawah marginkiri. Atau jika nilai semua margin sama langsung saja margin: nilaimargin.
5. padding: Batas antara suatu batas (border) element dengan unsur element didalam element tersebut. Sintaksnya begini: padding:paddingatas paddingkanan paddingbawah paddingkiri. Atau jika nilai semua margin sama langsung saja padding: nilaimargin.
6. border: ada 3 unsur untuk border yaitu:

a. border-width: lebar dari border
b. border-color: warna dari border
c. border-style: gaya dari border, nilainya "solid" (biasa) "double" (dobel/dua garis) "groove" (groove) "inset" (menjorok kedalam) "outset" (menjorok keluar) "dotted" (bertitik-titik) "dashed" (bergaris-garis)

Jika ingin menspesifikkan dari suatu sisi, maka langsung: border-bottom: gayaborder lebarborder warnaborder (misal: border-bottom:solid 1px black jgn diputer2 ye... (fish_hit)) *border-bottom untuk bagian bawah, sedangkan border-top bagian atas, border-left bagian kiri dan border-right bagian kanan.
7. position: posisi, nilainya "fixed" (tetap, akan melayang terus selama anda menscroll halaman, belum didukung IE (tongue)), "static" (diam, posisi default), "relative" (tergantung objek disekitarnya), "absolute" (dihitung dari pojok kiri atas layar, hampir sama seperti fixed, tetapi tidak akan ikut melayang ketika kita men-scroll mouse) . Setelah menentukan jenis posisi, kita harus menentukan:

a. pilih (top: atau bottom: jika pilih top artinya dihitung dari atas, sedangkan bottom sebaliknya)
b. pilih (left: atau right:. jika pilih left nilai akan dihitung dari kiri, sedangkan right sebaliknya.

8. z-index: z-index adalah posisi suatu elemen dari dasar dokumen, jika tidak diset maka defaultnya 0. Misalnya ada 3 buah buku ditumpuk, maka buku terbawah mempunyai z-index 0, buku ke2 daribawah:1, dan buku teratas:2.
9. visibility: nilainya hanya 2, yaitu "visible" dan "hidden". Visible artinya kelihatan, kalo hidden ya artinya tersembunyi! (ninja)
10. display: nilainya "none" "inline" "block". Jika none maka tidak akan ditampilkan, inline ditampilkan dalam sebaris (biasanya untuk navigasi menu horizontal) dan block akan ditampilkan secara perbaris. Untuk display "none" dan visibility "hidden" perbedaannya adalah, untuk display "none" elemen didalamnya tidak akan ditampilkan, sedangkan visibility "hidden" akan tetap ada ruang untuk elemen tersebut, namun elemennya disembunyikan.

Supaya lebih jelas, silakan bikin file ini dengan notepad lalu simpan dengan nama belajarCSSpart4.html!

<html>
<head>
<title>Belajar CSS - Part 4</title>
<style type="text/css">
<!--
#left{
background:green;
color:#ccc;
float:left;
width:150px;
height:200px;
margin:10px;
padding:20px;
border-color:black;
border-width:3px;
border-style:inset;
}
#right{
background:green;
color:white;
float:right;
width:300px;
height:auto;
margin-right:10px;
border-bottom-width:10px;
border-bottom-color:purple;
border-bottom-style:solid;
}
#piksed{
position:fixed;
top:10px;
left:250px;
background:green;
color:black;
z-index:10;
width:100px;
}
#footer{
clear:both;
font-family:Arial, Tahoma, Verdana;
text-align:center;
}
#hidden{
visibility:hidden;
}
#none{
display:none;
}
-->
</style>
</head>
<body>
<div id="left">
Ini bagian sidebar, bisa diisi dengan apasaja.<br/><br/>
<a href="#">Home</a><br/>
<a href="#">About</a><br/>
<a href="#">Contact</a><br/>
<a href="#">Sitemap</a><br/><br/>
Tetap aje pjgnya 200px meski kontennya bejibun! bejibun! bejibun! bejibun! bejibun isinye!

</div>
<div id="right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum.
</div>
<div id="footer">
Belajar CSS - Part 4 | by Muhammad Rizki Fadillah
</div>
<div id="piksed">
Ini bagian fixed...<br/><br/>
Hebat kan, bisa melayang...
</div>
Ada apa ini? <span id="hidden">
Anda-anda pada nggak bakal bisa ngeliat teks ini!
</span> Betul?<br/><br/>
Ada yang tersembunyi? <span id="none">MEMANG BETUL ADA YANG TERSEMBUNYI DISINI! </span>Betulkan?
</body>
</html>
Jika file tersebut dieksekusi, maka hasilnya kira-kira akan seperti berikut.
Dasar-dasar CSS edisi 4 selesai sampai disini. Eits! (nottalking) masih ada 1 edisi lagi, jadi tunggu saja!


Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Buzz It

Artikel Menarik Lainnya



4 komentar:

suparno mengatakan...

MAKASIH ILMUNYA MAS SANGAT BERMANFAAT BUAT KITA YANG MASIH BELAJAR NIH.

dodatki krawieckie mengatakan...

Nice post, terus blogging

Pusat Info Dunia Maya mengatakan...

thx mas,,,
ilmunya,,
bermanfaat,,

kunjungi blog saya juga,,
mari berteman mas,,

Nugs mengatakan...

Tips yang sangat bermanfaat..

Posting Komentar

Apa pandapat anda terhadap artikel ini? Berkomentarlah tanpa rasa malu, ragu dan takut.

Komentar diluar tanggung jawab pemilik blog. Jika anda berkomentar yang berbau pornografi atau sara, maka itu risiko anda sendiri.

Jika anda mengirimkan komentar spam, maka akan saya hapus.

Jika anda tidak ingin komentar anda ditampilkan, silakan kirimkan e-mail di halaman email me.

Jika anda ingin berceloteh bebas, silakan tuju halaman ini.

Anda dapat menggunakan beberapa tag HTML seperti <b>, <i>, <u>, <a>, <strike>, <sub>, <sup>, dan lain-lain. Anda juga dapat menggunakan emoticon Plurk seperti (lmao) (taser) (haha).

Untuk link exchange bisa dilakukan dihalaman ini, sedangkan banner exchange dihalaman ini. Permintaan link exchange dan banner exchange selain dihalaman tersebut tidak akan dilayani.



Emoticon yang dapat digunakan [Tampilkan] [Sembunyikan]



:-))
:-)
:-D
(lol)
:-p
(woot)
;-)
:-o
X-(
:-(
:'-(
:-&
(K)
(angry)
(annoyed)
(wave) | (bye)
B-)
(cozy)
(sick)
(:
(goodluck)
(griltongue)
(mmm)
(hungry)
(music)
(tears)
(tongue)
(unsure)
(highfive)
(dance)
(blush)
(bigeyes)
(funkydance)
(idiot)
(lonely)
(scenic)
(hassle)
(panic)
(okok)
(yahoo)
(cry)
(doh)
(brokenheart)
(drinking)
(girlkiss)
(rofl)
(money)
(rock)
(nottalking)
(party)
(sleeping)
(thinking)
(bringit)
(worship)
(applause)
8-)
(gym)
(heart)
(devil)
(lmao)
(banana_cool)
(banana_rock)
(evilgrin)
(headspin)
(heart_beat)
(ninja)
(haha)
(evilsmirk)
(eyeroll)
(muhaha)
(taser) | (rammi)
(banana_ninja)
(beer)
(coffee)
(fish_hit)
(muscle)
(smileydance)
(fireworks)
(goal)
(bzzz)
(dance_bzz)
(Русский)
(code)
(morning)

Cara menggunakan: ketikkan emoticon yang diinginkan. Untuk yang ada pemisah berupa "|" maka itu adalah alternatif. Seperti (wave) | (bye) maka bisa (wave) bisa (bye)


Pengikut

Follow via NetworkedBlogs



Jangan lupa jadi fans Muhammad Rizki Fadillah's Blog di Facebook. Klik link di bawah ini.

http://www.facebook.com/pages/Tips-Trik-Matematika-Tutorial-Blogging-Muhammad-Rizki-Fadillahs-Blog/277782561876

Setelah mengklik link diatas, klik tombol Become A Fan untuk menjadi fans Muhammad Rizki Fadillah's Blog.