Archive for 'CSS'

Sep200911

Admin

1

css table wizard

sudah pada tau definisi CSS kan,.. menurut wikipedia

Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML (wikipedia)

kalau menurut saya sendiri CSS ini merupakan pelengkap pada html, kita bisa mendesign website dengan menggunakan CSS. pada kesempatan kali ini saya mencoba untuk memberikan css table wizard, jadi dimana kita bisa memodifikasi table yang akan kita buat pada website, bisa di coba wizard berikut ini dan bisa di kembangkan sesuai dengan kemampuan dan keinginan. Tertarik untuk mencobanya, silahkan meluncur ke css table wizard

Jul200902

Admin

0

basic design template

belajar membuat website atau desain website memang tidak ada matinya, baru saja saya membaca artikel tentang “framework css1 line CSS Grid” yang intinya dengan memanfaatkan satu baris css, bisa yang bisa dikatakan seperti template majalah (membuat desain magazine theme).


<script language="JavaScript">

.dp50 {width:50%; float:left; display: inline; *margin-right:-1px; }

</script>

Dengan satu baris css tadi bisa digunakan untuk mengisi bermacam-macam kolom. antara percaya ndak percaya silahkan di coba sendiri atau bisa dilihat disini

Jun200910

Admin

0

css box

css box ini merupakan dasar dari css untuk pembuatan website, untuk penataan tulisan dan penataan menu-menu yang lain yang ada diwebsite. Berikut ini sedikit penjelasan tentang penggunaan css box. coba amati gambar dibawah ini

Jadi untuk menghitung lebar atau tinggi dari suatu box css harus juga diperhatikan padding dan border

Width  = width + padding-left + padding-right + border-left + border-right
Height = height + padding-top + padding-bottom + border-top + border-bottom

Mar200925

Admin

0

Border Image

Sering kali kita membuat CSS untuk border image, biasanya border image dipakai/dipasang ketika mouse yang kita gerakkan berada di atas gambar yang sudah kita siapkan atau istilahnya Rollover Image. Penggunaan border yang tidak tepat bisa menyebabkan layout dari Tampilan website akan berubah.

Bagaimana caranya agar layout yang sudah kita punya tidak berubah ketika sedang rollover image :

Kasus Biasanya


<style type="text/css">
#problem-css a img, #problem-css a   { border: none; float: left; }
#problem-css a:hover                     { border: 3px solid black; }
</style>

Solusi pakai inner border


<style type="text/css">
#inner-css a img, #inner-css a           { border: none; overflow: hidden; float: left; }
#inner-css a:hover                         { border: 3px solid black; }
#inner-css a:hover img                     { margin: -3px; }
</style>

Solusi pakai outer border


<style type="text/css">
#outer-css a img, #outer-css a           { border: none; float: left; }
#outer-css a                               { margin: 3px; }
#outer-css a:hover                         { outline: 3px solid black; }
</style>

Demo

** Selamat Belajar CSS **

Mar200912

Admin

0

css background untuk textarea

textarea adalah merupakan suatu tag pada HTML yang berfungsi sebagai tempat tulisan atau kode-kode HTML. Unruk membuat textarea ini menggunakan modus html seperti contoh dibawah ini


<textarea name="textarea" cols="50" rows="4"> tulisannya berada disini semua</textarea>

didalam textarea tersebut bisa di beri gambar atau background, dengan menambahkan css sebagai berikut


<style type="text/css">
textarea {
background-image: url(gambare.jpg);
height: 100px;
width: 150px;
}
</style>

selamat belajar css

Feb200922

Admin

1

desain daftar isi dengan html dan css

Membuat / menampilkan menu daftar isi seperti gambar berikut ini menggunakan CSS

css tutorial, website tutorial, free tutorial

Cara yang digunakan adalah, dengan mengatur <li> yang ada di CSS.

Free tutorial, Design CSS, Design Website


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.menu {
width: 500px;
list-style: none;
margin: 0 0 2em;
padding: 0;
font: 150%/100% Arial, Helvetica, sans-serif;
}
.menu li {
clear: both;
margin: 0;
padding: 0 0 1.8em 0;
position: relative;
border-bottom: dotted 2px #999;
list-style:none;
}
.menu strong {
background: #fff;
padding: 0 10px 0 0;
font-weight: normal;
position: absolute;
bottom: -.3em;
left: 0;
}
.menu em {
background: #fff;
padding: 0 0 0 5px;
font: 110%/100% Georgia, "Times New Roman", Times, serif;
position: absolute;
bottom: -.2em;
right: 0;
}
.menu sup {
font-size: 60%;
color: #666;
margin-left: 3px;
}

</style>
</head>

<body>
<div class="menu">
<p align="center">Daftar Isi</p>
<ul>
<li><strong>Photosop</strong> <em>01<sup>1</sup></em></li>
<li><strong>CSS Design</strong> <em>20<sup>2</sup></em></li>
<li><strong>Website Design</strong> <em>200<sup>3</sup></em></li>
<li><strong>Wordpress Installation </strong> <em>250<sup>4</sup></em></li>
<li><strong>Joomla Installation </strong> <em>350<sup>5</sup></em></li>
<li><strong>CMS</strong> <em>250<sup>95</sup></em></li>

</ul>

</div>
</body>
</html>

Selamat mencoba

Feb200913

Admin

0

hack ie css

pernah kan mengalami hal hal seperti ini saat mendesain css untuk website atau saat membuat Website

  • Saat kita melihat di browser Firefox, desain kita terlihat sempurna, begitu kita coba di Internet Explorer, desain yang sudah sempurna itu terlihat amburadul.
  • batas kanan kiri (margin) tidak sesuai dengan apa yang kita rencanakan ketika dibuka di Internet Explorer

Hal Seperti itu bisa kita atasi dengan membuat css untuk berbagai browser, misalkan kita buat css untuk internet explorer. Begitu kita buka dari IE secara otomatis bisa cari yang di IE

<link rel="stylesheet" type="text/css" href="common.css" />

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie.css" />
<![endif]-->

<!--[if IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-6.0.css" />
<![endif]-->

<!--[if lt IE 6]>
  <link rel="stylesheet" type="text/css" href="ie-5.0+5.5.css" />
<![endif]-->

Selamat Mencoba