| Html Şablon | www.HTMLSABLONKOD.tr.gg | by BRKNL | Arkasında Google Var

css13

Müzik Adına Tasarım

Tasarımın Üzerindeki Bölüme

<div id="header">
<div id="logo">
<h1><a href="#" _fcksavedurl="#"><span>Site </span> Adı</a></h1>
<p>Site Amblemi</p>
</div>
</div>
<div id="menu">
<ul id="main">
<li class="current_page_item"><a href="#" _fcksavedurl="#">Ana Sayfa</a></li>
<li><a href="#" _fcksavedurl="#">Forum</a></li>
<li><a href="#" _fcksavedurl="#">İletişim</a></li>
<li><a href="#" _fcksavedurl="#">Toplist</a></li>
<li><a href="#" _fcksavedurl="#">Z. Defteri</a></li>
</ul>
</div>

<div id="wrapper">

<div id="page">
<div id="sidebar1" class="sidebar">
<ul>
<li>
<h2>Kategoriler</h2>
<ul>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
</ul>
</li>
<li>
<h2>Kategoriler - 2</h2>
<ul>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
</ul>
</li>
<li>
<h2>Kategoriler - 3</h2>
<ul>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
</ul>
</li>
<li>
<h2>Kategoriler - 4</h2>
<ul>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
</ul>
</li>		</div>

<div id="content">

Tasarımın Altındaki Bölüme

</div>

<div id="sidebar2" class="sidebar">
<ul>
<li>
<form id="searchform" method="get" action="#">
<div>
<h2>Site İçi Arama</h2>
<input type="text" name="s" id="s" size="15" value="" />
</div>
</form>
</li>
<li>
<h2>Takvim</h2>
<div id="calendar_wrap">
<table summary="Calendar">
<caption>
October 2009
</caption>
<thead>
<tr>
<th abbr="Monday" scope="col" title="Monday">M</th>
<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
<th abbr="Thursday" scope="col" title="Thursday">T</th>
<th abbr="Friday" scope="col" title="Friday">F</th>
<th abbr="Saturday" scope="col" title="Saturday">S</th>
<th abbr="Sunday" scope="col" title="Sunday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td abbr="September" colspan="3" id="prev"><a href="#" _fcksavedurl="#" title="View posts for September 2009">« Sep</a></td>
<td class="pad"> </td>
<td colspan="3" id="next"> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td id="today">4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="pad" colspan="4"> </td>
</tr>
</tbody>
</table>
</div>
</li>
<li>
<h2>Kategoriler - 5</h2>
<ul>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
<li><a href="#" _fcksavedurl="#">Kategori</a></li>
</ul>
</li>			</ul>
</div>

<div style="clear: both;"> </div>
</div>

</div>
<div id="footer">
<p class="copyright">Copyright  2009 Design by <a href="http://www.htmlsablonkod.tr.gg" _fcksavedurl="http://www.htmlsablonkod.tr.gg">Free Tasarım</a></p>
</div>

