Css tasarimlari
Önizleme; (Daha iyi bakmak için üstüne tıklayın)
Tasarım Üst
<style type="text/css">
table {margin-left: auto;margin-right: auto}
</style>
<div id="design">
<div id="top">
<div class="reklamalani">Reklammmmmmm</div>
<div class="ustmenu">Üst menüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüü</div></div>
<div id="icerik">
<div id="icontent">
<div class="writer">
Tasarım Alt
<style type="text/css">
table {margin-left: auto;margin-right: auto}
</style>
<div id="design">
<div id="top">
<div class="reklamalani">Reklammmmmmm</div>
<div class="ustmenu">Üst menü</div></div>
<div id="icerik">
<div id="icontent">
<div class="writer">
Tasarım Alt
</div>
</div>
<div id="footer"><p class="linktakas">Link değişimmmmmmmm</p></div>
</div>
Css Kısmına
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;}
* {padding: 0; margin:0 }
body {
margin-left: auto;
margin-right: auto;
background: url(https://img.webme.com/pic/h/hyperend/52.jpg);
text-align: center;}
#design {
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: left;}
#top{
margin-left: auto;
margin-right: auto;
background: url(https://img.webme.com/pic/t/tasarim-t/csstasarim1_01.jpg);
width: 900px;
height: 226px;
float: left;}
.reklamalani {
width:468px;
padding: 50px 0 0 414px;
float: left;
overflow: hidden;
}
.ustmenu {
width:800px;
padding: 110px 0 0 5px;
float: left;}
#icerik {
margin-left: auto;
margin-right: auto;
background: url(https://img.webme.com/pic/t/tasarim-t/csstasarim1_02.jpg);
float: left;
overflow:hidden ;}
#icontent {
width: 900px;
padding: 0 0 0 5px;
overflow:hidden ;
float: left;}
.writer {
width: 880px;
padding: 0 0 0 5px;
float: left;
overflow: hidden;}
#footer{
margin-left: auto;
margin-right: auto;
background: url(https://img.webme.com/pic/t/tasarim-t/csstasarim1_03.jpg);
width: 900px;
height: 103px;
float: left;
}.linktakas{
margin-left: auto;
margin-right: auto;
width:210px;
height:65px;
padding: 50px 0 0 520px;
float: left;}
Kırmızı Gri Tasarım
[Resmin üstüne tıkla resim büyüsün !]
Tasarım Üst
</div>
</div>
<div id="footer"><p class="linktakas">Link değişimmmmmmmm</p></div>
</div>
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;}
* {padding: 0; margin:0 }
body {
margin-left: auto;
margin-right: auto;
background: url(http://www.backgroundlabs.com/backgrounds/261.gif) top center fixed;}
#design {
width: 900px;
margin-left: auto;
margin-right: auto;
text-align: left;}
#top{
margin-left: auto;
margin-right: auto;
background: url(https://img.webme.com/pic/t/tasarim-t/tasarim-2_01.gif);
width: 900px;
height: 185px;
float: left;}
.reklamalani {
width:468px;
padding: 65px 0 0 41px;
float: left;
overflow: hidden;
}
.ustmenu {
width:800px;
padding: 20px 0 0 10px;
float: left;}
#icerik {
margin-left: auto;
margin-right: auto;
background: url(https://img.webme.com/pic/t/tasarim-t/tasarim-2_02.gif);
float: left;
overflow:hidden ;}
#icontent {
width: 900px;
padding: 0 0 0 5px;
overflow:hidden ;
float: left;}
.writer {
width: 880px;
padding: 0 0 0 5px;
float: left;
overflow: hidden;}
#footer{
margin-left: auto;
margin-right: auto;
background: url(https://img.webme.com/pic/t/tasarim-t/tasarim-2_03.gif);
width: 900px;
height: 105px;
float: left;
}.linktakas{
margin-left: auto;
margin-right: auto;
width:210px;
height:65px;
padding: 50px 0 0 10px;
float: left;}
Tasarımın Üstüne
Kod:
<div id="content">
<!-- start header -->
<div id="main">
<div id="header">
<!--Header start -->
<div id="logo">
<h1>Tam-Senliq.Tr.Gg</h1>
<h2><a href="tam-senliq-deneme.tr.gg/" id="metamorph">Uyarladığım Tasarıma Bakmakta Bulunuyorsunuz..</a></h2>
</div>
<!--Header end -->
<div id="menu">
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Boş</a></li>
<li><a href="#">Boş</a></li>
<li><a href="#">Boş</a></li>
<li><a href="#">Boş</a></li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="text">
Kod:
<p>Dikkat Bu Tasarım 1024*768 Pixel Çözünürlüğe Göre Ayarlanmıştır.</p>
<p>Copyright © 2009. Design adapted from<a href="www.tam-senliq.tr.gg">Arif_Yurtsewer</a></p>
</div>
</div>
<div style="clear: both"></div></div>
<div id="footer">
<p>Dikkat Bu Tasarım 1024*768 Pixel Çözünürlüğe Göre Ayarlanmıştır.</p>
<p>Copyright © 2009. Design adapted from<a href="www.tam-senliq.tr.gg">Arif_Yurtsewer</a></p>
</div>
</div>
<div style="clear: both"></div></div>
Css Kodu
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;}
*{
padding: 0px;
margin: 0px;
}
body{
background:#153B00 url(https://img.webme.com/pic/t/tam-senliq-deneme/back_all2.gif) top repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color:#898989;
padding: 0px;
margin: 0px;
}
#content
{
background: url(https://img.webme.com/pic/t/tam-senliq-deneme/back_all1.jpg) top left no-repeat;
width: 100%;
}
a{
color:#153B00;
text-decoration:none;
}
a:hover, a:active{
color:#153B00;
text-decoration:underline;
}
#header{
height: 411px;
}
#menu
{
height: 39px;
width: 448px;
padding-left: 50px;
background: url(https://img.webme.com/pic/t/tam-senliq-deneme/menu.png) no-repeat;
margin-bottom: 10px;
}
#menu ul li{
list-style: none;
display: inline;
}
#menu a
{
display: block;
float: left;
width: 80px;
height: 29px;
text-align: center;
padding-top: 10px;
color: #ffffff;
font-weight: bold;
}
#menu a:hover
{
display: block;
padding-top: 10px;
height: 29px;
float: left;
color: #ffffff;
font-weight: bold;
background: url(https://img.webme.com/pic/t/tam-senliq-deneme/menu_r.gif) repeat-x;
}
#main
{
width:498px;
margin: 0 auto;
}
#wrapper
{
width: 498px;
background: url(https://img.webme.com/pic/t/tam-senliq-deneme/top.png) no-repeat top;
padding-top: 5px;
}
#logo
{
height: 360px;
width: 498px;
text-align: right;
}
#logo h1
{
font-size: 18px;
padding-top: 220px;
padding-left: 20px;
font-weight: bold;
color: #E6E6E6;
}
#logo h2 a
{
font-size: 10px;
padding-left: 20px;
font-weight: bold;
color: #E6E6E6;
text-transform: uppercase;
}
#text{
background: #FFFFFF;
padding:10px;
}
#text p{
padding:5px;
}
h1, h2, h3{
color:#153B00;
}
h1{
font-size:1.2em;
}
h2{
font-size:1.05em;
}
h3{
font-size:1em;
}
#text ul, ol{
padding-left:12px;
margin-left:12px;
}
.meta{
text-align:right;
color:#153B00;
font-size:0.79em;
}
.meta a{
text-decoration:underline;
}
#footer{
font-size:0.79em;
text-align:center;
border-top:1px solid #B07A34;
background: url(https://img.webme.com/pic/t/tam-senliq-deneme/bottom.png) bottom;
margin-bottom: 20px;
height: 50px;
padding-top: 10px;
}
#footer a{
text-decoration:underline;
}
Kod:
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}
*{
padding: 0px;
margin: 0px;
}
body{
background:#153B00 url(https://img.webme.com/pic/t/tam-senliq-deneme/back_all2.gif) top repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color:#898989;
padding: 0px;
margin: 0px;
}
#content
{
background: url(https://img.webme.com/pic/t/tam-senliq-deneme/back_all1.jpg) top left no-repeat;
width: 100%;
}
a{
color:#153B00;
text-decoration:none;
}
a:hover, a:active{
color:#153B00;
text-decoration:underline;
}
#header{
height: 411px;
}
#menu
{
height: 39px;
width: 448px;
padding-left: 50px;
background: url(https://img.webme.com/pic/t/tam-senliq-deneme/menu.png) no-repeat;
margin-bottom: 10px;
}
#menu ul li{
list-style: none;
display: inline;
}
#menu a
{
display: block;
float: left;
width: 80px;
height: 29px;
text-align: center;
padding-top: 10px;
color: #ffffff;
font-weight: bold;
}
#menu a:hover
{
display: block;
padding-top: 10px;
height: 29px;
float: left;
color: #ffffff;
font-weight: bold;
background: url(https://img.webme.com/pic/t/tam-senliq-deneme/menu_r.gif) repeat-x;
}
#main
{
width:498px;
margin: 0 auto;
}
#wrapper
{
width: 498px;
background: url(https://img.webme.com/pic/t/tam-senliq-deneme/top.png) no-repeat top;
padding-top: 5px;
}
#logo
{
height: 360px;
width: 498px;
text-align: right;
}
#logo h1
{
font-size: 18px;
padding-top: 220px;
padding-left: 20px;
font-weight: bold;
color: #E6E6E6;
}
#logo h2 a
{
font-size: 10px;
padding-left: 20px;
font-weight: bold;
color: #E6E6E6;
text-transform: uppercase;
}
#text{
background: #FFFFFF;
padding:10px;
}
#text p{
padding:5px;
}
h1, h2, h3{
color:#153B00;
}
h1{
font-size:1.2em;
}
h2{
font-size:1.05em;
}
h3{
font-size:1em;
}
#text ul, ol{
padding-left:12px;
margin-left:12px;
}
.meta{
text-align:right;
color:#153B00;
font-size:0.79em;
}
.meta a{
text-decoration:underline;
}
#footer{
font-size:0.79em;
text-align:center;
border-top:1px solid #B07A34;
background: url(https://img.webme.com/pic/t/tam-senliq-deneme/bottom.png) bottom;
margin-bottom: 20px;
height: 50px;
padding-top: 10px;
}
#footer a{
text-decoration:underline;
}
<style type="text/css">
table {margin-left: auto;margin-right: auto}
</style>
<div id="design">
<div id="top">
<div class="reklamalani">Reklammmmmmm</div>
<div class="ustmenu">Üst menüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüüü</div></div>
<div id="icerik">
<div id="icontent">
<div class="writer">
Tasarım Alt
<div id="content">
<!-- start header -->
<div id="main">
<div id="header">
<!--Header start -->
<div id="logo">
<h1>Tam-Senliq.Tr.Gg</h1>
<h2><a href="tam-senliq-deneme.tr.gg/" id="metamorph">Uyarladığım Tasarıma Bakmakta Bulunuyorsunuz..</a></h2>
</div>
<!--Header end -->
<div id="menu">
<ul>
<li><a href="#">Ana Sayfa</a></li>
<li><a href="#">Boş</a></li>
<li><a href="#">Boş</a></li>
<li><a href="#">Boş</a></li>
<li><a href="#">Boş</a></li>
</ul>
</div>
</div>
<div id="wrapper">
<div id="text">
Tasarımın Altına