- CSS TASARIMLAR,SİYAH CSS TASARIM KODLARI

CSS TASARIMLAR,SİYAH CSS TASARIM KODLARI

TASARIMIN ÜSTÜNE

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Characterized  by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
   <div id="logo">
      <h1><a href="#">Characterized  </a></h1>
      <p><em> template design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a></em></p>
   </div>
   <hr />
   
   <div id="header">
      <div id="menu">
         <ul>
            <li><a href="#" class="first">Home</a></li>
            <li class="current_page_item"><a href="#">Blog</a></li>
            <li><a href="#">Photos</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Links</a></li>
            <li><a href="#">Contact</a></li>
         </ul>
      </div>
      
      <div id="search">
         <form method="get" action="">
            <fieldset>
            <input type="text" name="s" id="search-text" size="15" />
            <input type="submit" id="search-submit" value="GO" />
            </fieldset>
         </form>
      </div>
      
   </div>
   
   
   <div id="page">
      <div id="content">
         <div id="banner"><img src="http://img23.xooimage.com/files/c/b/0/img09-123c8f9.jpg" alt="" /></div>
         <div class="post">
            <h2 class="title"><a href="#">Adaptado por Mz </a></h2>
            <p class="meta">Sunday, April 26, 2009 7:27 AM Posted by <a href="#">Someone</a></p>

</div>

TASARIMIN ALTINA

</div>
      </div>
      
      <div id="sidebar">
         <ul>
            <li>
               <h2>Aliquam tempus</h2>
               <p>Mauris vitae nisl nec metus placerat perdiet est. Phasellus dapibus semper urna. Pellentesque ornare, orci in consectetuer hendrerit, volutpat.</p>
            </li>
            <li>
               <h2>Pellenteque ornare </h2>
               <ul>
                  <li><a href="#">Nec metus sed donec</a></li>
                  <li><a href="#">Magna lacus bibendum mauris</a></li>
                  <li><a href="#">Velit semper nisi molestie</a></li>
                  <li><a href="#">Eget tempor eget nonummy</a></li>
                  <li><a href="#">Nec metus sed donec</a></li>
                  <li><a href="#">Velit semper nisi molestie</a></li>
                  <li><a href="#">Eget tempor eget nonummy</a></li>
                  <li><a href="#">Nec metus sed donec</a></li>
               </ul>
            </li>
            <li>
               <h2>Turpis nulla</h2>
               <ul>
                  <li><a href="#">Nec metus sed donec</a></li>
                  <li><a href="#">Magna lacus bibendum mauris</a></li>
                  <li><a href="#">Velit semper nisi molestie</a></li>
                  <li><a href="#">Eget tempor eget nonummy</a></li>
                  <li><a href="#">Nec metus sed donec</a></li>
                  <li><a href="#">Nec metus sed donec</a></li>
                  <li><a href="#">Magna lacus bibendum mauris</a></li>
                  <li><a href="#">Velit semper nisi molestie</a></li>
                  <li><a href="#">Eget tempor eget nonummy</a></li>
                  <li><a href="#">Nec metus sed donec</a></li>
               </ul>
            </li>
         </ul>
      </div>
      
      <div style="clear: both;"> </div>
   </div>
   
   <div id="footer-bgcontent">
   <div id="footer">
      <p>Copyright (c) 2008 Sitename.com. All rights reserved. Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>  Adaptado por <a href="http://www.Musica-Zone.es.tl/">Musica-Zone</p>
   </div>
   </div>
   
</div>
</body>
</html>

CSS BÖLÜMÜNE

lli.nav_element{display: none;} 
li.nav_element a{display: none;} 
h1#title{display: none;} 
h2#title span {display: none;} 
div.header{display: none;} 
li.nav_element{list-style-type: none;} 
li.nav_element{display: none;}

body {
   margin-top: 50px;
   padding: 0;
   background: #161616 url(http://img45.xooimage.com/files/d/7/d/img01-123c652.jpg) repeat-x left top;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
   color: #8A8A8A;
}

