CSS : Mengedit Colom Right

Mengedit Colom Right

Sebelumnya anda buiat dulu folder dengan nama BAB IV Mengedit Colom Right dan didalamnya anda buat folder lagi dengan nama images, lalu anda copy dari file gambar yang sudah saya sertakan di MATERI PRAKTEK CSS kedalam folder images.

Adapun filenya ada 7 file gambar :



Membuat File HTML Colom Right

Lalu anda buka software notepad ++ atau yang lain sesuai selera andadan anda tuliskan code html berikut ini :

<html>
<head>
<title>Membuat Layout Web</title>
<link href="style.css" rel="stylesheet" type="text/css"
media="all" />

</head>
<body>
<div id="container">
<div id="content">
<p>&nbsp;</p>
</div>
<div id="right">
<h2 class="member">Member Login</h2>
<form name="memberLogin" action="#" method="post">
<input type="text" name="name" class="txtBox" value="-
nama-anda-" />
<input type="password" name="name2" class="txtBox"
value="-password-" />
<a href="#">Register here</a>
<input type="submit" name="login" value="" class="login"
/>
<br class="spacer" />
</form>
<p class="bottom"></p>
<h2 class="categories">Categories</h2>
<ul>
<li><a href="#">Software</a></li>
<li><a href="#">Hardware.</a></li>
<li><a href="#">Belajar CSS </a></li>
<li><a href="#">Belajar PHP </a></li>
<li><a href="#">Belajar Wordpress </a></li>
<li><a href="#">Plugin Wordpress </a></li>
<li><a href="#">WP Themes </a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Testimonial</a></li>
<li class="noImg"><a href="#">Berita</a><br
class="spacer" />
</li>
</ul>
</div>
</body>
</html>

Kali ini agak rumit sedikit, karena pengaturan CSS ini lebih komplek, dan keterangan untuk kode html diatas adalah sebagai berikut ini :
  • Untuk colom right saya berencana membuat form login di bagian atas dengan mengambil gambar yang sudah saya siapkan, karena kalau hanya mengandalkan warna tampak kurang menarik dan ini akan membuat anda akan bertambah wawasan.
  • Dan dibawah form login akam saya buat untuk menaruh Categories dengan beberapa Categori dan jarak antar kata Categori akan saya buat titik-titik.
  • Saya sudah membuat tulisan H1 Member Login lalu form untuk input dengan 2 field text dan 1 tombol submit tanpa value.
  • Dibawah form login sudah saya buat text Categories dengan menggunakan H2 dengan 8 text Categories masing-masing dengan link “#“.
  • Masing-masing saya sudah beri selector , baik ID maupun class. Setelah itu anda simpan dengan nama colom-right.html.

Tampilan Hasilnya :


Membuat File CSS untuk colom right

Memang tampak gak menarik sama sekali bukan , tetapi anda jangan cemas, karena setelah anda beri CSS maka tampilan akan berubah sama sekali. Sekarang anda buat file CSS, ketikkan kode CSS berikut ini :

body {
font-family: Arial, Helvetica, sans-serif;
}
#container{
width:1000px;
margin:0 auto;
}
#content{
background-color:#EBEBEB;
width:700px;
height:521px;
float:left;
}
#right{
width:300px;
background-color:#EBEBEB;
float:left;
}
.member{
width:264px;
height:67px;
background:url(images/member_login.gif) 0 10px norepeat;
margin: 0 auto;
font-size:20px;
color:#FFCC00;
text-indent:50px;
line-height:50px;
}
form{
background:url(images/memberlogin_bg.gif) repeat-y;
width:228px;
padding:0 18px 0 18px;
margin:0 auto;
}
form input.txtBox{
width:206px;
height:25px;
border-left:#808080 solid 1px;
border-top:#808080 solid 1px;
border-right:#D4D0C8 solid 1px;
border-bottom:#D4D0C8 solid 1px;
color:#000000;
background-color:#FFFFCC;
margin:5 0 17px 0;
padding:0 0 0 20px;
}
form a{
font-size:12px;
font-weight:bold;
color:#FF6600;
text-decoration:underline;
padding:0 0 0 14px;
float:left;
background:url(images/register_here_bg.gif) 0 5px
no-repeat;
}
form a:hover{
text-decoration:none;
}
form input.login{
background:url(images/btn_login.gif) no-repeat;
width:53px;
height:13px;
border:none;
cursor:pointer;
float:right;
}
.bottom{
background:url(images/memberlogin_bot.gif) norepeat;
width:264px;
height:25px;
margin:0 0 5px 0;
margin:auto;
}
.categories{
font:bold;
line-height:40px;
font-size:24px;
color:#FFFFCC;
background-color:#FF9900;
padding:0 0 0 17px;
margin-top:30px;
}
ul{
width:238px;
padding:0 0 0 17px;
}
ul li{
display:block;
background:url(images/dot.gif) bottom repeat-x;
height:25px;
width:238px;
}
ul li a{
background:url(images/arrow.gif) 0 7px no-repeat;
font-size:14px;
color:#000000;
background-color:#EBEBEB;
text-decoration:none;
margin:0;
padding:3 0 3 14px;
display:block;
}
#right ul li a:hover{
color:#FFFFFF;
background-color:#FF9900;
}

