Ice Blue Tasarımlar 3

mORBİ tEMPUS gERÇEKTEN hARİKA bİR TASARIM
Tasarımın Üzerine
<!-- start header -->
<div id="header">
<div id="menu">
<ul>
<li class="current_page_item"><a href="#"><span class="numbertxt">01 </span>Ana Sayfa</a></li>
<li><a href="#"><span class="numbertxt">02 </span>Toplist</a></li>
<li><a href="#"><span class="numbertxt">03 </span>İletişim</a></li>
<li><a href="#"><span class="numbertxt">04 </span>Hakkında</a></li>
<li class="last"><a href="#"><span class="numbertxt">05 </span>Linkler</a></li>
</ul>
</div>
</div>
<div id="logo">
<h1><a href="http://www.css-merkez.tr.gg">Site Adi</a></h1>
<h2> Design by Css Merkez</h2>
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">

Tasarımın Altına
</div>
<!-- end content -->
<!-- start sidebar -->
<div id="sidebar">
<ul>
<li id="search">
<h2>Saat</h2>
<center><embed height="89" align="" width="162" src="http://www.dostyurdu.com/flash/saat.swf" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" menu="false"></embed></center>
</li>
<li>
<h2>Ana Menu</h2>
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Toplist</a></li>
<li><a href="#">İletişim</a></li>
<li><a href="#">Ziyaretci Defteri</a></li>
<li><a href="#">Hakkımızda</a></li>
<li><a href="#">Diğer Konular</a></li>
<li><a href="#">Tasarimlar</a></li>
</ul>
</li>
<li>
<h2>Arşiv</h2>
<ul>
<li><a href="#">Ocak</a></li>
<li><a href="#">Şubat</a></li>
<li><a href="#">Mart</a></li>
<li><a href="#">Nisan</a></li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
<!-- start footer -->
<div id="footer">
<div id="footer-wrap">
<p id="legal">(c) 2009 SiteAdı. Design by <a href="http://www.css-merkez.tr.gg">Css Merkez</a>.</p>
</div>
</div>
<!-- end footer -->
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;}



body {
margin: 0;
padding: 0;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img01.gif) repeat-x left top;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
}

h1, h2, h3 {
margin: 0;
text-transform: lowercase;
font-weight: normal;
color: #7D7D7D;
}

h1 {
letter-spacing: -1px;
font-size: 32px;
}

h2 {
font-size: 23px;
}

p, ul, ol {
margin: 0 0 2em 0;
text-align: justify;
line-height: 26px;
font-size: 11px;
}

a:link {
color: #6DBD0B;
}

a:hover, a:active {
text-decoration: none;
color: #6DBD0B;
}

a:visited {
color: #6DBD0B;
}

img {
border: 1px dashed #86E714;
padding: 2px;
}

img.left {
float: left;
margin-right: 15px;
}

img.right {
float: right;
margin-left: 15px;
}

/* Form */

form {
margin: 0;
padding: 0;
}

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

legend {
display: none;
}

input, textarea, select {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
}

/* Header */

#header {
width: 860px;
height: 50px;
margin: 0 auto;
}

/* Menu */

#menu {
width: 860px;
margin: 0;
padding: 0;
}

#menu ul {
float: right;
display: block;
margin: 0;
padding: 0px 0 0 0px;
list-style: none;
line-height: normal;
}

#menu li {
display: inline;
}

#menu a {
margin-right: 3px;
padding: 10px 15px 10px 10px;
letter-spacing: -.5px;
text-decoration: none;
text-transform: lowercase;
font: 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFFFFF;
}

#menu a:hover {
text-decoration: none;
color: #FFFFFF;
}

#menu .current_page_item a {
color: #FFFFFF;
}

#menu .numbertxt {
font-size: 28px;
color: #C4F28D;
}

#menu span {
margin: 0;
padding: 0;
}

/** LOGO */

#logo {
clear: both;
width: 860px;
height: 80px;
margin: 0 auto;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img02.gif) no-repeat left top;
}

#logo h1, #logo h2 {
margin: 0;
padding: 0 0 0 75px;
line-height: normal;
}

#logo h1 { }

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

#logo h1 a:hover { text-decoration: underline; }

#logo h2 {
padding:
float: left;
font: italic 13px Georgia, "Times New Roman", Times, serif;
color: #66B209;
}

#logo p a {
text-decoration: none;
}

#logo p a:hover { text-decoration: underline; }



/* Page */

#page {
width: 850px;
margin: 0 auto;
}

/* Content */

#content {
float: right;
width: 600px;
}

/* Post */

.post {
padding: 15px 15px;
}

