Css tasarımlar - Oyun tasarım2

Tasarım Üzeri:

<body>
<div id="universe">
<div id="rss">
<a href="http://css-sablon.tr.gg/" title="Css-Sablon"> <img src="http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/rss.png" alt="css-sablon.tr.gg/" /></a>
</div>
<div id="cartoon">
<img src="http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/people.png" alt="people" />
</div>
<div id="header">

<h1><a href="#">Css-Sablon / Oyun2 </a></h1>
<p class="description">Profesyonel Webmaster Servisi</p>
</div> 
<div id="nav">
<ul>
<li class="page_item"><a href="#">Anasayfa</a></li>
<li class="page_item"><a href="#">Sayfa Adı 2</a></li>
<li class="page_item"><a href="#">Sayfa Adı 3</a></li>
<li class="page_item"><a href="#">Sayfa Adı 4</a></li>
</ul>
</div>
<div id="wrapper">
<div id="wrap">
<div id="content">
<div id="sidebar-right">
<div id="rightcol" class="sidebar">
<div id="search">
<form method="get" id="searchform" action="http://css-sablon.tr.gg/">
<input type="image" id="searchsubmit" src="http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/button_search.gif" />
<input type="text" value="Webde Ara ..." name="s" id="s" onfocus="if (this.value == 'Webde Ara ...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Webde Ara ...';}" />
</form>
</div>
<div class="advertise">
<a href="#"><img src="https://img.webme.com/pic/c/css-sablon/125x125css-sablon.jpeg" alt=""></img></a>
<a href="#"><img src="http://onlinesinema.web.tr/REKLAM.png" alt="a"></img></a>
<a href="#"><img src="http://onlinesinema.web.tr/REKLAM.png" alt=""></img></a>
<a href="#"><img src="http://onlinesinema.web.tr/REKLAM.png" alt=""></img></a>
</div>
<h2 class="sidebarimg"><img src="http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/latestnews.png" alt="latest-news" /></h2>
<ul class="latest-news">
<li><span class="title"><a href="Sayfanın Linki">Önemli Konular 1</a></span></li>
<li><span class="title"><a href="Sayfanın Linki">Önemli Konular 2</a></span></li>
<li><span class="title"><a href="Sayfanın Linki">Önemli Konular 3</a></span></li>
<li><span class="title"><a href="Sayfanın Linki">Önemli Konular 4</a></span></li>
<li><span class="title"><a href="Sayfanın Linki">Önemli Konular 5</a></span></li>
</ul>
<h2 class="sidebarimg"><img src="http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/categories.png" alt="categories" /></h2>
<ul class="list-cat">
<li><span class="title"><a href="Sayfanın Linki">Sayfa Adı 1</a></span></li>
<li><span class="title"><a href="Sayfanın Linki">Sayfa Adı 2</a></span></li>
<li><span class="title"><a href="Sayfanın Linki">Sayfa Adı 3</a></span></li>
<li><span class="title"><a href="Sayfanın Linki">Sayfa Adı 4</a></span></li>
<li><span class="title"><a href="Sayfanın Linki">Sayfa Adı 5</a></span></li>
<li><span class="title"><a href="Sayfanın Linki">Sayfa Adı 6</a></span></li>
<li><span class="title"><a href="Sayfanın Linki">Sayfa Adı 7</a></span></li>
<li><span class="title"><a href="Sayfanın Linki">Sayfa Adı 8</a></span></li>
<li><span class="title"><a href="Sayfanın Linki">Sayfa Adı 9</a></span></li>
</ul>
<h2 class="sidebarimg"><img src="http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/newcomments.png" alt="new-comments" /></h2>
<ul id="recent-comments">
<li><span class="title"><a href="Sayfanın Linki">Son Konular 1</a></span></li>
<li><span class="title"><a href="Sayfanın Linki">Son Konular 2</a></span></li>
<li><span class="title"><a href="Sayfanın Linki">Son Konular 3</a></span></li>
<li><span class="title"><a href="Sayfanın Linki">Son Konular 4</a></span></li>
</ul>
<h2 class="sidebarimg"><img src="http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/tagcloud.png" alt="tag-cloud" /></h2>
<div class="tags">
<a href='#' class='tag-link-15' title='1 topic' style='font-size: 10pt;'>Etiket 1</a>
<br>
<a href='#sayfa' class='tag-link-14' title='1 topic' style='font-size: 10pt;'>Etiket 2</a>
</div>
</div>
</div>
<div id="maincol">
<div class="post" id="post-24">
<div class="entry">
<div class="entry-inner">
<div class="post-title">
<h3 class="post-title-page">Css-Sablon / Oyun2</h3>
</div>

