Css Design Ayirma Yardimci Olacak Biri Varmı?

/*  Silent Assassins Style Sheet
    --------------------------------------------------------------
   A free template from ClanTemplates ( http://www.clantemplates.com/ )
   Design by: Tails ( http://www.remcokruizinga.com/ )
   Coded by: Wex ( http://www.wexcode.com/ )
*/

body {
   background: #262626 url(_img/body_bg.gif) 0 0 no-repeat;
   font-family: Arial;
   font-size: 11px;
   color: #8e8e8e; }
a {
   color: #939379;
   text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header Elements */
h1, h2, h3, h4, h5, h6 { font-weight: bold; margin: 0 0 18px; }
h1 { font-size: 2.0em;}
h2 { font-size: 1.7em;}
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.0em; }
h6 { font-size: 0.8em; }

/* Text Elements */
p { line-height: 16px; margin: 0 0 18px; }
abbr, acronym { border-bottom: 1px dotted #9e9e9e; }
address { margin-top: 18px; font-style: italic; }
strong, th, thead, dt { font-weight: bold; }
cite, em, dfn, i, ins { font-style: italic; }
blockquote {
   font-style: italic;
   margin: 18px;
   padding: 0 0 0 18px;
   border-left: 3px solid #9e9e9e; }
pre, code, tt { font-family: 'andale mono', 'monotype.com', 'lucida console', monospace; }
tt { display: block; margin: 18px 0; line-height: 18px; }
small { font-size: 0.8em; }
sup {height:0;line-height:1;position:relative;top:-0.6em;vertical-align:baseline!important;vertical-align:bottom;}
sub {position:relative;top:0.3em;vertical-align:baseline;}
big {font-size:1.175em;}
hr {
   background: url(_img/nav_bg.gif) 0 0 repeat-x;
   height: 1px;
   margin: 0 0 18px;
   border: 0;
   clear: both; }
ol, ul { margin: 0 0 18px; }
.left { float: left; }
img.left { margin: 0 18px 18px 0; }
.right { float: right; }
img.right { margin: 0 0 18px 18px; }

/* Lists */
ul, ol { margin: 0 0 18px 18px; list-style-position:inside;}
ul { list-style: disc; }
ol { list-style-type: decimal; }
ol li, ul li {
   list-style-position: inside;
   margin:6px 0; }
ol ol { list-style: upper-alpha; }
ol ol ol {list-style: lower-roman; }
ol ol ol ol {list-style: lower-alpha; }
ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }
dl { margin: 0 0 18px 0; }
dl dt {
   font-weight: bold; margin:18px 0 6px; }
dd {
   margin-left: 18px;
   line-height:18px; }

/* Form Elements */
fieldset { margin: 0 0 18px 0; }
legend {
   font-weight: bold;
   font-size: 12px;
   margin: 0 0 6px; }
label {   
   cursor: pointer;
   display: block;
   clear: both; }
label input { vertical-align: middle; }
label input.checkbox, label input.radio { vertical-align: text-top; }
input, textarea, select {
   background: #2c2c2c;
   color: #8e8e8e;
   width: 250px;
   margin: 0 0 6px;
   border: 1px solid #464747;
   display: block; }
input, textarea, select {
   width: 250px;
   margin: 0 0 6px;
   display: block; }
select {
   width:262px;
   cursor: pointer; }
textarea {
   width: 674px;
   height:225px; }
input, textarea { padding:4px; }
input, button {
   cursor: pointer;
   width: auto;
   display: inline;
   margin: 0 6px 0 0; }

/* Tables */
table {
   font-size: 12px;
   margin: 0 0 18px;
   border-collapse: separate;
   border-spacing: 0; }
caption, th, td { text-align:left; }
th {
   color: #fdffcb;
   font-weight: bold;
   text-transform: uppercase; }
td { border-bottom: 1px solid #f6f6f6; }
.even td {
   background: #222222;
   color: #fff; }
th,td { padding: 6px 12px; }
tfoot { font-style: italic; }
caption { background: #f3f3f3;margin-bottom:9px;padding:3px;text-align:center; }
   
/* Side
-------------------------*/
#side {
   float: left;
   width: 242px; /* 282 - 40 */
   padding: 0 0 0 40px; }
   
/*----- Logo ----------*/
#logo {
   background: url(_img/logo.png) 100% 100% no-repeat;
   float: left;
   width: 245px;
   height: 107px;
   margin: 0 0 15px -40px; }
#logo a {
   width: 245px;
   height: 107px;
   text-indent: -10000px;
   display: block; }

/*----- Blocks ----------*/
.block {
   float: left;
   text-align: right;
   line-height: 1;
   width: 202px;
   clear: both; }
.block h2.block-title {
   font-family: Verdana;
   font-size: 12px;
   color: #ffffcc;
   text-transform: uppercase;
   font-weight: bold;
   margin: 20px 0 9px; }
.block ul {
   font-size: 12px;
   list-style: none;
   margin: 0; }
.block ul li {
   background: url(_img/nav_bg.gif) 0 100% repeat-x;
   margin: 0; }
.block ul li a {
   background: url(_img/nav_bullet.gif) 190px 8px no-repeat;
   color: #9e9e9f;
   width: 176px; /* 202 - 28 */
   height: 16px; /* 20 - 4 */
   padding: 4px 28px 0 0;
   text-decoration: none;
   display: block; }
.block ul li:hover { background-color: #222; }
.block ul li:hover a {
   background-image: url(_img/nav_bullet_over.gif);
   color: #fff; }


/* Main
-------------------------*/
#main {
   float: left;
   margin: 10px 0 0; }

#main p.user-links, #main p.time { color: #939379; }
#main p.user-links {
   float: left;
   margin: 0 0 0 32px; }
#main p.time {
   float: right;
   margin: 0 32px 0 0; }

/* Content
-------------------------*/
#content {
   background: url(_img/content_bg.gif);
   float: left;
   width: 682px; /* 698 - 2 - 14 */
   margin: 7px 0 0;
   padding: 21px 7px 17px;
   border: 1px solid #474747;
   clear: both; }

