Olcay İpek - Gri Süper Tasarım

Gri Süper Tasarım

Tasarımın Önizlemesi İçin Tıkla.

Tasarımın Üstü:

<table width="900" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01"> 	<tr> 		<td height="33" valign="top" background="http://zeytinkopugu.com/Freecss/images/site_01.png"> </td> 	</tr> 	<tr> 	  <td valign="top" background="http://zeytinkopugu.com/Freecss/images/site_05.png"><table width="100%" border="0" cellspacing="0" cellpadding="0">         <tr>             <td width="4%" height="95"> </td>             <td width="38%"><div align="center"><img src="http://zeytinkopugu.com/Freecss/gglogo.png" _fcksavedurl="http://zeytinkopugu.com/Freecss/gglogo.png" _fcksavedurl="http://zeytinkopugu.com/Freecss/gglogo.png" width="331" height="102" /></div></td>             <td width="58%"><div align="left"><img src="http://zeytinkopugu.com/Freecss/images/reklamu.gif" _fcksavedurl="http://zeytinkopugu.com/Freecss/images/reklamu.gif" _fcksavedurl="http://zeytinkopugu.com/Freecss/images/reklamu.gif" width="468" height="60" /></div></td>             <td width="0%"> </td>         </tr>         </table>         </td> 	</tr> 	<tr> 	  <td valign="top" background="http://zeytinkopugu.com/Freecss/images/site_02.png"><table width="100%" border="0" cellspacing="0" cellpadding="0">         <tr>           <td width="4%" rowspan="3"> </td>           <td colspan="2">                                 <div id="menu"> <ul> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Anasayfa</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Xhtml / Css</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Javascript</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Photoshop</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Fireworks</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Dreamweaver</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Php / Mysql</a></li> <li><a href="#" _fcksavedurl="#" _fcksavedurl="#">Flash / AS</a></li><br style="clear:both" /> </ul> </div>          </td>           <td width="3%" rowspan="3"> </td>         </tr>         <tr>           <td width="62%" height="872" rowspan="2" valign="top"><br />             <table id="Table_3" width="560" border="0" cellpadding="0" cellspacing="0">             <tr>               <td height="32" colspan="3" valign="middle" background="http://zeytinkopugu.com/Freecss/images/icerik_01.png"><table width="100%" border="0" cellspacing="0" cellpadding="0">                   <tr>                     <td width="2%"> </td>                     <td width="59%"><div align="left" class="stil10"><marquee> Duyuru</marquee></div></td>                     <td width="9%"> </td>                     <td width="28%"><div align="center" class="stil10">Saat: 00:00</div></td>                     <td width="2%"> </td>                   </tr>               </table></td>             </tr>             <tr>               <td colspan="3" valign="top" background="http://zeytinkopugu.com/Freecss/images/icerik_02.png"><table width="100%" border="0" cellspacing="0" cellpadding="0">                 <tr>                   <td width="2%"> </td>                   <td width="96%" valign="top">                   <div id="content">

Tasarımın Altı:

