Berawal dari pertanyaan seorang member di forum:

http://dremi.info/forum/viewtopic.php?f=25&t=415

Ni gw kasi sdikit tips bwat mengimplementasikan bagaimana cara membuat box html dengan roun

CSS for Rounded Box Style
Berawal dari pertanyaan seorang member di forum:

http://dremi.info/forum/viewtopic.php?f=25&t=415

Ni gw kasi sdikit tips bwat mengimplementasikan bagaimana cara membuat box html
dengan rounded style (bergaya melengkung) menggunakan CSS, no table !!!

ni style na:

<style type="text/css">
#boxDiv
{
	margin:0px;
	padding:0px;
	position:absolute;
	width:197px;
	float:left;
}
#boxDiv h2
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: bold;
	color: #FFFFFF;
	text-decoration: none;
	background:url("images/kopi-hari-ini_01.gif") 0 0 no-repeat;
	width:117px;
	height:26px;
	padding-left:80px;
	padding-top:16px;
	margin:0px;
}
#boxDiv .content
{
	background:url("images/kopi-hari-ini_02.gif") 0 0 repeat-y #000000;
	width:177px;
	padding:10px;
	margin:0px;
}
#boxDiv p
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: normal;
	color: #000000;
	text-decoration: none;
	margin:0px;
	padding:0px;
}
#boxDiv .bottom
{
	background:url("images/kopi-hari-ini_04.gif") 0 0 no-repeat;
	width:197px;
	height:15px;
}
body {
	margin:5px;
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
}
a:link {
	color: #0099FF;
	text-decoration: underline;
}
a:visited {
	text-decoration: underline;
	color: #0099FF;
}
a:hover {
	text-decoration: none;
	color: #009900;
}
a:active {
	text-decoration: underline;
	color: #0099FF;
}
.spacer { margin-bottom:20px; }
</style>

dan ini implementasi pada body html na:

<!--just to cover all size box-->
<div id="boxDiv">

<!--start the title-->
<h2>Todays Cofee</h2>

<!--start the content-->
<div class="content">
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>

<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
<p>this is a content about cofee .... </p>
</div>

<!--start the bottom-->

<div class="bottom"></div>

</div>

Selamat mencoba and the ladies here come to me ….

Thanks, dr.emi

Share on Facebook

Popularity: 11% [?]

You may also like

• Web Design Layout Plus Implementasi jQuery Tab Content
• Design Form Smooth Shadow [dr.emi]
• Membuat Box Style Link Cantik ala dr.emi dengan CSS
• Beautifull Form dr.emi with CSS
• Web 2.0 Layout With CSS Part-4
• Web Base Controller System with NirCMD
• Building Administrator Manager for Table Relation Using PHP and jQuery
• Kode Etik Hacker
• E-Mail Signature, Salah Satu Sarana Internet Marketing Terbaik
• Semantic Code untuk mengoptimize HTML Web 2.0