Css Kod Bölümüne

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;}
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/
body {
margin: 0px;
padding: 0;
background: url(https://img.webme.com/pic/p/prohtmlmania/img01.jpg) repeat-x left top;
text-align: justify;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #616161;
}
h1, h2, h3 {
margin-top: 0;
color: #A66100;
}
h1 {
font-size: 1.6em;
font-weight: normal;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1em;
}
ul {
}
a {
text-decoration: none;
color: #A66100;
}
a:hover {
border-bottom: none;
}
a img {
border: none;
}
img.left {
float: left;
margin: 0 20px 0 0;
}
img.right {
float: right;
margin: 0 0 0 20px;
}
#header {
width: 960px;
margin: 0 auto;
height: 165px;
background: url(https://img.webme.com/pic/p/prohtmlmania/img02.jpg) no-repeat left top;
}
/* Header */
#logo {
width: 960px;
height: 100px;
margin: 0 auto;
padding: 60px 10px 0 10px;
}
#logo h1, #logo p {
float: left;
margin: 0;
color: #00D8D5;
}
#logo span {
color: #FFFFFF;
}
#logo h1 {
padding: 25px 0 0 0;
letter-spacing: -1px;
text-transform: lowercase;
font-weight: normal;
font-size: 3em;
}
#logo p {
text-transform: uppercase;
padding: 47px 0 0 3px;
font-size: 10px;
color: #FFFFFF;
}
#logo a {
border: none;
text-decoration: none;
color: #DC8700;
}
/* Menu */
#menu {
width: 960px;
margin: 0 auto;
padding: 0;
height: 59px;
background: url(https://img.webme.com/pic/p/prohtmlmania/img03.jpg) no-repeat left top;
}
#menu ul {
margin: 0;
padding-left: 270px;
list-style: none;
}
#menu li {
display: inline;
}
#menu a {
display: block;
float: left;
height: 41px;
margin: 0;
padding: 18px 40px 0 40px;
background: url(https://img.webme.com/pic/p/prohtmlmania/img08.jpg) no-repeat left 30%;
text-decoration: none;
text-transform: capitalize;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #FFFFFF;
}
#menu a:hover {
color: #FFFFFF;
}
#menu .current_page_item a {
color: #FFFFFF;
}
/* Wrapper */
#wrapper {
}
/* Page */
#page {
width: 960px;
margin: 0 auto;
padding: 20px 5px;
background: #FFFFFF;
}
#page-bg {
}
/* Latest Post */
#latest-post {
padding: 20px;
border: 1px solid #E7E7E7;
}
/* Content */
#content {
float: left;
width: 480px;
}
.post {
padding-bottom: 15px;
line-height: 200%;
}
.post h1 {
font-weight: normal;
}
.title {
height: 78px;
margin: 0;
padding: 15px 0 4px 20px;
font-weight: normal;
background: url(https://img.webme.com/pic/p/prohtmlmania/img07.jpg) no-repeat left top;
}
.title a {
border-bottom: none;
color: #FFFFFF;
}
.title a:hover {
border-bottom: 1px dotted #000000;
}
.byline {
margin: -60px 20px 20px 20px;
}
.byline a {
color: #DC8700;
}
.tag {
padding: 0 15px;
}
.entry {
padding: 0 20px;
}
.links {
padding: 4px 0px;
text-align: right;
font-weight: bold;
}
.links a {
border: none;
}
.links a:hover {
}
/* Sidebars */
#sidebar1 {
float: left;
margin-top: -70px;
}
#sidebar2 {
float: right;
}
.sidebar {
float: left;
width: 240px;
padding: 0;
font-size: 12px;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
padding: 0 0 20px 0;
}
.sidebar li ul {
}
.sidebar li li {
margin: 0 20px 0 15px;
padding: 8px 0px;
border-bottom: 1px dashed #C5C4C4;
}
.sidebar li h2 {
height: 40px;
margin: 0 0 0 0;
padding: 20px 15px 0px 65px;
background: url(https://img.webme.com/pic/p/prohtmlmania/img04.jpg) no-repeat left top;
letter-spacing: -1px;
font-size: 16px;
font-weight: normal;
color: #FFFFFF;
}
.sidebar a {
}
/* Search */
#searchform {
margin: 0;
padding: 0 0 0 0;
}
#searchform br {
display: none;
}
#searchform h2 {
}
#s {
margin: 10px 0px 0 15px;
padding: 2px 2px;
width: 180px;
height: 18px;
border: 1px solid #6F6E6E;
background: #FFFFFF;
font-size: 10px;
color: #000000;
}
#x {
margin: 0;
padding: 2px 5px;
height: 25px;
background: #CA8186;
text-decoration: none;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #CCCCCC;
}
/* Calendar */
#calendar_wrap {
padding: 0 15px;
text-align: center;
}
#calendar_wrap table {
width: 100%;
}
#calendar_wrap th {
}
#calendar_wrap td {
}
#calendar_wrap tfoot td {
border: none;
}
#calendar_wrap tfoot td#prev {
text-align: left;
font-weight: bold;
border: none;
}
#calendar_wrap tfoot td#prev a {
border: none;
}
#calendar_wrap tfoot td#next {
text-align: right;
font-weight: bold;
border: none;
}
#calendar_wrap tfoot td#next a {
border: none;
}
/* Footer */
#footer {
width: 960px;
height: 70px;
margin: 0 auto;
padding: 0 20px;
background: #2E2E2E;
}
#footer p {
margin: 0;
padding: 25px 0 0 0;
text-align: center;
font-size: smaller;
}
#footer a {
}
#footer .link {
float: right;
}
#footer .copyright {
float: left;
}

| Html Şablon | www.HTMLSABLONKOD.tr.gg | by BRKNL | Arkasında Google Var |

css13