Tasarım Altı:

Css Bölümü

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;}
/*
Theme Name: Curious
Description: cute and awesome WP theme
Author: E. Harrison
Author URI: http://webrevolutionary.com/
*/
body {
margin: 0;
padding:0;
color: #5a5955;
font-family: georgia,'times new roman',Verdana, Arial, sans-serif;
line-height: 1.5em;
background: #151600 url(http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/bg_body.jpg) repeat-x;
}
/* links */
a:link {
color: #c68d1a;
text-decoration: none;
}
a:hover, a:visited {
color: #232323;
text-decoration: none;
}
a.more-link {
color:#6f8259;
}
/* basic elements */
p {
padding: 0 0 10px;
margin: 0;
}
form {
margin: 0;
padding: 0;
}
img {
border: none 0;
}
/* basic phrase element styles */
blockquote {
margin: 0 20px 0 5px;
padding: 10px 0 10px 45px;
line-height: 1.5em;
color: #282827;
background:  url(http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/bg_blockquote.gif) no-repeat;
}
code {
color: #282827;
font-family: Monaco, monospace;
font-size: 110%;
text-align: left;
}
code strong {
color: #630;
}
abbr, acronym {
font-style: normal;
border-bottom: 1px dotted #ccc;
cursor: help;
}
a abbr {
border: none;
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
del {
text-decoration: line-through;
color: #666;
}
ins {
text-decoration: none;
font-style: italic;
}
address {
margin: 0;
padding: 0;
font-style: normal;
}
h3,h4,h5,h6 {
font-family:Georgia, "Times New Roman", Times, serif;
}
/*layout*/
#universe {
width:940px;
margin:0 auto 60px;
position:relative;
}
#wrapper {
width:940px;
margin: 0 auto;
padding: 0;
background:#fff   url(http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/bg_maincol.gif) repeat-x 0 100% ;
border:1px solid #6a6a6a;
}
#wrap{
background: url(http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/bg_sidebar.jpg) repeat-y 100% 0;
width:940px;
}
#content {
}
#maincol{
width:640px;
padding:25px 0 25px;
background:  url(http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/bg_wrapper.gif) repeat-x 0 0;
float:left;
}
#sidebar-right{
margin:0;
padding: 12px 0 50px 5px;
width:295px;
float:right;
}
.sidebar {
font-size: 95%;
}
/* header
---------------------------------------------------------- */
#header {
width:940px;
margin: 0 auto 50px;
padding:0;
height: 90px;
position:relative;
}
/* logo (edit if you want to use logo) --------------------*/
#logo {
}
#logo img {
border: none;
}
h1 {
margin: 0;
padding:40px 0 0 1em ;
font-family: "Times New Roman",Georgia, Times, serif;
font-weight: bold;
font-size: 3.5em;
}
h1 a:link, h1 a:visited, h1 a:hover {
color: #fff;
text-decoration: none;
}
.description {
padding: 20px 0 0px 5em;
color: #fff;
font-style:italic;
}
#cartoon{
position:absolute;
top:123px;
left:20px;
}
/*RSS button
---------------------------------------------------------- */
#rss{
position:absolute;
top:122px;
right:2px;
}
/* top navigation
---------------------------------------------------------- */
#nav {
padding: 0;
font-size: 11px;
width:770px;
margin: 20px 0 0 150px;
font-family: verdana, arial, georgia,sans-serif;
background:url(http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/bg_nav.jpg) no-repeat ;
}
#nav ul {
margin:0;
padding: 5px 0 0;
list-style: none;
}
#nav li {
float: left;
margin-right: 0px;
}
#nav li a {
float: left;
padding: 2px 5px 4px 25px ;
color: #cbbc41;
font-weight: bold;
}
#nav li a:hover, #nav li.current_page_item a {
color: #fff;
}
/* content
---------------------------------------------------------- */
.post {
float: left;
padding: 0;
margin:0;
}
h2.pagetitle {
margin: 0 0 -15px;
padding: 45px 0 45px;
color: #000;
font-size: 100%;
font-family:  georgia,'times new roman', Arial, Verdana, sans-serif;
text-align: center;
}
.post-title {
margin: 0 0 20px;
}
.post-title-single {
margin: 0 0 50px;
}
h3.post-headline{
margin: 0 0 0 90px;
padding: 10px 0;
font-family:  georgia,'times new roman', Arial, Verdana, sans-serif;
font-size: 170%;
font-weight: bold;
font-style:italic;
border-bottom: 1px dashed #bdb693;
}
h3.post-headline a{
color:#93805a;
line-height:1.1em;
}
h3.post-title-page{
margin: 0;
padding: 10px 0;
font-family:  georgia,'times new roman', Arial, Verdana, sans-serif;
font-size: 170%;
font-weight: bold;
border-bottom: 1px dashed #bdb693;
color:#93805a;
font-style:italic;
}
h3.post-headline-result{
margin: 20px 0 0 0;
padding: 10px 0;
font-family:  georgia,'times new roman', Arial, Verdana, sans-serif;
font-size: 170%;
font-weight: bold;
font-style:italic;
border-bottom: 1px dashed #bdb693;
}
h3.post-headline-result a{
color:#93805a;
}
h3.nothing {
margin:  0 20px;
padding: 10px 0;
font-family:  georgia,'times new roman', Arial, Verdana, sans-serif;
font-size: 170%;
font-weight: bold;
font-style:italic;
color:#6f8259;
}
.post-date {
width: 80px;
height: 60px;
float: left;
font-family:georgia,'times new roman',arial, sans-serif;
padding: 17px 0 0;
font-style: italic;
margin: 7px 20px 0 0;
background: url(http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/bg_date.jpg) no-repeat;
display:block;
line-height:1em;
}
.month {
color: #fff;
font-size: 11px;
text-align: center;
margin: 0 0 0 28px;
}
.date {
margin: 2px 2px 0 0;
font-style:normal;
display:block;
text-align: center;
color: #fff;
font-size: 18px;
}
.year {
display: block;
color: #fff;
font-size: 11px;
text-align: center;
margin: 4px 2px 0 0;
}
.post-author {
margin: 0 0 30px ;
font-size:10px;
padding:5px 0;
}
.post-meta {
margin: 10px 0 40px;
padding: 2px 10px;
border: 1px dashed #bcc2b7 ;
background:#f4f2ea;
clear:both;
}
.post-comment {
margin: 10px 0 40px ;
padding: 2px 10px;
border:1px dashed #e1e1e1;
background:#f6f5f0;
clear:both;
}
.entry {
width: 610px;
margin: 0;
padding: 0 0 0 25px;
}
.entry-inner{
padding: 0 20px 0 0;
}
.entry img {
max-width: 98%;
margin: 5px auto;
padding: 2px;
border: 1px solid #dadada;
border-right:2px solid #e3e3e3;
border-bottom:2px solid #e3e3e3;
background: #f3f3f3;
}
/* page link ------------------------------------- */
.page-link {
margin: 25px 0;
font: 90% verdana, geneva, sans-serif;
color:#000;
}
.page-link a:link {
color: #c88501;
padding: 0.5em;
}
.page-link a:hover,.page-link a:visited {
padding: 0.5em;
color: #000;
}
/* content list style
------------------------------------------------*/
#maincol ul, #maincol ol, #maincol dl {
margin: 0 0 10px 0;
padding: 0;
}
#maincol ul, #maincol ol {
margin-left: 10px;
}
#maincol ol {
padding-left: 20px;
}
#maincol ul {
list-style: none;
}
#maincol ul ol li {
padding-left: 0;
background: none;
}
#maincol ul li {
padding: 0 0 5px 20px;
background: url(http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/icon_bullet.gif) no-repeat left 4px;
}
#maincol dl dt {
font-weight: bold;
}
#maincol dl dd {
margin: 0 0 15px 0;
padding: 0;
}
/* comments area
--------------------------------------------------*/
.comments{
margin: 20px;
}
h4#comments {
margin: 0 0 15px;
padding: 20px 0 0;
clear: both;
font-size: 120%;
font-family: georgia,Verdana, Times, sans-serif;
}
h4#respond {
margin: 0;
padding: 10px 0 0;
font-size: 120%;
font-family:georgia, Verdana, Times, sans-serif;
}
.commentlist {
margin: 10px 0;
padding-left: 20px;
}
.commentlist p {
margin: 0 7em 0 0;
}
.commentlist li{
padding: 10px;
margin: 10px 10px ;
border: 1px dashed #bcc2b7 ;
}
.commentlist .alt {
background:#f0eee4;
border: 1px dashed #bcc2b7 ;
}
.commentlist li .avatar {
float: right;
border: 1px solid #d9d9d9;
padding: 2px;
margin:0 0 0 10px;
background: #fff;
}
.commentlist cite {
font-weight: bold;
font-style: normal;
font-size: 120%;
}
.commentlist small {
margin-bottom: 5px;
display: block;
font-size: 87%;
}
#commentform {
font: 110% georgia,Arial, Helvetica, sans-serif;
}
#commentform p {
padding: 6px 0;
margin: 0;
}
#commentform label {
padding-left: 5px;
color: #666;
font-size: 80%;
}
#commentform input {
width: 200px;
background: #f6f5f0;
border: 1px dashed #cbcbcb;
border-right-color: #ddd;
border-bottom-color: #ddd;
padding: 3px;
margin-top: 3px;
}
#commentform textarea {
width: 90%;
height: 120px;
margin-top: 3px;
padding: 2px;
border: 1px dashed #cbcbcb;
background: #f6f5f0;
}
#commentform textarea:focus, #commentform input[type="text"]:focus {
background: #fff;
color:#484848;
}
#commentform #submit {
width: 165px;
height: 40px;
margin-bottom: 10px;
padding:7px 0 10px;
color: #fff;
font: bold 11px georgia, Helvetica, sans-serif;
background: url(http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/btn_submit.gif) no-repeat 5px 3px;
border: none ;
font-style:italic;
}
/* alignments
--------------------------------------------------*/
.center {
text-align: center;
}
img.center, img[align="center"] {
display: block;
margin-left: auto;
margin-right: auto;
}
.alignleft {
float: left;
}
img.alignleft, img[align="left"] {
float: left;
margin: 5px 8px 5px 0;
}
.alignright {
float: right;
}
img.alignright, img[align="right"] {
float: right;
margin: 2px 0 5px 8px;
}
/* navigation
-------------------------------------------------*/
.navigation {
width:640px;
margin:0;
color:#666;
font-family:georgia,'times new roman',arial, serif;
font-size:120%;
font-style:italic;
}
.navigation a:link{
color:#000;
}
.navigation a:hover,a:visited {
color:#800;
}
.alignright {
float:right;margin:30px 30px 25px 0 ;
}
.alignleft{
float:left;margin:30px 0 25px 30px;
}
span.next {
background:transparent url(http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/next.gif) no-repeat 100% 0;
border:0;
margin:0;
padding:20px 80px 30px 0;
display:inline-block;
}
span.prev{
background:transparent url(http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/prev.gif) no-repeat 0 0;
border:0;
margin:0;
padding:20px 0 30px 80px;
display:inline-block;
}
/* sidebar
---------------------------------------------------------- */
h2.sidebartitle {
margin: 20px 30px 10px 20px;
padding: 6px 3px 8px 0;
color: #d5d5d5;
font-weight:bold;
font-size:20px;
font-family:georgia, verdana,arial, "Times New Roman", Times, serif;
font-style: italic;
text-align:center;
background:url(http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/sidebartitle_widget.gif) no-repeat;
}
h2.sidebarimg {
height:60px;
}
/* sidebar list
-------------------------------------------------*/
/* search form
-------------------------------------------------*/
#search{
width:260px;
margin: 0 0 20px 10px;
padding:0 0 0 8px;
background:#454238;
border:1px solid #5d5d5d;
}
#searchform br {
display: none;
}
#searchform #s {
width: 180px;
height: 20px;
padding:5px 0 0 10px ;
color: #fff;
background:#454238;
border:none;
font-size:12px;
font-family: georgia,verdana,Arial, Helvetica, sans-serif;
font-style: italic;
}
#searchform #searchsubmit {
vertical-align: middle;
}
.sidebar ul {
margin: 0 0 0 5px;
padding: 0;
}
.sidebar ul li  {
list-style: none;
margin:0;
padding:2px 0 0;
}
.sidebar ul li  a:link {
margin: 0 0 0 25px;
padding: 0 5px 0 0;
color: #fff;
font-size:11px;
font-weight:bold;
font-family: verdana,Arial, Helvetica, sans-serif;
}
.sidebar ul li  a:hover, .sidebar ul li a:visited  {
margin: 0 0 0 25px;
padding: 0 5px 0 0;
color:#cbbc41;
border-bottom:1px dotted #cbbc41;
font-family: verdana,Arial, Helvetica, sans-serif;
font-size:11px;
font-weight:bold;
}
.sidebar li span.title {
display:block;
margin: 0 20px 0 25px;
}
.sidebar li span.title a:link {
border-bottom:1px dotted #fff;
padding: 0 0 2px 0;
margin: 0;
}
.sidebar li span.title a:hover,.sidebar li span.title a:visited {
border-bottom:1px dotted #cbbc41;
padding: 0 0 2px 0;
margin: 0;
}
.sidebar ul li span.date_publish {
font-size: 10px;
color: #e9e9e9;
display: block;
margin: 0 0 2px 25px;
}
.sidebar .advertise {
text-align: left;
padding:0;
margin: 20px 10px 10px;
}
.sidebar .advertise img {
padding:0;
border:none;
margin:5px 5px 2px;
}
#tag_cloud a {
padding:0 5px;
}
.tags{
padding: 15px 10px 25px;
}
.tags a:link {
font-family:georgia, Arial, Helvetica, sans-serif;
padding: 2px;
color: #fff;
line-height:1em;
}
.tags a:hover,.tags a:visited {
color: #cbbc41;
}
.sidebar #recent-comments li {
padding: 2px 5px 2px 10px;
margin:0;
color:#fff;
font-family: georgia,verdana,Arial, Helvetica, sans-serif;
font-weight:bold;
}
.sidebar #recent-comments li a:link {
color:#cbbc41;
margin: 0;
}
.sidebar #recent-comments li a:hover,.sidebar #recent-comments li a:visited{
border-bottom:1px dotted #fff;
color:#fff;
text-decoration: none;
}
/* widget
---------------------------------------------------*/
.sidebar li {
list-style:none;
}
.sidebar li#tag_cloud a{
padding: 0 0 0 15px;
}
.sidebar ul.children {
border:none;
}
.sidebar ul.children li {
padding-left: 20px;
background: url(http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/icon_bullet_sbchild.gif) no-repeat 30px 8px;
}
#pages ul li ul  {
padding:0 0 0 10px;
border:none;
}
#pages ul li ul li {
padding-left: 10px;
background:url(http://webrevolutionary.com/curious-demo/wp-content/themes/curious/images/icon_bullet_sbchild.gif) no-repeat 15px 8px;
}
/* calendar widget
-----------------------------------------------------*/
#calendar_wrap {
padding: 5px 10px;
color:#fff;
}
#wp-calendar caption {
margin-bottom: 5px;
color: #fff;
}
#wp-calendar td a {
color: #fff;
}
#wp-calendar td#today {
color:#fff;
background: #bcb08e;
}
#rightcol #wp-calendar td {
margin: 0;
padding: 0 9px;
}
/* text widget
-------------------------------------------------*/
.textwidget {
padding: 0 10px;
}
/* footer
---------------------------------------------------------- */
#footer {
min-width:940px;
margin: 0 ;
padding:  5px 0;
font-size: 12px;
background:#4f4b3c;
border-top:1px dashed #b3ad93;
}
#footer-inner {
width:940px;
margin: 0 auto;
position:relative;
}
#footer p{
padding: 12px 25px 14px 0;
color:#fff;
font-family:georgia,'times new roman',arial, sans-serif;
}
#validated {
position:absolute;
right:20px;
bottom:0px;
}
/* self-clearing floats------------------------------ */
#nav ul:after,
#content:after,
#maincol:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
table {margin-left: auto;margin-right: auto}