Yesil V1 Tasarım

Selam Beyler, karsınıza güzel bir tablolu css tasarım ile cıkıyorum tasarım üstünde fazla durulmamaktadır. Yesil, Gri tonları kullanılan bu tasarım benim tarafımdan cizilip kodlanmıstır cizerken düsündüm nasıl bisey yapsam die böle birsey çıktı ortaya umarım begenirsiniz ileride bir çok css tasarım sunacagımıda belirtiyorum kodlar assagıda.

Tasarım Üstü:

Tasarım Altı:

<td align="left" width="221" valign="top">                         <div id="bas">                         <div class="icon"><img width="16" height="16" alt="" src="http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/256/Home-icon.png" _fcksavedurl="http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/256/Home-icon.png" /></div>                         <div id="yaz">Ana Menu</div>                         </div>                         <div id="dde">                         <ul>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                         </ul>                         </div>                         <div id="bas">                         <div class="icon"><img width="16" height="16" alt="" src="http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/256/Home-icon.png" _fcksavedurl="http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/256/Home-icon.png" /></div>                         <div id="yaz">Eglence</div>                         </div>                         <div id="dde">                         <ul>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                         </ul>                         </div>                         <div id="bas">                         <div class="icon"><img width="16" height="16" alt="" src="http://www.hellovino.com/img/rss-icon.png" _fcksavedurl="http://www.hellovino.com/img/rss-icon.png" /></div>                         <div id="yaz">Blog</div>                         </div>                         <div id="dde">                         <ul>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                             <li><a href="#" _fcksavedurl="#">MENU ADI</a></li>                         </ul>                         </div>                         </td>                                                                                  <tr>             <td height="58" background="//img.webme.com/pic/k/kadirsaka-bs/tas2_04.png">             <div id="copyright">Copyright © 2008-2011 Bütün Hakları Saklıdır</div>             </td>         </tr>

Css Kod:

a:link {
    color: #0066CC;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #0066CC;
}
a:hover {
    text-decoration: none;
    color: #FF0000;
}
a:active {
    text-decoration: none;
}

