Arkadaşlar Bir İki Haftadır Tasarım Nasıl Çizilir Nasıl Kodlanır Öğrenmeye Çalışıordum.Sonunda Kavradım Bu İşi. Veee İlk Tasarımı Çizdim. Gri Tasarım...
Özellikleri:
Yapımcı :
www.mayhann.tr.gg - Mehmet Ayhan
Tasarım Özellikleri -->
-->EN ÜSTTE 400X60 LOGO
-->ÜST MENÜ - DİKEY
-->YİNE EN ÜSTTE BANNER REKLAM (468X60)
-->İÇERİĞİN ÜST KISMINDA 728X90 REKLAM
-->SAĞ MENÜ - DİKEY (URBAN GRAY MENÜ)
-->EN ALTTA 500X70 REKLAM
-->COPYRIGHT KISMINDA 70X70 LOGO VE COPYRIGHT
Önizleme Resim :
http://mayhan.com.nu/wp-content/uploads/2012/03/gri-tasarim-resim-%C3%B6nizleme.png
Demo :
http://denemeyelimmi.tr.gg/
KODLAR :
Tasarımın Üstü -->
Kod: <table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="408" height="60" align="right" valign="bottom"><a href="http://www.mayhann.tr.gg"><img src="http://mayhan.com.nu/wp-content/uploads/2012/03/ust_logo.png" width="400" height="60" /></a></td>
<td> </td>
<td width="476" height="60" align="left" valign="bottom"><a href="http://www.mayhann.tr.gg"><img src="http://mayhan.com.nu/wp-content/uploads/2012/03/ust_reklam.png" width="468" height="60" /></a></td>
</tr>
</table>
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="192" align="left" valign="top" background="http://mayhan.com.nu/wp-content/uploads/2012/03/myhnn_01.png">
<table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="35">
<ul class="solidblockmenu">
<li><a _fcksavedurl="http://mayhann.tr.gg/" href="http://mayhann.tr.gg/"> <strong>AnaSayfa</strong></a> </li>
<li><a _fcksavedurl="http://mayhann.tr.gg/iletisim.htm" href="http://mayhann.tr.gg/iletisim.htm"><strong>İletişim</strong></a></li>
<li><a _fcksavedurl="http://mayhann.tr.gg/about.htm" href="http://mayhann.tr.gg/about.htm"><strong>Hakkımda</strong></a></li>
<li><a _fcksavedurl="çhttp://mayhann.de.tl/guestbook.htm" href="http://mayhann.de.tl/guestbook.htm"><strong>Konuk Defteri</strong></a></li>
<li><a _fcksavedurl="http://mayhann.de.tl/toplist.htm" href="http://mayhann.de.tl/toplist.htm"><strong>Top Liste</strong></a></li>
<li><a _fcksavedurl="http://mayhann.de.tl/sitemap.htm" href="http://mayhann.de.tl/sitemap.htm"><strong>Sitemap</strong></a></li>
<li><a _fcksavedurl="http://mayhann.de.tl/forum/index.htm" href="http://mayhann.de.tl/forum/index.htm"><strong>Forum</strong></a></li>
<li><a _fcksavedurl="http://mayhann.de.tl/bda.htm" href="http://mayhann.de.tl/bda.htm"><strong>BDA</strong></a></li> </ul>
</td>
</tr>
<tr>
<td height="90" align="center"><div id="ust_genisreklam"><a href="http://www.mayhann.tr.gg"><img src="http://mayhan.com.nu/wp-content/uploads/2012/03/mayhan-genis.gif" width="728" height="90" vspace="1" /></a></div></td>
</tr>
</table></td>
</tr>
<tr>
<td width="900" align="left" valign="top" background="http://mayhan.com.nu/wp-content/uploads/2012/03/myhnn_021.png">
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="36"> </td>
<td width="230">
<div class="urbangreymenu">
<h3 class="headerbar">ANA MENÜ</h3>
<ul>
<li><a href="http://www.MAYHANN.tr.gg/">Anasayfa</a></li>
<li><a href="http://www.MAYHANN.tr.gg/iletisim.htm">İletişim</a></li>
<li><a href="http://www.MAYHANN.tr.gg/guestbook.htm">Ziyaretçi Defteri</a></li>
<li><a href="http://www.MAYHANN.tr.gg/">Top Liste</a></li>
<li><a href="http://www.MAYHANN.tr.gg/">Banner Değişim</a></li>
<li><a href="http://www.MAYHANN.tr.gg/">Ben Kimim?</a></li>
<li><a href="http://www.MAYHANN.tr.gg/">Sitemap</a></li>
<li><a href="http://www.MAYHANN.tr.gg/">Forum</a></li>
</ul>
<h3 class="headerbar">SİTEN İÇİN</h3>
<ul>
<li><a href="http://www.MAYHANN.tr.gg/" >Temalar</a></li>
<li><a href="http://www.MAYHANN.tr.gg/">Html Kodları</a></li>
<li><a href="http://www.MAYHANN.tr.gg/">İcon Arşivi</a></li>
<li><a href="http://www.MAYHANN.tr.gg/">Menüler</a></li>
<li><a href="http://www.MAYHANN.tr.gg/">Yararlı Siteler</a></li>
<li><a href="http://www.MAYHANN.tr.gg/">Usebarlar</a></li>
<li><a href="http://www.MAYHANN.tr.gg/">B-S Dersleri</a></li>
</ul>
<h3 class="headerbar">EĞLENCE</h3>
<ul>
<li><a href="http://www.MAYHANN.tr.gg/" >Video</a></li>
<li><a href="http://www.MAYHANN.tr.gg/">MP3</a></li>
<li><a href="http://www.MAYHANN.tr.gg/">Canlı TV</a></li>
<li><a href="http://www.MAYHANN.tr.gg/">Aşk Ölçer</a></li>
<li><a href="http://www.MAYHANN.tr.gg/">Resim Arşivi</a></li>
<li><a href="http://www.MAYHANN.tr.gg/">Sohbet</a></li>
</ul>
</div>
</td>
<td width="25"> </td>
<td width="565" align="left" valign="top"><div id="content">
Kod: </div></td>
<td width="44"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="138" align="left" valign="top" background="http://mayhan.com.nu/wp-content/uploads/2012/03/myhnn_03.png"><table width="900" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="31" height="22"> </td>
<td width="524" align="left" valign="top"> </td>
<td width="345"> </td>
</tr>
<tr>
<td height="85"> </td>
<td align="left" valign="top"><div onclick="location.href='http://www.mayhann.tr.gg'" style="cursor:pointer"><div id="alt_reklam"></div></div></td>
<td align="left" valign="top"><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="84" height="84"><img src="http://mayhan.com.nu/wp-content/uploads/2012/03/logo-70x70.jpg" width="70" height="70" hspace="7" /></td>
<td width="10" align="left"><span style="font-size: x-small;"><span style="font-family: Arial;"><em><strong><br/>
</strong></em></span></span> </td>
<td width="251" align="left"><span style="font-size: small;"><span style="font-family: Arial;"><em><strong> Copyright © 2008-2011 İstanbul<br/>
Kişisel Blog - Mehmet Ayhan<br/>
Tüm Hakları Saklıdır </strong><span style="color: rgb(255, 0, 0);"><strong>Mayhann</strong></span></em></span></span> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
Kod: table {margin-left: auto;margin-right: auto}
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;}
#ust_genisreklam {
height: 90px;
width: 728px;
margin-right: auto;
margin-left: auto;
list-style-image: url(http://mayhan.com.nu/wp-content/uploads/2012/03/mayhan-genis.gif);
margin-bottom: 10px;
}
#en_ust {
width: 900px;
height: 60px;
margin-right: auto;
margin-left: auto;
}
#alt_reklam {
background-image: url(http://mayhan.com.nu/wp-content/uploads/2012/03/alt_genisreklam.png);
height: 70px;
width: 500px;
margin-top: 7px;
margin-right: auto;
margin-left: auto;
}
#content {
margin-top: 10px;
font-family: "MS Serif", "New York", serif;
}
#haklar {
height: 70px;
margin-top: 5px;
}
.urbangreymenu{
width: 230px; /*width of menu*/
}
.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(media/arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}
.urbangreymenu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}
.urbangreymenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.urbangreymenu ul li a{
font: normal 12px Arial;
color: black;
background: #E9E9E9;
display: block;
line-height: 17px;
padding-left: 10px; /*link text is indented 8px*/
text-decoration: none;
padding-top: 5px;
padding-right: 0;
padding-bottom: 5px;
}
.urbangreymenu ul li a:visited{
color: black;
}
.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}
/*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ .solidblockmenu{ margin: 0; padding: 0; float: left; font: 13px Arial; width: 100%; overflow: hidden; margin-bottom: 1em; border: 0px solid #625e00; border-width: 0px 0; background: center center repeat-x; } .solidblockmenu li{ display: inline; }
.solidblockmenu li a{
float: left;
color: blue;
text-decoration: none;
border-right: 0px solid white;
margin-left: 15px;
padding-top: 9px;
padding-right: 8px;
padding-bottom: 9px;
padding-left: 8px;
}
.solidblockmenu li a:visited{
color: bllue;
}
.solidblockmenu li a:hover,
.solidblockmenu li .current{ color: black; background: transparent center center repeat-x; }
body {
background-image: url(http://www.backgroundlabs.com/backgrounds/88.gif);
}