/*----- Category Titles ----------*/
h2.cat {
   background: url(_img/content_cat_left.png) 0 0 no-repeat;
   font-size: 12px;
   font-weight: bold;
   height: 45px;
   margin: 0 0 0 -20px;
   padding: 0 0 0 12px; }
h2.cat a {
   background: url(_img/content_cat_right.png) 100% 2px no-repeat;
   color: #ffffcc;
   float: left;
   height: 33px; /* 45 - 12 */
   padding: 12px 24px 0 7px; }
   
/*----- Posts ----------*/
.post {
   margin: 0 0 17px;
   clear: both; }

/* Post Title */
.post h3.post-title {
   font-size: 14px;
   font-weight: bold;
   float: left;
   margin: 0 0 6px; }
.post h3.post-title a { color: #8e8e8e; }

/* Post Time */
.post p.post-time {
   color: #8e8e8e;
   float: right;
   margin: 0;
   display: inline; }
.post p.post-time span { font-weight: bold; }

/* Post Entry */
.post .entry {
   background: #2c2c2c;
   padding: 16px 13px 0;
   border: 1px solid #464747;
   clear: both; }
   
/* Footer
-------------------------*/
#footer {
   text-align: center;
   padding: 13px;
   clear: both; }
#footer a { font-weight: bold; }

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<!--
/*
* Copyright 2009 ClanTemplates.com
* Silent Assassins is a free template by Talis and Wex at ClanTemplates.com
* No part of this file may be redistributed without written permission
* Design by Tails - http://www.remcokruizinga.com/
* Coded by Wex - http://www.wexcode.com/
*/
-->
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
   <meta name="author" content="ClanTemplates" />
   <meta name="keywords" content="Clan" />
   <meta name="description" content="Enter a description about your clan here" />
   <meta name="robots" content="all" />   
   <title>Silent Assassins - A ClanTemplates.com free default template</title>
   
   <link rel="stylesheet" href="reset.css" type="text/css" media="all" />
   <link media="only screen and (max-device-width: 480px)" href="iPhone.css" type="text/css" rel="stylesheet" />
   <link rel="stylesheet" href="style.css" type="text/css" media="all" />

   <!--link rel="Shortcut Icon" type="image/x-icon" href="images/favicon.ico" /-->   
