WPT
» Konu'ya bakarken.
Merhabalar- Arkadaşlar işte buyrun tasarım. Güle Güle Kullanın. Tüm Hakları 32css.tr.gg 'ye aittir.
Bu tasarım 32css.tr.gg 'de yayınlanmış olup birde bizim tarafımızdan paylaşılmıştır. Güle güle kullanın arkadaşlar.
################# TASARIMIN ÜSTÜ KODU #################
<!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" xml:lang="en" lang="en"> <head> <title>Kateko</title> <FCK:meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" ></FCK:meta> <link rel="stylesheet" href="images/BrightSide.css" type="text/css" /> </head> <body> <div id="wrap"> <div id="header"> <h1 id="logo">Ka<span class="green">TE</span><span class="gray">KO</span></h1> <h2 id="slogan">Plantilla adaptada por KATEKO.ES.TL</h2> <form method="post" class="searchform" action="http://www.kateko.es.tl/"> <p> <input type="text" name="search_query" class="textbox" /> <input type="submit" name="search" class="button" value="Search" /> </p> </form> <ul> <li id="current"><a href="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/"><span>Menú</span></a></li> <li><a href="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/"><span>Menú</span></a></li> <li><a href="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/"><span>Menú</span></a></li> <li><a href="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/"><span>Menú</span></a></li> <li><a href="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/"><span>Menú</span></a></li> <li><a href="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/"><span>Menú</span></a></li> </ul> </div> <div id="content-wrap"> <img src="http://img443.imageshack.us/img443/6258/headerphotop.jpg" _fcksavedurl="http://img443.imageshack.us/img443/6258/headerphotop.jpg" _fcksavedurl="http://img443.imageshack.us/img443/6258/headerphotop.jpg" width="820" height="120" alt="headerphoto" class="no-border" /> <div id="sidebar" > <h1>Sidebar</h1> <ul class="sidemenu"> <li><a href="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/">Menú2</a></li> <li><a href="http://kateko.es.tl/" _fcksavedurl="http://kateko.es.tl/" _fcksavedurl="http://kateko.es.tl/">Menú2</a></li> <li><a href="http://kateko.es.tl/" _fcksavedurl="http://kateko.es.tl/" _fcksavedurl="http://kateko.es.tl/">Menú2</a></li> <li><a href="http://kateko.es.tl/" _fcksavedurl="http://kateko.es.tl/" _fcksavedurl="http://kateko.es.tl/">Menú2</a></li> <li><a href="http://kateko.es.tl" _fcksavedurl="http://kateko.es.tl" _fcksavedurl="http://kateko.es.tl">Menú2</a></li> </ul> <h1>Sidebar2</h1> <ul class="sidemenu"> <li><a href="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/">Menú3</a></li> <li><a href="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/">Menú3</a></li> <li><a href="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/">Menú3</a></li> <li><a href="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/">Menú3</a></li> <li><a href="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/" _fcksavedurl="http://www.kateko.es.tl/">Menú3</a></li> </ul> </div>################# TASARIMIN ALTI KODU #################
</div> <div id="footer"> <div class="footer-left"> <p class="align-left"> © 2010 <strong>Tu web</strong> | Adaptado por KATEKO.ES.TL<a href="http://kateko.es.tl" _fcksavedurl="http://kateko.es.tl" _fcksavedurl="http://kateko.es.tl"></a><a href="http://kateko.es.tl" _fcksavedurl="http://kateko.es.tl" _fcksavedurl="http://kateko.es.tl"> | Copyrigth</a> | <a href="http://kateko.es.tl" _fcksavedurl="http://kateko.es.tl" _fcksavedurl="http://kateko.es.tl">KatekoWeb</a> </p> </div> <div class="footer-right"> <p class="align-right"> <a href="http://kateko.es.tl" _fcksavedurl="http://kateko.es.tl" _fcksavedurl="http://kateko.es.tl">MENU</a> | <a href="http://kateko.es.tl" _fcksavedurl="http://kateko.es.tl" _fcksavedurl="http://kateko.es.tl">MENU</a> | <a href="http://kateko.es.tl" _fcksavedurl="http://kateko.es.tl" _fcksavedurl="http://kateko.es.tl">MENU</a> </p> </div> </div> </div> </body> </html>################# TASARIMIN CSS KODU #################
table {margin-left:auto;margin-right:auto;} #pre_header {display: none;} #post_header {display: none;} #header_container {display: none;} lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;} #title {display: none;} #nav_container {display:none;} /******************************************** Adaptado por JODER-ES-LO-MIO.ES.TL Auspiciado por KATEKO.ES.TL *******************************************/ /******************************************** HTML ELEMENTS ********************************************/ /* top elements */ * { padding: 0; margin: 0; } body { margin: 0; padding: 0; font: .70em/1.5em Verdana, Tahoma, Helvetica, sans-serif; color: #666666; background: #A9BAC3 url(http://img251.imageshack.us/img251/2684/23024564.gif) repeat-x; text-align: center; } /* links */ a { color: #4284B0; background-color: inherit; text-decoration: none; } a:hover { color: #9EC068; background-color: inherit; } /* headers */ h1, h2, h3 { font: bold 1em 'Trebuchet MS', Arial, Sans-serif; color: #333; } h1 { font-size: 1.5em; color: #6297BC; } h2 { font-size: 1.4em; text-transform:uppercase;} h3 { font-size: 1.3em; } p, h1, h2, h3 { margin: 10px 15px; } ul, ol { margin: 10px 30px; padding: 0 15px; color: #4284B0; } ul span, ol span { color: #666666; } /* images */ img { border: 2px solid #CCC; } img.no-border { border: none; } img.float-right { margin: 5px 0px 5px 15px; } img.float-left { margin: 5px 15px 5px 0px; } a img { border: 2px solid #568EB6; } a:hover img { border: 2px solid #CCC !important; /* IE fix*/ border: 2px solid #568EB6; } code { margin: 5px 0; padding: 10px; text-align: left; display: block; overflow: auto; font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace; /* white-space: pre; */ background: #FAFAFA; border: 1px solid #f2f2f2; border-left: 4px solid #4284B0; } acronym { cursor: help; border-bottom: 1px solid #777; } blockquote { margin: 15px; padding: 0 0 0 20px; background: #FAFAFA; border: 1px solid #f2f2f2; border-left: 4px solid #4284B0; color: #4284B0; font: bold 1.2em/1.5em Georgia, 'Bookman Old Style', Serif; } /* form elements */ form { margin:10px; padding: 0; border: 1px solid #f2f2f2; background-color: #FAFAFA; } label { display:block; font-weight:bold; margin:5px 0; } input { padding: 2px; border:1px solid #eee; font: normal 1em Verdana, sans-serif; color:#777; } textarea { width:300px; padding:2px; font: normal 1em Verdana, sans-serif; border:1px solid #eee; height:100px; display:block; color:#777; } input.button { margin: 0; font: bold 1em Arial, Sans-serif; border: 1px solid #CCC; background: #FFF; padding: 2px 3px; color: #4284B0; } /* search form */ form.searchform { background: transparent; border: none; margin: 0; padding: 0; } form.searchform input.textbox { margin: 0; width: 120px; border: 1px solid #9EC630; background: #FFF; color: #333; height: 14px; vertical-align: top; } form.searchform input.button { margin: 0; padding: 2px 3px; font: bold 12px Arial, Sans-serif; background: #FAFAFA; border: 1px solid #f2f2f2; color: #777; width: 60px; vertical-align: top; } /*********************** LAYOUT ************************/ #wrap { background: #FFF; width: 820px; height: 100%; margin: 0 auto; text-align: left; } #content-wrap { clear: both; margin: 0; padding: 0; background: #FFF; } /* header */ #header { position: relative; height: 85px; background: #000 url(http://img151.imageshack.us/img151/6783/headerbge.gif) repeat-x 0% 100%; } #header h1#logo { position: absolute; margin: 0; padding: 0; font: bolder 4.1em 'Trebuchet MS', Arial, Sans-serif; letter-spacing: -2px; text-transform: lowercase; top: 0; left: 5px; } #header h2#slogan { position: absolute; top:37px; left: 95px; color: #666666; text-indent: 0px; font: bold 11px Tahoma, 'trebuchet MS', Sans-serif; text-transform: none; } #header form.searchform { position: absolute; top: 0; right: -12px; } /* main */ #main { float: left; margin-left: 15px; padding: 0; width: 50%; } .post-footer { background-color: #FAFAFA; padding: 5px; margin: 20px 15px 0 15px; border: 1px solid #f2f2f2; font-size: 95%; } .post-footer .date { background: url(http://img543.imageshack.us/img543/8810/clock0.gif) no-repeat left center; padding-left: 20px; margin: 0 10px 0 5px; } .post-footer .comments { background: url(http://img403.imageshack.us/img403/9849/commenty.gif) no-repeat left center; padding-left: 20px; margin: 0 10px 0 5px; } .post-footer .readmore { background: url(page.gif) no-repeat left center; padding-left: 20px; margin: 0 10px 0 5px; } /* sidebar */ #sidebar { float: left; width: 23%; margin: 0; padding: 0; display: inline; } #sidebar ul.sidemenu { list-style:none; margin:10px 0 10px 15px; padding:0; } #sidebar ul.sidemenu li { margin-bottom:1px; border: 1px solid #f2f2f2; } #sidebar ul.sidemenu a { display:block; font-weight:bold; color: #333; text-decoration:none; padding:2px 5px 2px 10px; background: #f2f2f2; border-left:4px solid #CCC; min-height:18px; } * html body #sidebar ul.sidemenu a { height: 18px; } #sidebar ul.sidemenu a:hover { padding:2px 5px 2px 10px; background: #f2f2f2; color: #339900; border-left:4px solid #9EC630; } /* rightbar */ #rightbar { float: right; width: 23%; padding: 0; margin:0; } /* Footer */ #footer { clear: both; color: #FFF; background: #A9BAC3; border-top: 5px solid #568EB6; margin: 0; padding: 0; height: 50px; font-size: 95%; } #footer a { text-decoration: none; font-weight: bold; color: #FFF; } #footer .footer-left{ float: left; width: 65%; } #footer .footer-right{ float: right; width: 30%; } /* menu tabs */ #header ul { z-index: 999999; position: absolute; margin:0; padding: 0; list-style:none; right: 0; bottom: 6px !important; bottom: 5px; font: bold 13px Arial, 'Trebuchet MS', Tahoma, verdana, sans-serif; } #header li { display:inline; margin:0; padding:0; } #header a { float:left; background: url(http://img600.imageshack.us/img600/782/tableftl.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #header a span { float:left; display:block; background: url(http://img15.imageshack.us/img15/7038/tabright0.gif) no-repeat right top; padding:6px 15px 3px 8px; color: #FFF; } /* Commented Backslash Hack hides rule from IE5-Mac */ #header a span {float:none;} /* End IE5-Mac hack */ #header a:hover span { color:#FFF; } #header a:hover { background-position:0% -42px; } #header a:hover span { background-position:100% -42px; } #header #current a { background-position:0% -42px; color: #FFF; } #header #current a span { background-position:100% -42px; color: #FFF; } /* end menu tabs */ /* alignment classes */ .float-left { float: left; } .float-right { float: right; } .align-left { text-align: left; } .align-right { text-align: right; } /* additional classes */ .clear { clear: both; } .green { color: #9EC630; } .gray { color: #BFBFBF; } Bu yazı Murat tarafından gönderilmiştir.