body {
background-image: url(http://hidefwallpaper.org/wp-content/gallery/hd_wallpaper_hd_08/mac-apple-leopard-full-hd-desktop-wallpaper.jpg);
    background-attachment:fixed;
}
body,td,th {text-shadow:0px 0px 0px #999;
    font-family: Verdana;
    font-size: 14px;
}

label {
  width:200px;
  display:block;
  float:left;
}

input {
  border:1px solid #AEAEAE;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  padding-left:5px;
  padding-right:5px;

}

textarea {
  border:1px solid #AEAEAE;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;

}

input.submit {
    border:1px solid #AEAEAE;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    background-image:url(http://www.alimengu.com.nu/ara.png);
    background-color:#fff;
    font-weight:bold;
    color:#E3E3E3;
  }
  
hr {    border: 0;
    border-top: 1px solid #e0e0e0;

color: white;}
    
/* ** allowed ** Edit By http://alimengu.tr.gg {alimengu|alimengu.tr.gg} */img[src="//theme.webme.com/smiles/wink.gif"] { background-image:url(http://lcontent.ebuddy.com/web/va1.4.11/gfx/emoticons/msn/icon_03.gif);background-repeat:no-repeat;height:0px;width:0px;padding:10px;}img[src="//theme.webme.com/smiles/smiley.gif"] { background-image:url(http://lcontent.ebuddy.com/web/va1.4.11/gfx/emoticons/msn/icon_01.gif);background-repeat:no-repeat;height:0px;width:0px;padding:10px;} img[src="//theme.webme.com/smiles/cheesy.gif"] { background-image:url(http://lcontent.ebuddy.com/web/va1.4.11/gfx/emoticons/msn/icon_02.gif);background-repeat:no-repeat;height:0px;width:0px;padding:10px;} img[src="//theme.webme.com/smiles/angry.gif"] { background-image:url(http://lcontent.ebuddy.com/web/va1.4.11/gfx/emoticons/msn/icon_07.gif);background-repeat:no-repeat;height:0px;width:0px;padding:10px;} img[src="//theme.webme.com/smiles/sad.gif"] { background-image:url(http://lcontent.ebuddy.com/web/va1.4.11/gfx/emoticons/msn/icon_10.gif);background-repeat:no-repeat;height:0px;width:0px;padding:10px;} img[src="//theme.webme.com/smiles/shocked.gif"] { background-image:url(http://lcontent.ebuddy.com/web/va1.4.11/gfx/emoticons/msn/icon_12.gif);background-repeat:no-repeat;height:0px;width:0px;padding:10px;} img[src="//theme.webme.com/smiles/cool.gif"] { background-image:url(http://lcontent.ebuddy.com/web/va1.4.11/gfx/emoticons/msn/icon_06.gif);background-repeat:no-repeat;height:0px;width:0px;padding:10px;} img[src="//theme.webme.com/smiles/huh.gif"] { background-image:url(http://lcontent.ebuddy.com/web/va1.4.11/gfx/emoticons/msn/thumbs_up.gif);background-repeat:no-repeat;height:0px;width:0px;padding:10px;} img[src="//theme.webme.com/smiles/rolleyes.gif"] { background-image:url(http://lcontent.ebuddy.com/web/va1.4.11/gfx/emoticons/msn/icon_17.gif);background-repeat:no-repeat;height:0px;width:0px;padding:10px;} img[src="//theme.webme.com/smiles/tongue.gif"] { background-image:url(http://lcontent.ebuddy.com/web/va1.4.11/gfx/emoticons/msn/icon_05.gif);background-repeat:no-repeat;height:0px;width:0px;padding:10px;} img[src="//theme.webme.com/smiles/undecided.gif"] { background-image:url(http://lcontent.ebuddy.com/web/va1.4.11/gfx/emoticons/msn/icon_08.gif);background-repeat:no-repeat;height:0px;width:0px;padding:10px;} img[src="//theme.webme.com/smiles/cry.gif"] { background-image:url(http://lcontent.ebuddy.com/web/va1.4.11/gfx/emoticons/msn/icon_11.gif);background-repeat:no-repeat;height:0px;width:0px;padding:10px;}

i {

padding : 5px;
    text-align : left;
    display : block;
    overflow : auto;
    font : 500 1em/1.5em 'Verdana';
    border : 1px solid #cccccc;
    -moz-border-radius: 5px 5px 5px 5px;  border-radius: 5px 5px 5px 5px;
}

table[width="80%"] {
    padding: 20px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #e0e0e0;

border-right-color: #e0e0e0;
    border-left-color: #e0e0e0;
    height: 100%;
}
table[width="25%"] {
    padding: 20px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-top-color: #e0e0e0;
    border-right-color: #e0e0e0;
    border-left-color: #e0e0e0;
    
}

code {
    margin : 4px 8px;
    padding : 8px;
    text-align : left;
    display : block;
    overflow : auto;
    font : 500 1em/1.5em 'Courier New', 'courier new', monospace;
    border : 1px dashed #D7C3C3; background: #f8f4f1; }
}
#ekstra .ustreklam {
    float: left;
    height: 60px;
    width: 468px;
    margin-top: 5px;
    margin-left: 4px
background-image:url(//img.webme.com/pic/k/kadirsaka-bs/235_04.png);
-->} #bas { 	background-image: url(//img.webme.com/pic/k/kadirsaka-bs/897.png); 	height: 20px; 	width: 200px; 	margin-left: 6px; } .icon { 	height: 16px; 	width: 16px; 	margin-top: 3px; 	margin-left: 5px; 	float: left; } #bas #yaz {text-shadow:0px 1px 2px #fff; 	float: right; 	width: 130px; 	height: 15px; 	margin-top: 3px; 	margin-right: 45px; 	font-family: Verdana; 	font-size: 14px; 	color: #000000; } #ustmenu { 	height: 40px; 	width: 770px; 	margin-top: 10px; 	margin-left: 200px; } #ustmenu ul { 	margin: 0px; 	padding: 0px; 	list-style-type: none; } #ustmenu li { 	float: left; } #ustmenu a {text-shadow:0px 1px 2px #fff; 	color: #FFFFFF; 	text-decoration: none; 	display: block; 	background-image: url(//img.webme.com/pic/k/kadirsaka-bs/men.png); 	height: 35px; 	width: 125px; 	padding-top: 5px; 	padding-left: 25px; 	font-family: Verdana; 	font-size: 16px; } #ustmenu a:hover { 	background-image: url(//img.webme.com/pic/k/kadirsaka-bs/menhover.png); 	color: #999999; } #reklam { 	height: 55px; 	width: 468px; 	float: right; 	margin-top: 30px; 	margin-right: 35px; 	border: 1px dotted #666666; } #dde ul { 	margin: 0px; 	padding: 0px; 	list-style-type: none; } #dde a {text-shadow:0px 1px 2px #ccc; 	font-family: Verdana; 	font-size: 13px; 	color: #333333; 	text-decoration: none; 	height: 15px; 	width: 200px; 	margin-left: 6px; 	display: block; 	border-bottom-width: 1px; 	border-bottom-style: dotted; 	border-bottom-color: #999999; 	list-style-image: url(879s.png); } #copyright {text-shadow:0px 1px 2px #fff; 	height: 17px; 	width: 700px; 	margin-left: 150px; 	font-family: Verdana; 	font-size: 13px; 	padding-top: 3px; } #dde a:hover { 	color: #99FFFF; } #logo { 	height: 70px; 	width: 224px; 	margin-left: 40px; 	margin-top: 10px; 	float: left; } --> </style>