</div>                  </td>                   <td width="2%"> </td>                 </tr>               </table></td>             </tr>             <tr>               <td height="18" colspan="3" valign="top" background="http://zeytinkopugu.com/Freecss/images/icerik_02.png"> </td>             </tr>             <tr>               <td width="6" height="19" valign="top" background="http://zeytinkopugu.com/Freecss/images/site_06.png"> </td>               <td width="463" valign="top" background="http://zeytinkopugu.com/Freecss/images/site_06.png"><div align="left"></div></td>               <td width="91" valign="top" background="http://zeytinkopugu.com/Freecss/images/site_06.png"><div align="center"></div></td>             </tr>           </table>          </td>           <td width="31%" valign="top"><table width="276" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_">               <tr>                 <td valign="top"><img id="menu_01" src="http://zeytinkopugu.com/Freecss/images/menu_01.png" _fcksavedurl="http://zeytinkopugu.com/Freecss/images/menu_01.png" _fcksavedurl="http://zeytinkopugu.com/Freecss/images/menu_01.png" width="276" height="57" alt="." /></td>               </tr>               <tr>                 <td valign="top" background="http://zeytinkopugu.com/Freecss/images/menu_02.png"><table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">                     <tr>                       <td><div class="icerik">                           <form method="post" action="">                             <div class="panel">                               <input name="nick" type="text" id="nick" onfocus_fckprotectedatt_fckprotectedatt="%20onfocus_fckprotectedatt%3D%22%2520onfocus%253D%2522if(this.value%2520%253D%253D%2520'Kullan%25C4%25B1c%25C4%25B1%2520Ad%25C4%25B1')%2520%257B%2520this.value%253D''%253B%2520%257D%2522%22" onblur_fckprotectedatt_fckprotectedatt="%20onblur_fckprotectedatt%3D%22%2520onblur%253D%2522if(this.value%253D%253D'')%2520%257B%2520this.value%253D'Kullan%25C4%25B1c%25C4%25B1%2520Ad%25C4%25B1'%253B%2520%257D%2522%22" value="Kullanıcı Adı" />                               <br />                               <input name="sifre" type="password" id="sifre" onfocus_fckprotectedatt_fckprotectedatt="%20onfocus_fckprotectedatt%3D%22%2520onfocus%253D%2522if(this.value%2520%253D%253D%2520'%25C5%259Eifre')%2520%257B%2520this.value%253D''%253B%2520%257D%2522%22" onblur_fckprotectedatt_fckprotectedatt="%20onblur_fckprotectedatt%3D%22%2520onblur%253D%2522if(this.value%253D%253D'')%2520%257B%2520this.value%253D'%25C5%259Eifre'%253B%2520%257D%2522%22" value="Şifre" />                               <br />                               <input class="buton" value=" " type="submit" />                               <br />                             </div>                           </form>                       </div></td>                     </tr>                 </table></td>               </tr>               <tr>                 <td valign="top"><img id="menu_04" src="http://zeytinkopugu.com/Freecss/images/menu_04.png" _fcksavedurl="http://zeytinkopugu.com/Freecss/images/menu_04.png" _fcksavedurl="http://zeytinkopugu.com/Freecss/images/menu_04.png" width="276" height="55" alt="." /></td>               </tr>               <tr>                 <td valign="top" background="http://zeytinkopugu.com/Freecss/images/menu_02.png"><table width="87%" border="0" align="center" cellpadding="0" cellspacing="0">                     <tr>                       <td background="http://zeytinkopugu.com/Freecss/images/menu_baslik.png"><div id="anamenu">                           <ul>                             <li>                               <div align="left"><a href="#" _fcksavedurl="#" _fcksavedurl="#" tabindex="1"><span class="stil9">Ana Sayfa</span></a></div>                             </li>                             <li>                               <div align="left"><a href="#" _fcksavedurl="#" _fcksavedurl="#" tabindex="2"><span class="stil9">Hakkımızda</span></a></div>                             </li>                             <li>                               <div align="left"><a href="#" _fcksavedurl="#" _fcksavedurl="#" tabindex="3"><span class="stil9">Referanslar</span></a></div>                             </li>                             <li>                               <div align="left"><a href="#" _fcksavedurl="#" _fcksavedurl="#" tabindex="4"><span class="stil9">Ziyaretçi Defteri</span></a></div>                             </li>                             <li>                               <div align="left"><a href="#" _fcksavedurl="#" _fcksavedurl="#" tabindex="6"><span class="stil9">İletişim</span></a></div>                             </li>                           </ul>                       </div></td>                     </tr>                   </table>                     <div align="center"></div></td>               </tr>               <tr>                 <td valign="top"><img id="menu_06" src="http://zeytinkopugu.com/Freecss/images/menu_06.png" _fcksavedurl="http://zeytinkopugu.com/Freecss/images/menu_06.png" _fcksavedurl="http://zeytinkopugu.com/Freecss/images/menu_06.png" width="276" height="58" alt="." /></td>               </tr>           </table>             <table width="100%" border="0" cellspacing="0" cellpadding="0">             <tr>               <td height="83"><div align="center"><a href="http://www.gencgrafiker.tr.gg" _fcksavedurl="http://www.gencgrafiker.tr.gg" _fcksavedurl="http://www.gencgrafiker.tr.gg"><img src="http://zeytinkopugu.com/Freecss/LOGO.png" _fcksavedurl="http://zeytinkopugu.com/Freecss/LOGO.png" _fcksavedurl="http://zeytinkopugu.com/Freecss/LOGO.png" width="252" height="78" border="0" /></a></div></td>             </tr>           </table>           </td>         </tr>         <tr>           <td height="19" valign="top"> </td>         </tr>                </table>         </td>   </tr> 	<tr> 	  <td height="52" valign="middle" background="http://zeytinkopugu.com/Freecss/images/site_7.png"><table width="100%" border="0" cellspacing="0" cellpadding="0">         <tr>           <td valign="top"><div align="center"><span class="stil11">Tüm Hakları Saklıdır. © 2010 l www.GencGrafikeR.tr.gg</span></div></td>         </tr>       </table></td>   </tr> 	 	<tr> 		<td height="55" valign="top" background="http://zeytinkopugu.com/Freecss/images/site_04.png"><table width="100%" border="0" cellspacing="0" cellpadding="0">           <tr>             <td> </td>           </tr>         </table></td> 	</tr> </table>