.post .title {
margin-bottom: 20px;
border-bottom: 1px dotted #D1D1D1;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img04.jpg) repeat-x left bottom;
}

.post .entry {
}

.post .meta {
height: 70px;
padding: 40px 15px 0px 15px;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img03.jpg) repeat-x left top;
}

.post .meta p {
margin: 0;
line-height: normal;
color: #999999;
}

.post .meta .byline {
float: left;
}

.post .meta .links {
float: right;
}

.post .meta .more {
padding: 0 20px 0 18px;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img09.gif) no-repeat left 50%;
}

.post .meta .comments {
padding-left: 22px;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img08.gif) no-repeat left 50%;
}

.post .meta b {
display: none;
}

/* Sidebar */

#sidebar {
float: left;
width: 215px;
}

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

#sidebar li {
margin-bottom: 40px;
}

#sidebar li ul {
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img03.jpg) repeat-x left bottom;
padding-bottom: 20px;
}

#sidebar li li {
margin: 0;
padding-left: 12px;
}

#sidebar h2 {
padding-top: 20px;
margin-bottom: 10px;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img04.jpg) repeat-x left bottom;
border-bottom: 1px dotted #D1D1D1;
font-size: 18px;
}

/* Search */

#search {
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img03.jpg) repeat-x left bottom;
margin-bottom: 20px;
}

#search h2 {
margin-bottom: 20px;
}

#s {
width: 115px;
margin-right: 5px;
margin-left: 15px;
margin-bottom: 20px;
padding: 3px 0px 3px 15px;
border: 1px solid #F0F0F0;
}

#x {
margin-bottom: 20px;
padding: 3px 3px 3px 3px;
background: #ECECEC;
border: none;
text-transform: lowercase;
font-size: 11px;
color: #4F4F4F;
}

/* Boxes */

.box1 {
padding: 20px;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img05.gif) no-repeat;
}

.box2 {
color: #BABABA;
}

.box2 h2 {
margin-bottom: 15px;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img10.gif) repeat-x left bottom;
font-size: 16px;
color: #FFFFFF;
}

.box2 ul {
margin: 0;
padding: 0;
list-style: none;
}

.box2 a:link, .box2 a:hover, .box2 a:active, .box2 a:visited {
color: #EDEDED;
}

/* Footer */
#footer-wrap {
width: 860px;
height: 52px;
margin: 0 auto;
}

#footer {
margin: 0 auto;
height: 52px;
min-height: 52px;
padding: 0;
background: #A0A0A3 url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img05.gif) repeat-x left bottom;
}

html>body #footer {
height: auto;
}

#footer p {
}

#legal {
clear: both;
padding-top: 15px;
text-align: center;
color: #FFFFFF;
}

#legal a {
font-weight: bold;
color: #FFFFFF;
}

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: 0;
padding: 0;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img01.gif) repeat-x left top;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
}

h1, h2, h3 {
margin: 0;
text-transform: lowercase;
font-weight: normal;
color: #7D7D7D;
}

h1 {
letter-spacing: -1px;
font-size: 32px;
}

h2 {
font-size: 23px;
}

p, ul, ol {
margin: 0 0 2em 0;
text-align: justify;
line-height: 26px;
font-size: 11px;
}

a:link {
color: #6DBD0B;
}

a:hover, a:active {
text-decoration: none;
color: #6DBD0B;
}

a:visited {
color: #6DBD0B;
}

img {
border: 1px dashed #86E714;
padding: 2px;
}

img.left {
float: left;
margin-right: 15px;
}

img.right {
float: right;
margin-left: 15px;
}

/* Form */

form {
margin: 0;
padding: 0;
}

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

legend {
display: none;
}

input, textarea, select {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #333333;
}

/* Header */

#header {
width: 860px;
height: 50px;
margin: 0 auto;
}

/* Menu */

#menu {
width: 860px;
margin: 0;
padding: 0;
}

#menu ul {
float: right;
display: block;
margin: 0;
padding: 0px 0 0 0px;
list-style: none;
line-height: normal;
}

#menu li {
display: inline;
}

#menu a {
margin-right: 3px;
padding: 10px 15px 10px 10px;
letter-spacing: -.5px;
text-decoration: none;
text-transform: lowercase;
font: 16px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFFFFF;
}

#menu a:hover {
text-decoration: none;
color: #FFFFFF;
}

#menu .current_page_item a {
color: #FFFFFF;
}

#menu .numbertxt {
font-size: 28px;
color: #C4F28D;
}

#menu span {
margin: 0;
padding: 0;
}

/** LOGO */