h1, h2, h3 {
   margin: 0;
   text-transform: uppercase;
   font-weight: normal;
   color: #549900;
}

h1 { font-size: 44px; }

h2 { font-size: 18px; }

h3 { }

p, ul, ol {
   margin-top: 0;
   line-height: 240%;
   text-align: justify;
}

ul, ol { }

blockquote { }

a { color: #F71476; }

a:hover { text-decoration: none; }

a img {
   border: none;
}

img.left {
   float: left;
   margin: 7px 30px 0 0;
}

img.right {
   float: right;
   margin: 7px 0 0 30px;
}

hr { display: none; }

.list1 {
}

.list1 li {
   float: left;
   line-height: normal;
}

.list1 li img {
   margin: 0 30px 30px 0;
}

.list1 li.alt img {
   margin-right: 0;
}

#wrapper {
}

/* Header */

#header-wrapper {
}

#header {
   width: 960px;
   height: 45px;
   margin: 0 auto;
   background: url(http://img41.xooimage.com/files/d/5/1/img03-123c65f.jpg) no-repeat left top;
}

/* Menu */

#menu {
   float: left;
   width: 650px;
   height: 50px;
   background: url(http://img29.xooimage.com/files/c/7/a/img02-123c66f.jpg) no-repeat left top;
}

#menu ul {
   margin: 0;
   padding: 0px 0px 0px 5px;
   list-style: none;
   line-height: normal;
}

#menu li {
   display: block;
   float: left;
}

#menu a {
   display: block;
   float: left;
   height: 32px;
   margin-right: 3px;
   padding: 18px 30px 0px 30px;
   background: url(http://img41.xooimage.com/files/c/6/0/img07-123c67c.gif) no-repeat left top;
   text-decoration: none;
   text-transform: capitalize;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14px;
   color: #000000;
}

#menu a:hover { text-decoration: underline; }

#menu .current_page_item a {
   height: 50px;
   color: #000000;
}

#menu .first {
   background: none;
}
/* Search */

#search {
   float: right;
   width: 310px;
   height: 50px;
   background: url(http://img41.xooimage.com/files/d/5/1/img03-123c65f.jpg) no-repeat left top;
}

#search form {
   float: right;
   margin: 0;
   padding: 14px 30px 0 0;
}

#search fieldset {
   margin: 0;
   padding: 0;
   border: none;
}

#search input {
   float: left;
   font: 12px Georgia, "Times New Roman", Times, serif;
   border: none;
}

#search-text {
   width: 200px;
   height: 18px;
   padding: 3px 0 0 5px;
   border: 1px solid #333333;
   background: #ECF9E4;
   color: #000000;
}

#search-submit {
   height: 21px;
   margin-left: 10px;
   padding: 0px 5px;
   background: #000000;
   color: #FFFFFF;
}

/* Page */

#page {
   width: 920px;
   margin: 0 auto;
   padding: 40px 20px 0px 20px;
   background: #000000;
}

/** LOGO */

#logo {
   width: 960px;
   height: 120px;
   margin: 0 auto;
}

#logo h1, #logo p {
   margin: 0px;
   line-height: normal;
   text-align: center;
   text-transform: lowercase;
   font-weight: normal;
   color: #FFFFFF;
}

#logo p {
   text-transform: lowercase;
   font-size: 13px;
   color: #757575;
}

#logo h1 {
   padding-top: 10px;
   font-size: 48px;
}

#logo a {
   text-decoration: none;
   color: #757575;
}

#logo h1 a {
   text-decoration: none;
   color: #FFFFFF;
}

#banner {
   padding-bottom: 20px;
}

/* Content */

#content {
   float: left;
   width: 580px;
}

/* Post */