Css Kısmı:

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;} table {margin-left: auto;margin-right: auto}   	          <style type="text/css">               body,td,th { 	font-family: Verdana, Arial, Helvetica, sans-serif; 	font-size: 12px; 	color: #000000; }     body { background: url(http://zeytinkopugu.com/Freecss/images/bg.png) top left repeat; color: #000000; font-family: Verdana; font-size: 13px; line-height: 1.4; height: 100%; padding: 0; }   </style>           <style> #anamenu {  font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 100%;   width: 160px;   padding: 0px;   margin: 0px;   border:1px;   border-color:#000000; } #anamenu h1 {   display: block;     font-size: 90%;   padding: 3px 0 5px 3px;   border:none;   border-color:#FFFFFF;   color: #333333;   margin: 0px;   width:159px;   } #anamenu ul {   list-style: none;   margin: 0px;   padding: 0px;   border: none;   }   #anamenu ul li {   margin: 0px;   padding: 0px;   }   #anamenu ul li a {   font-size: 80%;   display: block;   border-bottom: 1px dashed #27a7d6;   padding: 5px 0px 2px 4px;   text-decoration: none;   color: #666666;   width:223px;   } #anamenu ul li a:hover, #anamenu ul li a:focus {   color: #000000;   background-color: #d5d5d5;   } .stil9 {font-size: 12px} .stil10 { 	color: #FFFFFF; 	font-weight: bold; } a:link { 	color: #000000; 	text-decoration: none; } a:visited { 	text-decoration: none; } a:hover { 	text-decoration: none; } a:active { 	text-decoration: none; } .stil11 {color: #000000; font-weight: bold; }           /*==================== Kullanici Giris kutusu ========================= */ .panel { 	width: 230px; 	margin: auto; } .panel input#nick {/*Nick iletisim kutusu*/ padding: 4px 8px 4px 34px; border: none; background: url(http://zeytinkopugu.com/Freecss/img/giris.png) top left no-repeat; width: 128px; } .panel input#nick:focus {/*Nick iletisim kutusu SECILI*/ background: url(http://zeytinkopugu.com/Freecss/img/giris.png) left -24px no-repeat; }  .panel input#sifre { /*Sifre iletisim kutusu*/ padding: 4px 8px 4px 34px; border: none; background: url(http://zeytinkopugu.com/Freecss/img/sifre.png) top left no-repeat; width: 128px; } .panel input#sifre:focus {/*Sifre iletisim kutusu SECILI*/ background: url(http://zeytinkopugu.com/Freecss/img/sifre.png) left -24px no-repeat; } .buton {/*Giris Buton*/ width: 74px; height: 24px; background: url(http://zeytinkopugu.com/Freecss/img/buton.png) left 0px no-repeat; border: 0; cursor: pointer; } .buton:hover { /*Giris Buton Hover*/ background: url(http://zeytinkopugu.com/Freecss/img/buton.png) left -24px no-repeat; border: 0; }      #wrap {width:880px;margin:0 auto; padding:20px}    #menu {font:14px arial, verdana, sans-serif;-moz-box-shadow:0px 2px 5px  2px #999; -webkit-box-shadow:  0px 2px 5px  2px #999;} /* Burada menümüze bir miktar gölge veriyoruz */  #menu ul{background:#fff url(http://zeytinkopugu.com/Freecss/img/menubg.gif) repeat-x;margin:0;padding:0;list-style:none;border:1px solid #c0c0c0;padding:10px 0px 10px 0px;}  #menu li{margin:0;display:inline;float:left;padding:0px;}  #menu ul li a {padding:10px;color:#444;text-decoration:none;} /* Menü bağlantılarımızı burada tanımlıyoruz */  #menu ul li a:hover { /* Bağlantılarımızın hover durumundaki tanımlamalarını yapıyoruz */ padding:10px; background:#6a6a6a url(http://zeytinkopugu.com/Freecss/img/menu2.gif) repeat-x; color:#fff; text-decoration:none;  -moz-box-shadow:0px 2px 5px  2px #6a6a6a;		/* Bu iki satırda gölge tanımlamaları yapılıyor. */ -webkit-box-shadow:  0px 2px 5px  2px #6a6a6a;  -moz-border-radius: 0px 0px 4px 4px;			/* Bu iki satırda ise yuvarlak köşeler için tanımlamalar yapılıyor */ -webkit-border-radius: 0px 0px 4px 4px; }  /* Buradan sonraki satırlar önizleme sayfamızda yaptığımız açıklama alanlarını tanımlıor */  .bilgi {margin:0 auto;width:860px;background:#eee;color:#333;border:2px solid #ddd;margin:30px 0px 10px 0px;padding:10px;font:14px/24px arial, verdana, sans-serif;text-align:left;} .bilgi h2 {font:bold 18px arial, verdana, sans-serif;color:#f91365;} .bilgi a {color:#fff; background:#2e83ff;padding:4px;text-decoration:none} .bilgi a:hover {color:#fff; background:#333;padding:4px;text-decoration:none} .bilgi em {border-bottom:1px solid #999;}     </style>