Tr.gg uyarlı Vista Free tasarımı

**tasarım-_-faresi** Cuma Ağus. 21, 2009 6:26 pm

[Resimleri görebilmek için üye olun veya giriş yapın.]

Tasarımın altına

Kod:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Animals Planet</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="container"> <div id="layoutMenu"> <ul> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> </ul> </div> <div id="layoutHeader"> <h1><a href="www.codesx.es.tl">VistaFire</a></h1> <h2>Diseño Adaptado <a href="http://www.codesx.es.tl">codesx</a></h2> </div> <div id="layoutCenterBody"> <div id="layoutNavigation"> <div class="navTitle"> <h3>Categorias</h3> </div> <ul> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> <li><a href="http://www.codesx.es.tl/">EDITAR</a></li> </ul> </div> <div id="layoutBodyContent">

Tasarımın Altına

Kod:: </div> </div> <div class="clearer"></div> <div id="layoutFooter"> <p>Copyright 2008. Adaptado<a href="http://www.codesx.es.tl" title="">Codesx</a><br /> <a href="http://www.tuweb.es.tl">EDITAR</a> | <a href="http://www.free-css.com/">EDITAR</a> | <a target="_blank" href="http://validator.w3.org/check/referer"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><abbr title="Cascading Style Sheets">CSS</abbr></a></p> </div> </div> </body> </html>

Css Koduna

Kod:: lli.nav_element{display: none;} li.nav_element a{display: none;} 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;} * { margin:0; padding:0; } body { font-family:Arial, Helvetica, sans-serif; font-size:12px; background:#CCCCCC; } #container { width:800px; margin:auto; background:#FFFFFF; } #layoutHeader { width:800px; height:216px; background:url(http://pixelea.com/s/9f7db7cf5b.jpg) no-repeat; } #layoutHeader h1 { color:#FFFFFF; font-size:36px; font-weight:bold; padding:20px 20px 0 20px; } #layoutHeader h2 { color:#FFFFFF; font-size:14px; font-weight:bold; padding:0 20px 0 20px; } #layoutHeader h1 a { color:#FFFFFF; font-size:36px; font-weight:bold; text-decoration:none; } #layoutHeader h2 a { color:#FFFFFF; font-size:14px; font-weight:bold; text-decoration:none; } #layoutCenterBody { margin:10px 10px 0 10px; } #layoutNavigation { border:1px solid #15190A; width:200px; float:left; background:#DCDECC; } #layoutNavigation .navTitle { background:#15190A; height:30px; } #layoutNavigation .navTitle h3 { color:#FFFFFF; font-size:12px; font-weight:bold; padding:6px 10px; } #layoutBodyContent { margin-left:220px; } #layoutBodyContent a { color:#7A7D5F; font-size:12px; font-weight:bold; } #layoutBodyContent h1{ color:#15190A; font-weight:bold; font-size:24px; } #layoutBodyContent h2{ color:#15190A; font-weight:bold; font-size:14px; margin-top:10px; } #layoutBodyContent p { margin-top:10px; } .clearer { clear:both; height:10px; } #layoutFooter { height:56px; background:url(http://pixelea.com/s/626621194b.gif) repeat-x; text-align:center; } #layoutFooter p { padding-top:10px; color:#BCBA9E; } #layoutFooter a { color:#BCBA9E; text-decoration:underline; } #layoutFooter a:hover { color:#BCBA9E; text-decoration:none; } /* main menu begins */ #layoutMenu { height:56px; background:url(http://pixelea.com/s/626621194b.gif) repeat-x; } #layoutMenu ul { text-align:center; padding-top:17px; } #layoutMenu li { list-style: none; display: inline; } #layoutMenu li a { padding: 3px 30px 3px 8px; text-decoration: none; background:url(http://pixelea.com/s/a0efefa6d5.gif) no-repeat left 5px; font-size:12px; } #layoutMenu li a:link { color: #ffffff; font-weight:bold; font-size:12px; } #layoutMenu li a:visited { color: #ffffff; } #layoutMenu li a:hover { color: #CA9847; } /* mein menu ends */ /* left navigation menu begins */ #layoutNavigation ul { list-style-type: none; margin:10px 0; } #layoutNavigation a { display: block; width: 180px; background-color: #DCDECC; border-bottom: 1px dotted #15190A; margin:7px 10px; } #layoutNavigation a:link, #layoutNavigation a:visited { color: #15190A; text-decoration: none; } #layoutNavigation a:hover { background-color: #B7BA9E; color: #fff; } /* left navigation menu ends */ #content_container { padding: 0px!important; width: 500px!important; } #container #container { border: 0px!important; width: 500px!important; } .nav_element { display:none!important; width: 1px!important; height:: 1px!important; } #title { display:none; width: 1px; height:: 1px; }