.post {
   background: url(http://img23.xooimage.com/files/9/5/a/img08-123c895.gif) repeat-x left bottom;
   margin-bottom: 45px;
}

.post .title {
   height: 30px;
   color: #FFFFFF;
}

.post .title a {
   text-decoration: none;
   text-transform: capitalize;
   font-size: 30px;
   color: #FFFFFF;
}

.post .date {
}

.post .meta {
   margin-left: 2px;
   padding: 2px 30px 2px 16px;
   background: url(http://img23.xooimage.com/files/2/2/5/img10-123c8a4.gif) no-repeat left 7px;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: normal;
   font-size: 10px;
   color: #66665E;
}

.post .meta span {
   display: block;
   margin-top: -10px;
}

.post .meta a { }

.post .entry {
   padding: 10px 0;
}

.post .links {
   margin: 0 250px 0 0;
   padding: 0 0 0 0px;
}

.post .links .comments {
}

.post .links .permalink {
   padding-left: 17px;
}

/* Sidebar */

#sidebar {
   float: right;
   width: 300px;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 12px;
}

#sidebar ul {
   margin: 0;
   padding: 0;
   list-style: none;
   line-height: normal;
}

#sidebar li {
   margin-bottom: 30px;
   padding: 0 0 10px 0px;
}

#sidebar li ul {
   margin: 0px 14px;
}

#sidebar li li {
   margin: 0;
   padding: 12px 0px;
   background: url(http://img45.xooimage.com/files/2/a/e/img05-123c8ac.gif) repeat-x left bottom;
}

#sidebar li li a {
   padding: 0px 0px 0px 20px;
   background: url(http://img23.xooimage.com/files/e/f/e/img06-123c8b1.gif) no-repeat left 2px;
   font-weight: normal;
   color: #B3B2B2;
}

#sidebar li li a:hover {
   color: #FFFFFF;
}

#sidebar p {
   margin: 0;
   padding: 0px 14px;
}

#sidebar h2 {
   height: 30px;
   margin: 0 0 10px 0px;
   padding: 6px 0 2px 14px;
   background: url(http://img43.xooimage.com/files/6/0/a/img04-123c8b7.jpg) no-repeat left top;
   text-transform: capitalize;
   font-size: 18px;
   font-weight: normal;
   color: #FFFFFF;
}

#sidebar p {
   line-height: 200%;
}

#sidebar a {
   text-align: left;
   text-decoration: none;
   font-weight: bold;
}

/* Calendar */

#calendar {
}

#calendar caption {
   padding-bottom: 5px;
   font-weight: bold;
}

#calendar table {
   width: 100%;
   border-collapse: collapse;
   border-bottom: 1px solid #24130F;
   border-left: 1px solid #24130F;
   border-right: 1px solid #24130F;
}

#calendar thead th {
   padding: 5px 0;
   text-align: center;
   border-top: 1px solid #24130F;
   border-left: 1px solid #24130F;
   background: #24130F;
}

#calendar tbody td {
   padding: 5px 0;
   text-align: center;
   border-top: 1px solid #24130F;
   border-left: 1px solid #24130F;
   border-bottom: 1px solid #24130F;
}

#calendar tfoot td {
   padding: 5px;
   border-left: 1px solid #24130F;
   border-bottom: 1px solid #24130F;
}

#calendar tfoot #next {
   border-top: 1px solid #24130F;
   text-align: right;
}

#calendar tfoot #prev {
   border-top: 1px solid #24130F;
}

#calendar .pad {
   border-bottom: 1px solid #24130F;
}

#calendar #today {
   background: #24130F;
}

/* Footer */

#footer {
   width: 920px;
   height: 49px;
   margin: 0 auto;
   padding-top: 50px;
}

#footer-bgcontent {
   margin: 0px;
   padding: 0px;
   height: 99px;
}

#footer p {
   margin: 0;
   text-align: center;
   line-height: normal;
   text-transform: uppercase;
   font-size: 10px;
   color: #FFFFFF;
}

#footer a {
   color: #E5FFC4;
}