#logo {
clear: both;
width: 860px;
height: 80px;
margin: 0 auto;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img02.gif) no-repeat left top;
}

#logo h1, #logo h2 {
margin: 0;
padding: 0 0 0 75px;
line-height: normal;
}

#logo h1 { }

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

#logo h1 a:hover { text-decoration: underline; }

#logo h2 {
padding:
float: left;
font: italic 13px Georgia, "Times New Roman", Times, serif;
color: #66B209;
}

#logo p a {
text-decoration: none;
}

#logo p a:hover { text-decoration: underline; }



/* Page */

#page {
width: 850px;
margin: 0 auto;
}

/* Content */

#content {
float: right;
width: 600px;
}

/* Post */

.post {
padding: 15px 15px;
}

.post .title {
margin-bottom: 20px;
border-bottom: 1px dotted #D1D1D1;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img04.jpg) repeat-x left bottom;
}

.post .entry {
}

.post .meta {
height: 70px;
padding: 40px 15px 0px 15px;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img03.jpg) repeat-x left top;
}

.post .meta p {
margin: 0;
line-height: normal;
color: #999999;
}

.post .meta .byline {
float: left;
}

.post .meta .links {
float: right;
}

.post .meta .more {
padding: 0 20px 0 18px;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img09.gif) no-repeat left 50%;
}

.post .meta .comments {
padding-left: 22px;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img08.gif) no-repeat left 50%;
}

.post .meta b {
display: none;
}

/* Sidebar */

#sidebar {
float: left;
width: 215px;
}

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

#sidebar li {
margin-bottom: 40px;
}

#sidebar li ul {
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img03.jpg) repeat-x left bottom;
padding-bottom: 20px;
}

#sidebar li li {
margin: 0;
padding-left: 12px;
}

#sidebar h2 {
padding-top: 20px;
margin-bottom: 10px;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img04.jpg) repeat-x left bottom;
border-bottom: 1px dotted #D1D1D1;
font-size: 18px;
}

/* Search */

#search {
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img03.jpg) repeat-x left bottom;
margin-bottom: 20px;
}

#search h2 {
margin-bottom: 20px;
}

#s {
width: 115px;
margin-right: 5px;
margin-left: 15px;
margin-bottom: 20px;
padding: 3px 0px 3px 15px;
border: 1px solid #F0F0F0;
}

#x {
margin-bottom: 20px;
padding: 3px 3px 3px 3px;
background: #ECECEC;
border: none;
text-transform: lowercase;
font-size: 11px;
color: #4F4F4F;
}

/* Boxes */

.box1 {
padding: 20px;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img05.gif) no-repeat;
}

.box2 {
color: #BABABA;
}

.box2 h2 {
margin-bottom: 15px;
background: url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img10.gif) repeat-x left bottom;
font-size: 16px;
color: #FFFFFF;
}

.box2 ul {
margin: 0;
padding: 0;
list-style: none;
}

.box2 a:link, .box2 a:hover, .box2 a:active, .box2 a:visited {
color: #EDEDED;
}

/* Footer */
#footer-wrap {
width: 860px;
height: 52px;
margin: 0 auto;
}

#footer {
margin: 0 auto;
height: 52px;
min-height: 52px;
padding: 0;
background: #A0A0A3 url(http://csstasarimm.cs.funpic.org/Tasarim/Sari/img05.gif) repeat-x left bottom;
}

html>body #footer {
height: auto;
}

#footer p {
}

#legal {
clear: both;
padding-top: 15px;
text-align: center;
color: #FFFFFF;
}

#legal a {
font-weight: bold;
color: #FFFFFF;
}

Cascading Style Sheets (Türkçede Stil şablonları) yani bilinen kısa adıyla CSS, HTML'e ek olarak metin ve format biçimlendirme alanında fazladan olanaklar sunan bir web teknolojisidir. İnternet sayfaları için genelgeçer şablonlar hazırlama olanağı verdiği gibi, bağımsız olarak harflerin stilini; yani renk, yazı tipi, büyüklük gibi özelliklerini değiştirmek için de kullanılabilir. Bu tekniğin en önemli özelliği kullanımındaki esnekliktir.

Bir web sayfası içerisinde birbiriyle uyumlu birkaç renk ve birkaç yazı tip kullanılır ve bunları her sayfada ayrı ayrı tekrar belirtmek yerine CSS yardımıyla bir sefer tanımlayıp bütün web sayfalarında ortak olarak kullanılabilir. Bu şekilde, sayfaların hafızadaki boyutu epey küçüldüğü gibi, güncelleme yapmak da kolaylaşır.

paylaşım için sağol süper tasarımış!