min-width(ID lebar minimal) ini hampir sama dengan property width, bedanya fungsi dari min-width hanya mengatur lebar minimal saja, jadi jika content tadi lebarnya lebih(kelebihan *misal text*), maka tag yang kita bentuk dengan style min-width tadi akan bertambah lebar!?
ini berbeda dengan property width, jika kita mengisinya maka(akan) berada(anggap) terisi dibawahya lagi. jadi lebarnya ngga bertambah.
value min-width
berikut value min-width
- none
- length(px, in, em)
- (percent)%
- inherit
min-width:none;
anggap saja value none ini sama dengan(tanpa style min-width)
min-width:length(px, in, em)
value length ini bisa kita tentukan lebar minimalnya, pilihanya beragam seperti px, in dan em. saya pribadi lebih suka memakai length(dalam px)
min-width:percent(%)
misal resolusi monitor anda 1200px, lalu anda membuat style body dengan min-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 min-width:50%, maka style(min-width) yang didalamnya sama dengan 150px(dapat bertambah). dan jika sobat berpikir seperti itu, akan bernilai berbeda pada(internet exploler). ie membuat designer web menderita!
min-width:inherit
saya ngga pernah menggunakan!(ngga support di ie)
contoh property min-width dalam internal style
perhatikan code markup style dibawah!
<html>
<head>
<title>css min-width</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
#bentuk-pertamabentuk-pertama{float:left;
background-color:red;
min-width:100px;
height:250px;
margin:5px;
}
#bentuk-kedua{
float:left;
background-color:red;
min-width:200px;
height:250px;
margin:5px;
}
#bentuk-ketiga{
float:left;
background-color:red;
min-width:300px;
height:250px;
margin:5px;
}
#bentuk-keempat{float:left;
background-color:red;
min-width:6in;
height:250px;
margin:5px;
}
#bentuk-kelima{
float:left;
background-color:red;
min-width:50em;
height:250px;
margin:5px;
}
#bentuk-keenam{
float:left;
background-color:red;
min-width:20%;
height:250px;
margin:5px;
}
</style>
</head>
<body>
<div id="bentuk-pertamabentuk-pertama">
coba diisi
</div>
<div id="bentuk-kedua">
bentuk-kedua coba diisi
</div>
<div id="bentuk-ketiga">
bentuk-ketiga coba diisi
</div>
<div style="clear:both;/**/"></div>
<div id="bentuk-keempat">
bentuk-peempat coba diisi
</div>
<div id="bentuk-kelima">
bentuk-kelima coba diisi
</div>
<div id="bentuk-keenam">
bentuk-kenam coba diisi
</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 contohcssmin-width.htm
- jalankan(double click), atau
- open with (firefox, ie, opera, safari, chrome)
- silakan edit valuenya
- letak valuenya antara : (titik dua) dan ;(titik koma)
keterangan
- setelah dijalankan, coba isi dengan text pada (coba diisi)
- entar lebarnya akan bertambah, sesuai dengan isi dati bidang_tag_box itu
- selamat belajar
References
http://www.w3.org/Style/CSS