Memang agak banyak pengaturan dari colom right ini, dan langsung saja akan saya beri penjelasan :
  • Body {…} adalah jika anda tidak mengatur secara khusus untuk jenis font maka pengaturan font akan diatur dari sini secara keseluruhan.
  • #container {…} seperti biasa penjelasannya seperti bab sebelumnya yaitu anda buat lebar dari halaman web dengan lebar 1000px terletak ditengah tetapi kali ini saya mencoba mengatur font default bukan dari sini melainkan dari body.
  • #content {…} adalah tempat untuk meletakkan content.
  • #right {…} pengaturan dari kolom right itu sendiri dengan nilai lebar 300 px, background color abu-abu ( #EBEBEB ) dan float:left.
  • .member {…} adalah selector class dari H2 text Member Login dengan pengaturannya lebar 264 px dan tinggi 67 px dan anda mengambil background gambar dari member_login.gif jarak dari kiri 0 dari atas 10px tanpa perulangan gambar (background:url(images/member_login.gif 0 10px no-repeat) dan margin 0 penempatan center ( auto ) lalu untuk ukuran font sebasar 20 px dengan warna kuning (#FFCC00) dengan jarak tulisan dari member login dari tepi sebesar 50 px ( text-indent: 50px ) dan jarak antar tulisan atas 50 px ( line-height:50px).
  • #form {…} untuk form dibuat background dengan menggunakan images yaitu : memberlogin_bg.gif dengan perulangan hanya dari atas kebawah (background:url(images/memberlogin_bg.gif) repeat-y) lebar 228 px , padding atas 0 , padding kanan 18 px padding bawah 0 padding kiri 18 px, lalu margin 0 auto.
  • form input.txtBox {…} ini untuk mengatur form input username dan password, anda buat lebar dari ukuran text field lebar : 206 px dan tinggi 25 px, anda buat border supaya lebih cantik dengan border kiri dan atas berwarna (#808080), border kanan dan bawah warna (#D4D0C8) type border solid lebar border 1 px lalu warna tulisan berwarna hitam ( #000000), warna text input kuning muda ( #FFFFCC ) dengan margin 5 0 17px 0 dan padding 0 0 0 20 px.
  • form a {…} untuk mengatur tulisan Register Here dengan pengaturan sebagai berikut ukuran tulisan 12 px, dengan tulisan tebal ( bold ) warna tulisan orange ( #FF6600 ) menggunakan underline, float left, padding 0 0 0 14 px dan disebelah kiri tulisan akan kita letakkan gambar centang tepat disebelah kiri tulisan (background:url(images/register_here_bg.gif) 0 5px no-repeat ).
  • form a:hover {…} untuk memberikan efek pada tulisan Register Here ketika mouse diarahkan ke tulisan dengan menghilangkan underline (text-decoration: none ).
  • form input.login {…} selector ini untuk mengatur dan memberi gambar pada submit login yang mana pada kode HTML kita tidak memberikan tulisan login pengaturannya sebagai berikut: Anda beri background image btn_login.gif tanpa perulangan gambar (background:url(images/btn_login.gif) no-repeat ), lebar 53 px, tinggi 13 px, tanpa border,float right, lalu tampilan cursor kita buat symbol tangan (cursor:pointer ).
  • .bottom {…} ini untuk menampilkan gambar bagian bawah form,yaitu dengan memberi background gambar memberlogin_bot.gif tanpa perulangan (background:url(images/memberlogin_bot.gif) norepeat) lebar 264 px , tinggi 25 px, dan kita memberi margin bawah 5px yang lain margin 0 (margin:0 0 5px 0) dan untuk menampilkan ditengah margin juga kita beri nilai auto ( margin : auto ). Untuk pengaturan form login sudah selesai dan ini mulai kita mengatur bagian Categories
  • .categories {…} bagian ini untuk mengatur tulisan Categories dengan pengaturan font tebal (bold), jarak tulisan atas-bawah 40 px (line-height:40px), ukuran besar font 24 px, warna tulisan kuning muda (#FFFF00) background warna orange (#FF9900) padding anda beri nilai 0 0 0 17px, lalu kita beri jarak dari atas 30px.
  • ul {…} ini untuk mengatur tempat untuk membuat tulisan bullet yaitu lebar 238 px dengan padding anda beri nilai 0 0 017px.
  • ul li {…} untuk mengatur tulisan dari categories dengan arah atas kebawah dengan melakukan pengaturan (display:block), lalu anda perlu membuat titik-titik diantara tulisan yaitu dengan memberikan gambar dot.gif posisi hanya di bawah dengan pengulangan gambar horizontal (background:url(images/dot.gif) bottom repeat-x),dengan tinggi 25 px dan lebar 238 px.
  • ul li a {…} selanjutnya anda melakukan pengaturan dari text dan kita perlu menaruh logo panah di depan text dengan images arrow.gif (background:url(images/arrow.gif) 0 7px no-repeat), ukuran font 14 px, warna font hitam (#000000),background color abu-abu (#EBEBEB)disamakan dengan yang lain,lalu kita hilangkan dulu underline (text-decoration:none), margin 0, padding 3 0 3 14px, lalu anda buat display:block (arah tulisan menurun). #right ul li a:hover {…} ini untuk memberi efek ketika mouse diarahkan kepada tulisan dengan memberikan warna background orange (#FF9900)dan warna tulisan berubah menjadi putih (#FFFFFF).

Kemudian anda simpan pada folder BAB IV Mengedit Colom Right dengan nama style.css dan nanti akan menjadi demikian




Lalu anda jalankan file colom-right.html dengan klik sebanyak 2 kali dan ini hasilnya :

Sudah berubah banyak bukan ? Semakin lama semakin asyik juga, kini anda bisa membuat kreasi yang lain dengan jalan merubah gambar serta ukuran.

Anda perlu sedikit mengerti photoshop!



Anda bisa kemateri selanjutnya yaitu : Mengedit Footer CSS.



Jika ada pertanyaan silakan berkomentar.

Jangan Lupa like dan share.

Belajar Pemrograman di fajaryusuf.com aja. :)



Disqus Comments