</head>
<body>
<div id="side">
   <h1 id="logo"><a href="#">Silent Assassins</a></h1>
   <div class="block">
      <h2 class="block-title">Main Menu</h2>
      <ul>
         <li><a href="#">News</a></li>
         <li><a href="#">Forum</a></li>
         <li><a href="#">Roster</a></li>
         <li><a href="#">Matches</a></li>
         <li><a href="#">Gallery</a></li>
      </ul>
   </div>
   <div class="block">
      <h2 class="block-title">Downloads</h2>
      <ul>
         <li><a href="#">Patches</a></li>
         <li><a href="#">Programs</a></li>
         <li><a href="#">Videos</a></li>
         <li><a href="#">Tips &amp; Tricks</a></li>
         <li><a href="#">Tactics</a></li>
      </ul>
   </div>
   <div class="block">
      <h2 class="block-title">Contact Us</h2>
      <ul>
         <li><a href="#">Contact</a></li>
         <li><a href="#">Sponsors</a></li>
         <li><a href="#">Affiliates</a></li>
      </ul>
   </div>
</div>
<div id="main">
   <p class="user-links"><a href="#">Register now</a> - <a href="#">Forgot password</a></p>
   <p class="time">Time now: <span>10:27am</span></p>
   <div id="content">
      <h2 class="cat"><a name="help_text" href="#help_text">Help Text</a></h2>
      <div class="post">
         <h3 class="post-title">Intro</h3>
         <p class="post-time">Posted on: <span>21-05-2010</span></p>
         <div class="entry">
            <p>Thank you for downloading this free template release from <a href="http://www.clantemplates.com/">ClanTemplates</a>. If you have any questions, these paragraphs should address them or direct you to where they can be addressed.</p>
            <p>There are a few terms-of-use rules you need to follow if you want to use this or any ClanTemplates template but they are simple to follow. The first is that you <strong>must keep a link back to ClanTemplates</strong> either using a Lead Sponsor image or an affiliate link (dependent upon your template). This must be a hyperlink and must include the ClanTemplates 'C' logo. The second is that you <strong>must include any copyright footer</strong> that tells you who designed and coded the template. This image (and/or text) should also link to ClanTemplates and must not be edited.</p>
            <p>All templates released at clantemplates are coded in html/xhtml &amp; css so that even the most inexperienced individual can understand and edit the template. If you have either Frontpage or Dreamweaver at your disposal these would be recommended for you to easily edit and manage the code of your new website template. Below are 3 video tutorials that explain different aspects of how to use a template downloaded from Clantemplates.</p>
            <ul>
            <li><a href="http://www.clantemplates.com/video/How_to_DL_and_Edit/How_to_DL_and_Edit.html">How to Download &amp; Edit Your Template</a></li>
            <li><a href="http://www.clantemplates.com/video/CT_How_to_Make_a_New_Page/CT_How_to_Make_a_New_Page.html">How to make a new page for the template</a></li>
            <li><a href="http://www.clantemplates.com/video/CT_How_to_Upload/CT_How_to_Upload.html">How to upload your template to a server</a></li>
            </ul>
         </div>
      </div>
      <div class="post">
         <h3 class="post-title">Editing your Template</h3>
         <p class="post-time">Posted on: <span>21-05-2010</span></p>
         <div class="entry">
            <p>All templates released at Clantemplates should include blank banner images for you to add your own clans name to in order to personalize the template. Such images are generally included in the images folder which was in the zip file you downloaded and are normally denoted by the word 'blank' in the filename. Other blank images for various parts of a template, may be included in the folder, depending on the template you've downloaded.</p>
         </div>
      </div>
      <div class="post">
         <h3 class="post-title">Getting Help</h3>
         <p class="post-time">Posted on: <span>21-05-2010</span></p>
         <div class="entry">
            <p>Any questions that the video tutorials just didn't cover? Well the best place to get the kind of answers you need is to use that template you've downloaded is to submit your question for the Support Staff in the Clantemplates <a href="http://forums.clantemplates.com/forumdisplay.php?f=9">Help Booth</a>. Make sure you include the name of the template you downloaded and the category it was in. Any question you may have regarding a template they will be able to answer for you.</p>
         </div>
      </div>
      <h2 class="cat"><a href="#">News</a></h2>
      <div class="post">
         <h3 class="post-title"><a href="#">Sweet title can go here</a></h3>
         <p class="post-time">Posted on: <span>18-01-2010</span></p>
         <div class="entry">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare rutrum arcu sit amet sollicitudin. Etiam sodales suscipit ante, eget vehicula libero interdum vitae. Donec erat quam, suscipit non blandit et, pulvinar at felis. Praesent ullamcorper blandit massa id scelerisque. Proin pellentesque nulla quis justo ornare sed suscipit nunc facilisis. Pellentesque viverra consectetur turpis, in convallis nisi auctor vel. Mauris nec ante nisl, sed accumsan enim. Morbi pulvinar dictum pretium. Curabitur nec diam arcu. Nunc egestas feugiat lorem nec ullamcorper. Proin sit amet consectetur justo. Aenean sem enim, luctus ut sodales sit amet, venenatis non odio. Nullam ultrices porttitor nibh. Morbi venenatis, velit ornare aliquet imperdiet, nibh odio rutrum leo, nec mollis dolor orci a lectus. Donec sit amet diam eget risus vestibulum malesuada sit amet consequat justo.</p>
            <p>Integer ut cursus velit. Fusce nec tortor risus. Nullam tincidunt auctor sem. Phasellus metus arcu, congue ac aliquet non, tincidunt scelerisque ipsum. Curabitur ultrices iaculis velit, a imperdiet ligula hendrerit sit amet. In pellentesque, tellus ut mollis dignissim, metus velit porta ante, et semper urna justo eu erat. Proin arcu dolor, vehicula elementum sagittis et, elementum ut risus. Ut bibendum neque a mauris pharetra dapibus. In hac habitasse platea dictumst. Aenean pellentesque faucibus libero in fermentum. Quisque pulvinar odio non nisi pulvinar nec sollicitudin lacus bibendum. Nullam felis risus, convallis ac viverra vel, fringilla consequat urna. Morbi suscipit euismod orci, quis tristique turpis luctus eu. In condimentum arcu quis tellus dapibus a sollicitudin nunc sagittis. Vivamus id euismod risus. Sed egestas mi vitae erat auctor in consequat ipsum lacinia.</p>
         </div>
      </div>
      <h2 class="cat"><a href="#">Updates</a></h2>
      <div class="post">
         <h3 class="post-title"><a href="#">Sweet title can go here</a></h3>
         <p class="post-time">Posted on: <span>18-01-2010</span></p>
         <div class="entry">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare rutrum arcu sit amet sollicitudin. Etiam sodales suscipit ante, eget vehicula libero interdum vitae. Donec erat quam, suscipit non blandit et, pulvinar at felis. Praesent ullamcorper blandit massa id scelerisque. Proin pellentesque nulla quis justo ornare sed suscipit nunc facilisis. Pellentesque viverra consectetur turpis, in convallis nisi auctor vel. Mauris nec ante nisl, sed accumsan enim. Morbi pulvinar dictum pretium. Curabitur nec diam arcu. Nunc egestas feugiat lorem nec ullamcorper. Proin sit amet consectetur justo. Aenean sem enim, luctus ut sodales sit amet, venenatis non odio. Nullam ultrices porttitor nibh. Morbi venenatis, velit ornare aliquet imperdiet, nibh odio rutrum leo, nec mollis dolor orci a lectus. Donec sit amet diam eget risus vestibulum malesuada sit amet consequat justo.</p>
            <p>Integer ut cursus velit. Fusce nec tortor risus. Nullam tincidunt auctor sem. Phasellus metus arcu, congue ac aliquet non, tincidunt scelerisque ipsum. Curabitur ultrices iaculis velit, a imperdiet ligula hendrerit sit amet. In pellentesque, tellus ut mollis dignissim, metus velit porta ante, et semper urna justo eu erat. Proin arcu dolor, vehicula elementum sagittis et, elementum ut risus. Ut bibendum neque a mauris pharetra dapibus. In hac habitasse platea dictumst. Aenean pellentesque faucibus libero in fermentum. Quisque pulvinar odio non nisi pulvinar nec sollicitudin lacus bibendum. Nullam felis risus, convallis ac viverra vel, fringilla consequat urna. Morbi suscipit euismod orci, quis tristique turpis luctus eu. In condimentum arcu quis tellus dapibus a sollicitudin nunc sagittis. Vivamus id euismod risus. Sed egestas mi vitae erat auctor in consequat ipsum lacinia.</p>
         </div>
      </div>
      <h2 class="cat"><a href="#">Matches</a></h2>
      <div class="post">
         <h3 class="post-title"><a href="#">Sweet title can go here</a></h3>
         <p class="post-time">Posted on: <span>18-01-2010</span></p>
         <div class="entry">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ornare rutrum arcu sit amet sollicitudin. Etiam sodales suscipit ante, eget vehicula libero interdum vitae. Donec erat quam, suscipit non blandit et, pulvinar at felis. Praesent ullamcorper blandit massa id scelerisque. Proin pellentesque nulla quis justo ornare sed suscipit nunc facilisis. Pellentesque viverra consectetur turpis, in convallis nisi auctor vel. Mauris nec ante nisl, sed accumsan enim. Morbi pulvinar dictum pretium. Curabitur nec diam arcu. Nunc egestas feugiat lorem nec ullamcorper. Proin sit amet consectetur justo. Aenean sem enim, luctus ut sodales sit amet, venenatis non odio. Nullam ultrices porttitor nibh. Morbi venenatis, velit ornare aliquet imperdiet, nibh odio rutrum leo, nec mollis dolor orci a lectus. Donec sit amet diam eget risus vestibulum malesuada sit amet consequat justo.</p>
            <p>Integer ut cursus velit. Fusce nec tortor risus. Nullam tincidunt auctor sem. Phasellus metus arcu, congue ac aliquet non, tincidunt scelerisque ipsum. Curabitur ultrices iaculis velit, a imperdiet ligula hendrerit sit amet. In pellentesque, tellus ut mollis dignissim, metus velit porta ante, et semper urna justo eu erat. Proin arcu dolor, vehicula elementum sagittis et, elementum ut risus. Ut bibendum neque a mauris pharetra dapibus. In hac habitasse platea dictumst. Aenean pellentesque faucibus libero in fermentum. Quisque pulvinar odio non nisi pulvinar nec sollicitudin lacus bibendum. Nullam felis risus, convallis ac viverra vel, fringilla consequat urna. Morbi suscipit euismod orci, quis tristique turpis luctus eu. In condimentum arcu quis tellus dapibus a sollicitudin nunc sagittis. Vivamus id euismod risus. Sed egestas mi vitae erat auctor in consequat ipsum lacinia.</p>
         </div>
      </div>
   </div>
   <div id="footer">
      <p class="copyright">Copyright <a href="http://www.clantemplates.com/">ClanTemplates.com</a> - Designed by <a href="http://www.remcokruizinga.com/">Talis</a> - Coded by <a href="http://www.wexcode.com/">Wex</a></p>
   </div>
</div>

</body>
</html>