Pages

Jumat, 24 Februari 2012

css template

<!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=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="template2.css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style1 {
    color: #000000;
    font-weight: bold;
}
.style3 {color: #000000}
-->
</style>
</head>


<body>

<div id="bungkus">

<div id="header">

<div id="logo">

</div>
<div id="menu">
  <ul id="MenuBar1"  style=" padding-right:20px; background:url(image/layout/box_06.png); "class="MenuBarHorizontal">
          <li><a href="index.html">Home</a> </li>
          <li><a href="profil.html">Profil</a></li>
          <li><a href="gallery.html">Gallery</a></li>
          <li><a href="Info.html">Informasi</a></li>
          <li><a href="folmulir.html">Pendaftaran</a></li>
  </ul>

    <div id="cari" >
      <form action="" method="get">
      <input type="text" />
      <input type="submit" value="Go" />
    </form>
    </div>
</div>
<div id="kolom1">
<div style="margin-bottom:1px; background:url(image/layout/images/box_09.png); margin-top:-10px; margin-left:10px; width: 183px;">
<div style="height:auto; width:100px; padding-left:10px; padding-bottom:10px; color:#FFFFFF; font-weight:bold; font-size:16px; margin-bottom:5px; padding-top:20px;">
<br />
Polling
</div>
<div style="padding-left:17px;">
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1">
  <p>
  <span class="style1">bagaimana pendapat anda<br />
  tentang web ini?</span>
  <span class="style3"><br />
    <label>
      <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_0" />
      menarik</label>
    <br />
    <label>
      <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_1" />
      biasa saja</label>
    <br />
    <label>
      <input type="radio" name="RadioGroup1" value="radio" id="RadioGroup1_2" />
      tidak menarik</label>
    </span><br />
  </p>
</form>
</div>
</div>
</div>

<div id="isi">
<div style="background:url(image/layout/images/box_22.png); left: 218px; top: 75px; width: 420px; height: 264px; float:left; margin-top:-170px; margin-left:200px;">
<div style="width:100px; padding-left:10px; padding-bottom:10px; color:#FFFFFF; font-weight:bold; font-size:16px; margin-bottom:5px; padding-top:20px;">
Posting
</div>

</div>
</div>

<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>

Ini cara membuat tamplate.css di dreamwevar

body{
background:#FFFFFF;
margin:auto;
margin-top: 5px;
font-family:Arial;
font-size:12px;
line-height:1.5em;
}
a{text-decoration:none;} a:hover{text-decoration:underline; color:#000000;}
#bungkus{
margin:auto;
width:1024px;
}
#bungkus #header{
background:#0099FF;
margin:auto;
width:1024px;
height:150px;
border-radius:10px 10px 0 0;
}
#bungkus #menu{
background:#0099FF;
margin:auto;
width:1019px;
height:29px;
margin-top:5px; padding-left:5px;
padding-top:5px;
padding-bottom:5px;
}
#bungkus #menu #cari{
margin-right:-5px; width:200px;
padding-bottom:5px;
float:right;
margin-top:3px;
}
#bungkus #isi{
background:#FFFFFF; margin:auto;
width:1017px;
margin-top:5px;
border:1px solid #0099FF;
padding-left:5px;
text-align:justify; }
#bungkus #isi #kolom1{
background:#FFFFFF;
margin:auto;
width:580px;
margin-top:5px;
float:left;
border:1px solid #0099FF;
padding:5px;
margin-bottom:5px; }
#bungkus #isi #kolom2{
background:#FFFFFF;
margin:auto;
width:400px;
margin-top:5px;
float:right;
border:1px solid #0099FF; padding:5px;
margin-bottom:5px;
margin-right:5px; }
#bungkus #foter{
background:#0099FF;
margin:auto; width:1024px;
height:30px;
margin-top:5px;
margin-bottom:5px;
border-radius: 0 0 10px 10px;
}
 .jarak{clear:both;}