width(ID LEBAR) adalah salah satu property dalam css, sedangkan fungsinya ialah mengatur lebar bidang_tag yang kita berikan style. yups, saya pikir sobat sudah tahu!
value width
value width antara lain
- auto
- length(px, in, em)
- (percent)%
- inherit
width:auto;
value auto ini adalah nilai default dari stylenya, anggp jika sobat memulis sebuah style tanpa property width “sudah diberi nilai auto”
width:length(px, in, em)
value length ini bisa kita tentukan lebarnya, pilihanya beragam seperti px, in dan em. saya pribadi lebih suka memakai length(dalam px)
width:percent(%)
misal resolusi monitor anda 1200px, lalu anda membuat style body dengan width 100% maka sama dengan 1200px(semua orang juga tahu).
perlu diingat percent(%) mengambil nilai dari style sebelumnya(firefox, opera). misal style sebelumnya nilai widthnya 300px, lalu style didalamnya width:50%, maka style(width) yang didalamnya sama dengan 150px. dan jika sobat berpikir seperti itu, akan berbeda pada(internet exploler) dan sama pada firefox, opera. jadi rekomendasinya gunakan length(px, in, em) karena value ini sudah pasti(resolusi komputer itu berbeda-beda)
width:inherit
saya ngga pernah menggunakan!
contoh property width dalam inline style
contoh 1
code
<div style="margin:5px;background-color:red;width:400px;">
width:400px; width:400px; width:400px; width:400px; width:400px; width:400px; width:400px; width:400px; width:400px;
</div>
tampilan
contoh 2
code
<div style="margin:5px;background-color:red;width:5in;">
width:5in; width:5in; width:5in; width:5in; width:5in; width:5in; width:5in; width:5in; width:5in; width:5in;
</div>
tampilan
contoh 3
code
<div style="margin:5px;background-color:red;width:40em;">
width:40em; width:40em; width:40em; width:40em; width:40em; width:40em; width:40em; width:40em; width:40em;
</div>
tampilan
contoh width dalam internal style
perhatikan markup code di bawah
<html>
<head>
<title>css width</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
#bentuk-pertama{float:left;
background-color:red;
width:100px;
height:250px;
margin:5px;
}
#bentuk-kedua{
float:left;
background-color:red;
width:200px;
height:250px;
margin:5px;
}
#bentuk-ketiga{
float:left;
background-color:red;
width:300px;
height:250px;
margin:5px;
}
#bentuk-keempat{float:left;
background-color:red;
width:6in;
height:250px;
margin:5px;
}
#bentuk-kelima{
float:left;
background-color:red;
width:50em;
height:250px;
margin:5px;
}
#bentuk-keenam{
float:left;
background-color:red;
width:20%;
height:250px;
margin:5px;
}
</style>
</head>
<body>
<div id="bentuk-pertama">bentuk-pertama</div>
<div id="bentuk-kedua">bentuk-kedua</div>
<div id="bentuk-ketiga">bentuk-ketiga</div>
<div style="clear:both;/**/"></div>
<div id="bentuk-keempat">bentuk-peempat</div>
<div id="bentuk-kelima">bentuk-kelima</div>
<div id="bentuk-keenam">bentuk-kenam</div>
<div style="clear:both;/**/"></div>
<p>salam <a href="http://www.indaam.com" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>
untuk melihat hasilnya
- copy markup style diatas
- paste ke notepad
- save as (pilih all types) dengan nama contohcsswidth.htm
- jalankan(double click), atau
- open with (firefox, ie, opera, safari, chrome)
- silakan edit valuenya
- letak valuenya antara : (titik dua) dan ;(titik koma)
- selamat belajar
References
http://www.w3.org/Style/CSS
Sorry, formulir komentar sedang dalam perbaikan