- Css Kod 12

SİYAH CSS TASARİM

TASARIMIN ÜSTÜNE

<!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' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <div class='navbar section' id='navbar'> <div class='widget Navbar' id='Navbar1'></div> <div id='layout_wrapper'> <div id='layout_edgetop'></div> <div id='layout_container'>   <div id='header-wrapper'> <div class='header section' id='header'><div class='widget Header' id='Header1'> <div id='header-inner'><div class='titlewrapper'>    <h1 class='title'>Mi web 2.0</h1>    </div> <div class='descriptionwrapper'> <p class='description'><span>Templatesfree.es.tl</span></p> </div> </div> </div></div> <div class='clear'></div> </div> <div id='top_separator'></div> <div id='navigation'> <div id='tabs'> <ul> <li class='current_page_item'>    <a href='inicio.htm' _fcksavedurl='inicio.htm'><span>Inicio</span></a></li> <li><a href='#' _fcksavedurl='#'><span>Noticias</span></a></li> <li><a href='#' _fcksavedurl='#'><span>Videos</span></a></li> <li><a href='#' _fcksavedurl='#'><span>Contacto</span></a></li> </ul>    <div class='clear'></div> </div> </div> <div class='spacer h5'></div> <div id='content-wrapper'>

TASARIMIN ALTINA

<div id='sidebar'> <div class='widget' id='search'>  <h2>Buscar</h2> <div class='widget-content'> <form action='buscar.htm' id='searchform' method='get'> <div>  <table class='search'> <tbody><tr> <td><input id='s' name='q' type='text' value=''/></td> <td style='padding-left: 10px;'><input src='http://pixelea.com/s/c1b484ad29.gif' type='image'/></td> </tr> </tbody></table> </div></form> </div></div> <div class='sidebar section' id='sidebar'><div class='widget Feed' id='Feed1'>   <h2>Box de contenido 1</h2> <div class='widget-content'>  Pon aqui el contenido que quieras!    </div></div> <div class='widget BlogArchive'>   <h2>Box de contenido 2</h2> <div class='widget-content'>  Pon aqui el contenido que quieras!    <div id='ArchiveList'> <div id='BlogArchive1_ArchiveList'> </div></div> <span class='widget-item-control'></div> </div></div></div>  <div class='clear'></div></div>  <div id='footer'> <p class='links'> Copyright © 2009 <a href='http://templatesfree.es.tl' _fcksavedurl='http://templatesfree.es.tl'>Tuweb.es.tl</a> |  - Diseño por: <a href='http://colorvoid-btemplates.blogspot.com/' _fcksavedurl='http://colorvoid-btemplates.blogspot.com/'>colorvoid</a> Adaptada por: <a href='http://templatesfree.es.tl' _fcksavedurl='http://templatesfree.es.tl'>Templatesfree.es.tl</a> </div> </div> <div id='layout_edgebottom'></div> </div>

CSS BÖLÜMÜNE

#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;}  * {    margin: 0;    padding: 0; }  body {    background: #404040 url(http://pixelea.com/s/bcbd190dab.jpg);    font: normal 13px Verdana;    color: #345;    padding-bottom: 1em; }  a {    color: #0066AA; }  a:hover {    color: #003366; }  p {    padding: 0.1em 0 0.8em; }  h1 {    font: normal 1.8em Georgia,Tahoma,sans-serif; }  h2 {    font: normal 1.5em Georgia,sans-serif; }  h3 {    font: bold 1em Tahoma,sans-serif; }  html {    height: 100%;    padding-bottom: 1px; }  ul,ol {    margin: 0 0 1em 1.6em; } ul ul, ol ol {    margin: 0.3em 0 0.3em 1em; } img {    border: none; }  img.bordered {    background: #FFF;    padding: 5px;    border: 1px solid #DDD; }  img.left {    margin-right: 1em; }  img.right {    margin-left: 1em; }  small,.small {    font-size: 0.8em; }  big,.big {    font-size: 1.2em; }  #layout_wrapper {    margin: 10px auto 0;    width: 780px; }  #layout_container {    background: #FFF;    padding: 0 5px; }  #layout_edgetop, #layout_edgebottom {    background: url(http://pixelea.com/s/1ddf9d7177.gif) no-repeat left top;    display: block;    height: 10px;    font-size: 0;    line-height: 0; }  #layout_edgebottom {    background-position: left bottom; }  /* Seachform */ table.search {    width: 100%;    border-collapse: collapse; } .search td {    vertical-align: center; } #main-wrapper {    overflow:hidden; } .clear {    clear:both; } #blog-pager-newer-link {    float: left; } #blog-pager-older-link { float: right; } #blog-pager {    text-align: center; }  /*-- (Cabecera) --*/ #header-wrapper {    background: #C5DEF0 url(http://pixelea.com/s/607f4ca364.jpg) repeat-x left top;    padding: 6px 18px; } #header-wrapper h1 {    font: normal 2.4em sans-serif;    letter-spacing: -1px;    color: #507A9A;    float:left; }    #header-wrapper h1 a {    color: #507A9A;    text-decoration: none; }    #header-wrapper h1 a:hover {    color: #305A7A } #header-wrapper p {    padding: 1.4em 0 0;    font: normal 1.1em sans-serif;    color: #667799;    float:right; }  #top_separator {    background: url(http://pixelea.com/s/9a61c0d952.gif) repeat-x left top;    display: block;    font-size: 0;    height: 3px;    line-height: 0; }  /*-- (Menu) --*/ #navigation {    background: #739CBA url(http://pixelea.com/s/2aadacaf3b.jpg) no-repeat left bottom;    padding: 82px 10px 0; } /* Tabs */    #tabs ul {    margin: 0;    padding: 0; } #tabs li {    display:inline;    list-style:none; } #tabs a {    background: url(http://pixelea.com/s/775f50f6c3.gif) no-repeat left top;    float: left;    font: bold 0.9em sans-serif;    margin-right: 3px;    padding-left: 4px;    text-decoration: none; } #tabs a span {    float: left;    display: block;    background: url(http://pixelea.com/s/f7b504b6a1.gif) no-repeat right top;    padding: 5px 10px 5px 6px;    color: #608AAA; } /* Commented Backslash Hack hides rule from IE5-Mac */ #tabs a span {float: none;} /* End IE5-Mac hack */ #tabs a:hover span {color: #608AAA;} #tabs a:hover {background-position: 0% -42px;} #tabs a:hover span {background-position:100% -42px;} #tabs li.current_page_item a {color: #47A; background-position: 0% -42px;} #tabs li.current_page_item a span {background-position:100% -42px;}  /*-- (Contenedor) --*/ .h5 { height:5px; }  /* Contenido */ #content {    width: 545px;    float:left; } #content a { } #content a:hover { }   .date-header { color: #999999; padding-top: 1px; font-size: 0.85em; float:right; } .post-footer, p.comment-footer { padding: 8px 10px 6px; background: #F5F5F5; color: #666; border-top: 1px solid #E5E5E5; font-size: 0.8em; } .post-footer a{ color: #567; } .post-footer a:hover{ color: #002; } .post-footer .comment-link { background:  none no-repeat left center; padding-left: 18px; float:right; } .post_bottom { background: url(http://pixelea.com/s/1ac49e7a18.gif) no-repeat left top; display: block; height: 5px; font-size: 0; line-height: 0; } .feed-links {display:none;} .blog-pager {margin:10px 0; font-size:0.8em;}  /* Sidebar */  #sidebar {    float:right;    width: 220px; } #sidebar ul{    margin-left: 0;    border-bottom: 1px solid #E2ECF2; } #sidebar li{    list-style: none;    padding: 4px;    border-top: 1px solid #E2ECF2;    border-bottom: 1px solid #D0D8DE; } #sidebar li:first-child {    border-top: none; }  #sidebar li a{    text-decoration: none; }  #sidebar li a:hover{    text-decoration: underline; }  #sidebar h2 {    background: #C6D2DB url(http://pixelea.com/s/f38d67d112.gif) no-repeat left top;    padding: 6px 10px 5px;    font-weight: bold;    font-size: 0.9em;    color: #505E69;    display:block; }  #sidebar .widget-content {    background: #DAE3E9 url(http://pixelea.com/s/c32a58d178.gif) repeat-x left top;    padding: 8px 10px 1px;    font-size: 0.9em; } #sidebar .widget {    padding-bottom: 5px;    background: url(http://pixelea.com/s/1ac49e7a18.gif) no-repeat left bottom;    margin-bottom:5px; }  /*-- Footer --*/  #footer {    background: #A3B5C1 url(http://pixelea.com/s/c8c5fc1e62.gif) no-repeat left top;    padding: 8px 12px 2px;    font-size: 0.85em;    color: #FAFCFF;    text-align:center; }  #footer {    color: #C8DBE8; }  #footer a {    color: #D3E5F1;    text-decoration: none; }  #footer a:hover {    color: #FFE;    text-decoration: underline; }  .left {    float: left; }  .right { float: right;    }  .clear,.clearer {    clear: both; }  .clearer,.spacer {    display: block;    font-size: 0;    line-height: 0; }

TASARIMIN ÜSTÜNE

CSS BÖLÜMÜNE

lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;}    #text{ color: ffffff; position: absolute; top: 100px; margin-left:-300px; left: 50%; }    body { background-color:#ffffff;}   *{ padding: 0; margin: 0; }  #Designmystic { margin: 0 auto; width: 800px; height:700px; background-image:url(http://pixelea.com/s/7039965a6e.gif);}  #content { position: absolute; left: 56%; top: 300px; margin-left:-226px; width: 525px; height: 340px; padding:10px; color: #707070; font-size:12px; background-color:#transparent; background-image: none; border: 0px solid #FFFFFF; overflow:auto;}   #Uebersicht{ position: absolute; left: 50%; top: 204px; margin-left:-440px; font-color:#cccccc;}     a{ color:#707070; text-decoration: none; font-size:13px;}  a:hover { color: #4A9AF6; font-size: 13px; text-decoration: none;}  a:link { color: #000000; font-size: 13px; text-decoration: none;}  a:active { color: #707070; font-size: 13px; text-decoration: none;}  a:visited { color: #cccccc; font-size: 13px; text-decoration: none;}    div.lux { position: absolute; z-index: 3; top: 58px; left: 52%; margin-left: -160px; width: 100px; }  .lux a { border: 0px solid #xxxxxx; background-color: #xxxxxx; background-image:  none; text-decoration: none; text-align: center; font-weight: bold; cursor: pointer; margin: 0px; display: block; height:21px; color: #FFF; font-size: 60px; }

CSS SİYAH TASARIM

TASARIMIN ÜSTÜNE

CSS BÖLÜMÜNE

lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;}    #text{ color: #000000; position: absolute; top: 110px; margin-left:-300px; left: 50%; }    body { background-color:#6699ff;}  *{ padding: 0; margin: 0; }  #Designmystic { margin: 0 auto; width: 1000px; height:800px; background-image:url(http://pixelea.com/s/6941713fbc.png);}  #content { position: absolute; left: 50%; top: 350px; margin-left:-440px; width: 876px; height: 490px; padding:10px; color: #000000; font-size:13px; background-color:#transparent; background-image: none; border: 0px solid #000000; overflow:auto;}   #Uebersicht{ position: absolute; left: 50%; top: 204px; margin-left:-440px; font-color:#000000;}    a{ color:#000000; text-decoration: none; font-size:13px;}  a:hover { color: #000000; font-size: 13px; text-decoration: none;}  a:link { color: #000000; font-size: 13px; text-decoration: none;}  a:active { color: #000000; font-size: 13px; text-decoration: none;}  a:visited { color: #000000; font-size: 13px; text-decoration: none;}

TASARIMIN ÜSTÜNE

<head> <title>tu titulo</title> <link rel="STYLESHEET" type="text/css" href="estilo.css"> </head>   <div id="cabecera"><img src="http://pixelea.com/s/58d4c353c8.png" _fcksavedurl="http://pixelea.com/s/58d4c353c8.png" width="700" height="106" alt="warioteayuda.es.tl" border="0"></div>  <div style="position:absolute;left:45px;top:200px;"> <img src="http://pixelea.com/s/056441bafb.png" _fcksavedurl="http://pixelea.com/s/056441bafb.png"> </div>  <div style="position:absolute;left:45px;top:420px;"> <img src="http://pixelea.com/s/056441bafb.png" _fcksavedurl="http://pixelea.com/s/056441bafb.png"> </div>  <div style="position:absolute;left:45px;top:650px;"> <img src="http://pixelea.com/s/056441bafb.png" _fcksavedurl="http://pixelea.com/s/056441bafb.png"> </div> <div style="position:absolute;left:95px;top:300px;"><center> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> </center></div> <div style="position:absolute;left:775px;top:200px;"> <img src="http://pixelea.com/s/136080757d.png" _fcksavedurl="http://pixelea.com/s/136080757d.png"> </div>  <div style="position:absolute;left:95px;top:510px;"><center> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> </center></div> <div style="position:absolute;left:95px;top:750px;"><center> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> </center></div>  <div style="position:absolute;left:855px;top:220px;"><center> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <br /> </center></div>  <div style="position:absolute;left:675px;top:130px;"><center> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> </center></div>  <div style="position:absolute;left:45px;top:990px;"> <img src="http://pixelea.com/s/58fad67749.png" _fcksavedurl="http://pixelea.com/s/58fad67749.png"> </div>  <div style="position:absolute;left:110px;top:1035px;"><center> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> <a href="#" _fcksavedurl="#" class="enlacenav">link</a> </center></div>

CSS BÖLÜMÜNE

BODY { background : #C0D9D9 url(http://pixelea.com/s/515836e03f.png) repeat; font : 8pt Verdana, Geneva, Arial, Helvetica, sans-serif; color : #666666; margin : 20px 0px 20px 0px; text-align: center; }   #content { height: 740px; width: 460px; background:; background-image:url(http://pixelea.com/s/7fb86853d2.png); color: #ffffff; margin: 0px 0px 0px 0px; padding: 0px; display: inline; float: left; overflow:auto; border: 1px solid #6E6E6E; z-index: 4; position:absolute;left:260px;top:170px;}     #extraDiv1 {display: none;} #extraDiv2 {display: none;} #extraDiv3 {display: none;} #extraDiv4 {display: none;} #extraDiv5 {display: none;} #extraDiv6 {display: none;} #pre_header {display: none;} #post_header {display: none;} #pre_content {display: none;} #nav_heading{display: none;} div.header{display: none;} h1#title{display: none;} h2#title span {display: none;}  a{ color:#4A9AF6; text-decoration: none; font-size:13px;} a:hover { color:#ffffff; font-size: 13px; text-decoration: none;} a:link { color:#4A9AF6; font-size: 13px; text-decoration: none;} a:active { color:#d3d7da; font-size: 13px; text-decoration: none;} a:visited { color:#1c3878; font-size: 13px; text-decoration: none;}  #counter { position: absolute; left: 50%; top:4px; margin-left: 300px; width: 1000px; height:0px;

KIRMIZI SİYAH CSS TASARIM

TASARIMIN ÜSTÜNE

CSS BÖLÜMÜNE

lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;}    #text{ color: ffffff; position: absolute; top: 100px; margin-left:-300px; left: 50%; }    body {background : #000000 url('http://pixelea.com/s/3cf50cb5d2.png');}   *{ padding: 0; margin: 0; }  #Designmystic { margin: 0 auto; width: 700px; height:600px; background-image:url(http://pixelea.com/s/eab094768a.gif);}  #content { position: absolute; left: 39%; top: 253px; margin-left:-226px; width: 462px; height: 340px; padding:10px; color: #242424; font-size:12px; background-color:#transparent; background-image: none; border: 0px solid #FFFFFF; overflow:auto;}   #Uebersicht{ position: absolute; left: 50%; top: 204px; margin-left:-440px; font-color:#cccccc;}     a{ color:#707070; text-decoration: none; font-size:13px;}  a:hover { color: #4A9AF6; font-size: 13px; text-decoration: none;}  a:link { color: #000000; font-size: 13px; text-decoration: none;}  a:active { color: #707070; font-size: 13px; text-decoration: none;}  a:visited { color: #cccccc; font-size: 13px; text-decoration: none;}    div.lux { position: absolute; z-index: 3; top: 58px; left: 52%; margin-left: -160px; width: 100px; }  .lux a { border: 0px solid #xxxxxx; background-color: #xxxxxx; background-image:  none; text-decoration: none; text-align: center; font-weight: bold; cursor: pointer; margin: 0px; display: block; height:21px; color: #FFF; font-size: 60px; }

TASARIMIN ÜSTÜNE

CSS BÖLÜMÜNE

lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;}    #text{ color: ffffff; position: absolute; top: 100px; margin-left:-300px; left: 50%; }  body { background-image:url(http://pixelea.com/s/eefd94889d.jpg);background-color:#fff;}   *{ padding: 0; margin: 0; }  #Designmystic { margin: 0 auto; width: 769px; height:645px; background-image:url(http://pixelea.com/s/ddcd875c06.jpg);}   #content { position: absolute; left: 50%; top: 228px; margin-left:-369px; width: 717px; height: 387px; padding:10px; color: #transparent; font-size:13px; background-color:#transparent; background-image: none; border: 0px solid #FFFFFF; overflow:auto;}   #Uebersicht{ position: absolute; left: 50%; top: 204px; margin-left:-440px; font-color:#cccccc;}     a{ color:#ffffff; text-decoration: none; font-size:13px;}  a:hover { color: #4A9AF6; font-size: 13px; text-decoration: none;}  a:link { color: #000000; font-size: 13px; text-decoration: none;}  a:active { color: #000000; font-size: 13px; text-decoration: none;}  a:visited { color: #000000; font-size: 13px; text-decoration: none;}   div.lux { position: absolute; z-index: 3; top: 130px; left: 52%; margin-left: -340px; width: 100px; }  .lux a { border: 0px solid #xxxxxx; background-color: #xxxxxx; background-image:  none; text-decoration: none; text-align: center; font-weight: bold; cursor: pointer; margin: 0px; display: block; height:21px; color: #FFF; font-size: 24px; }

KLAPLİ CSS TASARİM

TASARIMIN ÜSTÜNE

CSS BÖLÜMÜNE

lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;}    #text{ color: ffffff; position: absolute; top: 100px; margin-left:-300px; left: 50%; }    body {background : #000000 url('http://pixelea.com/s/3cf50cb5d2.png');}   *{ padding: 0; margin: 0; }  #Designmystic { margin: 0 auto; width: 700px; height:600px; background-image:url(http://pixelea.com/s/eab094768a.gif);}  #content { position: absolute; left: 39%; top: 253px; margin-left:-226px; width: 462px; height: 340px; padding:10px; color: #242424; font-size:12px; background-color:#transparent; background-image: none; border: 0px solid #FFFFFF; overflow:auto;}   #Uebersicht{ position: absolute; left: 50%; top: 204px; margin-left:-440px; font-color:#cccccc;}     a{ color:#707070; text-decoration: none; font-size:13px;}  a:hover { color: #4A9AF6; font-size: 13px; text-decoration: none;}  a:link { color: #000000; font-size: 13px; text-decoration: none;}  a:active { color: #707070; font-size: 13px; text-decoration: none;}  a:visited { color: #cccccc; font-size: 13px; text-decoration: none;}    div.lux { position: absolute; z-index: 3; top: 58px; left: 52%; margin-left: -160px; width: 100px; }  .lux a { border: 0px solid #xxxxxx; background-color: #xxxxxx; background-image:  none; text-decoration: none; text-align: center; font-weight: bold; cursor: pointer; margin: 0px; display: block; height:21px; color: #FFF; font-size: 60px; }

TASARIMIN ÜSTÜNE

CSS BÖLÜMÜNE

lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;}    #text{ color: ffffff; position: absolute; top: 100px; margin-left:-300px; left: 50%; }  body { background-image:url(http://pixelea.com/s/eefd94889d.jpg);background-color:#fff;}   *{ padding: 0; margin: 0; }  #Designmystic { margin: 0 auto; width: 769px; height:645px; background-image:url(http://pixelea.com/s/ddcd875c06.jpg);}   #content { position: absolute; left: 50%; top: 228px; margin-left:-369px; width: 717px; height: 387px; padding:10px; color: #transparent; font-size:13px; background-color:#transparent; background-image: none; border: 0px solid #FFFFFF; overflow:auto;}   #Uebersicht{ position: absolute; left: 50%; top: 204px; margin-left:-440px; font-color:#cccccc;}     a{ color:#ffffff; text-decoration: none; font-size:13px;}  a:hover { color: #4A9AF6; font-size: 13px; text-decoration: none;}  a:link { color: #000000; font-size: 13px; text-decoration: none;}  a:active { color: #000000; font-size: 13px; text-decoration: none;}  a:visited { color: #000000; font-size: 13px; text-decoration: none;}   div.lux { position: absolute; z-index: 3; top: 130px; left: 52%; margin-left: -340px; width: 100px; }  .lux a { border: 0px solid #xxxxxx; background-color: #xxxxxx; background-image:  none; text-decoration: none; text-align: center; font-weight: bold; cursor: pointer; margin: 0px; display: block; height:21px; color: #FFF; font-size: 24px; }

BEYAZ SADE CSS TASARİM 2

TASARIMIN ÜSTÜNE

<center><div id="wrapper">  <div id="logo"> <img src="http://pixelea.com/s/6a43e9dc36.gif" _fcksavedurl="http://pixelea.com/s/6a43e9dc36.gif" border="0"> </div>  <div class="pro_linedrop"> <ul class="select"> <li><a href="URL LINK'S" _fcksavedurl="URL LINK'S"><b>Nombre link's</b></a></li>  <li class="line"><a href="URL LINK'S" _fcksavedurl="URL LINK'S"><b>Nombre link's</b></a>  <ul class="sub"> <li><a href="URL LINK'S" _fcksavedurl="URL LINK'S">Nombre link's</a></li> <li><a href="URL LINK'S" _fcksavedurl="URL LINK'S">Nombre link's</a></li> <li><a href="URL LINK'S" _fcksavedurl="URL LINK'S">Nombre link's</a></li> <li><a href="URL LINK'S" _fcksavedurl="URL LINK'S">Nombre link's</a></li> <li><a href="URL LINK'S" _fcksavedurl="URL LINK'S">Nombre link's</a></li> </ul>  </li>  <li class="line"><a href="URL LINK'S" _fcksavedurl="URL LINK'S"><b>Nombre link's</b></a>  <ul class="sub"> <li><a href="URL LINK'S" _fcksavedurl="URL LINK'S">Nombre link's</a></li> <li><a href="URL LINK'S" _fcksavedurl="URL LINK'S">Nombre link's</a></li> <li><a href="URL LINK'S" _fcksavedurl="URL LINK'S">Nombre link's</a></li> <li><a href="URL LINK'S" _fcksavedurl="URL LINK'S">Nombre link's</a></li> </ul>  </li> </ul> </div><br/><br/>  <div style="clear: both;"></div>  <center> <div id="body_wrapper"> <div id="left_nav"> <div class="nav_box_header">menu</div> <div class="nav_box"> <br /> <ul> <li><a href="#1" _fcksavedurl="#1">Link 1</a></li> <li><a href="#1" _fcksavedurl="#1">Link 2</a></li> <li><a href="#1" _fcksavedurl="#1">Link 3</a></li> <li><a href="#1" _fcksavedurl="#1">Link 4</a></li> <li><a href="#1" _fcksavedurl="#1">Link 5</a></li> </ul> </div>  <br />             <div class="nav_box_header">otro menu o box</div> <div class="nav_box"> <br /> <ul> <li><a href="#1" _fcksavedurl="#1">Link 1</a></li> <li><a href="#1" _fcksavedurl="#1">Link 2</a></li> <li><a href="#1" _fcksavedurl="#1">Link 3</a></li> <li><a href="#1" _fcksavedurl="#1">Link 4</a></li> <li><a href="#1" _fcksavedurl="#1">Link 5</a></li> </ul> </div>                 </div> <div id="content_1"> <div class="nav_box_header">dpruebas.es.tl</div> <div class="nav_box">              <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </div>        </div>                    <div id="right_nav"> <div class="nav_box_header">menu derecha</div> <div class="nav_box"> <br /> <ul> <li><a href="#1" _fcksavedurl="#1">Link 1</a></li> <li><a href="#1" _fcksavedurl="#1">Link 2</a></li> <li><a href="#1" _fcksavedurl="#1">Link 3</a></li> <li><a href="#1" _fcksavedurl="#1">Link 4</a></li> <li><a href="#1" _fcksavedurl="#1">Link 5</a></li> </ul> </div>  <br />             <div class="nav_box_header">otro menu o box</div> <div class="nav_box"> <br /> <ul> <li><a href="#1" _fcksavedurl="#1">Link 1</a></li> <li><a href="#1" _fcksavedurl="#1">Link 2</a></li> <li><a href="#1" _fcksavedurl="#1">Link 3</a></li> <li><a href="#1" _fcksavedurl="#1">Link 4</a></li> <li><a href="#1" _fcksavedurl="#1">Link 5</a></li> </u> </div>  </div>    </div> </center>  <div style="clear: both;"></div>  <br /> <div id="footer"> <a href="http://www.diegovenegas.tk" _fcksavedurl="http://www.diegovenegas.tk"><img src="http://pixelea.com/s/beca7361f3.gif" _fcksavedurl="http://pixelea.com/s/beca7361f3.gif" height="15" width="15" border ="0"> Home</a>  | <a href="javascript:history.go(0);" _fcksavedurl="javascript:history.go(0);"><img width="15" height="15" src="http://pixelea.com/s/e5451c68a9.gif" _fcksavedurl="http://pixelea.com/s/e5451c68a9.gif" border="0"> Actualizar</a>  | <a href="#" _fcksavedurl="#"><img width="15" height="15" src="http://pixelea.com/s/6179cb7ac6.gif" _fcksavedurl="http://pixelea.com/s/6179cb7ac6.gif" border="0"> Subir</a>  | <a href="javascript:history.back ();" _fcksavedurl="javascript:history.back ();"><img width="15" height="15" src="http://pixelea.com/s/1b7870e201.gif" _fcksavedurl="http://pixelea.com/s/1b7870e201.gif" border="0"> Atras</a>  | <a href="javascript:history.forward();" _fcksavedurl="javascript:history.forward();">Siguiente <img width="15" height="15" src="http://pixelea.com/s/971291c98b.gif" _fcksavedurl="http://pixelea.com/s/971291c98b.gif" border="0"></a>  | <a href="javascript:agregar()" _fcksavedurl="javascript:agregar()"><img width="15" height="15" src="http://pixelea.com/s/801ffff8bd.gif" _fcksavedurl="http://pixelea.com/s/801ffff8bd.gif" border="0"> Agregar a Favoritos</a> </div></div> </center>  <div style="text-align: center; font-size: 0.75em;">© Diego Venegas | Design by <a target="_blank" href="http://www.diegovenegas.tk" _fcksavedurl="http://www.diegovenegas.tk">DIEGOVENEGAS.TK</a> | Plantilla CSS-Desing <a href="http://www.paginawebgratis.es" _fcksavedurl="http://www.paginawebgratis.es" target="_blank">PWG</a><br/>  <A target="_blank" HREF="http://www.copyscape.com/" _fcksavedurl="http://www.copyscape.com/"><IMG SRC="http://banners.copyscape.com/images/cs-wh-234x16.gif" _fcksavedurl="http://banners.copyscape.com/images/cs-wh-234x16.gif" ALT="Page copy protected against web site content infringement by Copyscape" TITLE="Do not copy content from the page. Plagiarism will be detected by Copyscape." WIDTH="234" HEIGHT="16" BORDER="0"></A></div>

CSS BÖLÜMÜNE

body      {background: #FFFFFF; font-family: Tahoma, Verdana; font-size: 10pt; color:#000066;}   #top_nav {width: 98%; position: relative;}  #logo {width: 98%; background: #FFFFFF;  border: 1px solid #000066;}  #body_wrapper {width: 98%;}   #left_nav {padding-top: 8px; width: 19%; float: left; margin: 0 auto;}   #right_nav          {padding-top: 8px; width: 20%; float: left; margin: 0 auto;}   #content_1         {padding-top: 8px; width: 60%; float: left; margin: 0 auto;}   #footer          {font-size: 8pt; padding-top: 3px; padding-bottom: 3px; width: 98%; background: #FFFFFF;}      #logo h1          {font-size: 20pt; margin-top: 12px; margin-bottom: 12px; color: #000000;}   a:link, a:visited, a:active {color: #0099CC; text-decoration: none;}  a:hover     {color: #0033CC;}  #top_nav a:link,#top_nav a:visited, #top_nav a:active     {color:#0099CC; font-weight: bold; text-decoration: none;}  #top_nav a:hover     {color: #0033CC;}  img     { border: 0px; }  .nav_box_header     {font-size: 12pt; color: white; font-weight: bold; background: #000066; width: 98%; border: 1px solid #000066; -moz-border-radius: 35px 35px 0px 0px;}  .nav_box      {background: #FFFFFF; width: 98%; border: 1px solid #000066;    text-align: left;}  .content_box_header        {background: #00CC00; width: 98%; border: 1px solid #000066;}  .content_box        {background: white; width: 98%; border: 1px solid #000066;}  div.nav_box p     { margin:0; }  #content .nav_box {padding-top: 15px; padding-top: 15px; padding-bottom: 15px;}  #content .nav_box     {padding-left: 5px; padding-right: 5px; width: 96%;}  .nav_box_header     { text-transform: uppercase; } ul {list-style-image: url(http://pixelea.com/s/ace1e79772.gif);}  #footer     {color: #ffffff; background: #000066;}  #footer a:link, #footer a:visited, #footer a:active     {color: #ffffff;}   #counter     {position: absolute; right: 3%; top:0px;}  #content     {position: absolute; left: 63%; top: 303px; margin-left: -42%; width: 54%; height: 610px; padding:10px; color:#000066; font-family: Helvetica, sans-serif; font-size:12px; font-weight:bold; background-color:#transparent; background-image: none; border: 0px solid #000066; overflow:auto;}  .nav_element, .header, #content_container h2, #extraDiv1,#extraDiv2,#extraDiv3,#extraDiv4,#extraDiv5,#extraDiv6, #pre_header,#post_header,#pre_content,#nav_heading,div.header, h1#title,h2#title span {display: none;}  .pro_linedrop           {height:35px; width:98%; background:url(http://pixelea.com/s/224035d6ed.gif); position:relative; font-family:arial, verdana, sans-serif; font-size:11px;}  .pro_linedrop .select     {margin:0; padding:0; list-style:none; white-space:nowrap;}  .pro_linedrop li        {float:left; background:url(http://pixelea.com/s/789a3db113.gif);}  .pro_linedrop .select a        {display:block; height:35px; float:left; background:url(http://pixelea.com/s/224035d6ed.gif); padding:0 0 0 15px; text-decoration:none; line-height:33px; white-space:nowrap; color:#ffffff;}  .pro_linedrop .select a b        {display:block; padding:0 30px 0 15px;  background:url (http://pixelea.com/s/224035d6ed.gif) right top;}  .pro_linedrop .select li.line a b    {background:url(http://pixelea.com/s/09b84661e9.gif) right top;}  .pro_linedrop .select a:hover, .pro_linedrop .select li:hover a     {background: url(http://pixelea.com/s/789a3db113.gif); padding:0 0 0 15px; cursor:pointer; color:#0099CC;}  .pro_linedrop .select a:hover b, .pro_linedrop .select li:hover a b     {display:block; padding:0 30px 0 15px; background:url(http://pixelea.com/s/789a3db113.gif) right top; cursor:pointer;}  .pro_linedrop .select li.line a:hover b, .pro_linedrop .select li.line:hover a b {background:url(http://pixelea.com/s/d083a92e1d.gif) right top; }  .pro_linedrop .sub     {display:none;}  .pro_linedrop ul ul     {display:none;}  .pro_linedrop table     {border-collapse:collapse; margin:-1px; font-size:1em; width:0; height:0;}  .pro_linedrop .sub     {margin:0; padding:0;list-style:none;}  .pro_linedrop .sub li     {background:transparent;}  .pro_linedrop .select :hover .sub     {height:25px; display:block; position:absolute; float:left; width:100%; top:35px; left:0; text-align:center; background:#fff url(http://pixelea.com/s/d5a2d4e79b.gif); border:1px solid #aaa;}  .pro_linedrop .select :hover .sub li a    {display:block; height:25px; line-height:22px; float:left; background:transparent  none; padding:0 16px; margin:0; white-space:nowrap; color:#000066;font-size:10px;}  .pro_linedrop .select :hover .sub li.subline a {color:#c00;}  .pro_linedrop .select :hover .sub li a:hover, .pro_linedrop .select :hover .sub li:hover    {color:#0099CC; line-height:20px; position:relative; background:#fff url(http://pixelea.com/s/d5a2d4e79b.gif) left bottom;}

TASARIMIN ÜSTÜNE

TASARIMIN ALTINA
CSS BÖLÜMÜNE

lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;}    #text{ color: ffffff; position: absolute; top: 100px; margin-left:-300px; left: 50%; }  body { background-image:url(fondo );background-color:#000000;}   *{ padding: 0; margin: 0; }  #Designmystic { margin: 0 auto; width: 765px; height:623px; background-image:url(http://pixelea.com/s/55012f9bac.png);}   #content { position: absolute; left: 50%; top: 287px; margin-left:-322px; width: 625px; height: 280px; padding:10px; color: #transparent; font-size:13px; background-color:#transparent; background-image: none; border: 0px solid #FFFFFF; overflow:auto;}   #Uebersicht{ position: absolute; left: 50%; top: 204px; margin-left:-440px; font-color:#cccccc;}     a{ color:#ffffff; text-decoration: none; font-size:13px;}  a:hover { color: #4A9AF6; font-size: 13px; text-decoration: none;}  a:link { color: #000000; font-size: 13px; text-decoration: none;}  a:active { color: #000000; font-size: 13px; text-decoration: none;}  a:visited { color: #000000; font-size: 13px; text-decoration: none;}   div.lux { position: absolute; z-index: 3; top: 172px; left: 52%; margin-left:-185px; width: 647px; }  .lux a { border: 0px solid #xxxxxx; background-color: #xxxxxx; background-image:  none; text-decoration: none; text-align: center; font-weight: bold; cursor: pointer; margin: 0px; display: block; height:21px; color: #ffffff; font-size: 24px; }

TASARIMIN ÜSTÜNE

TASARIMIN ALTINA

CSS BÖLÜMÜNE

TASARIMIN ÜSTÜNE

<div id="wrap">              <div id="header">                               <h1 id="logo-text"><a href="index.html" _fcksavedurl="index.html"></a></h1>               <p id="slogan"></p>                         <div id="header-links">          <p>             <a href="Modificar Url" _fcksavedurl="Modificar Url">Modificar</a> |             <a href="Modificar Url" _fcksavedurl="Modificar Url">Modificar</a> |             <a href="Modificar Url" _fcksavedurl="Modificar Url">Modificar</a>                   </p>            </div>                              </div>  <div id="menu"> <ul> <li><a class="current" href="#" _fcksavedurl="#"><span>Hpolaaa </span></a></li>      <li><a href="Modificar url" _fcksavedurl="Modificar url"><span>Modificar</span></a></li>     <li><a href="Modificar url" _fcksavedurl="Modificar url"><span>Modificar</span></a></li>     <li><a href="Modificar url" _fcksavedurl="Modificar url"><span>Modificar</span></a></li>     <li><a href="Modificar url" _fcksavedurl="Modificar url"><span>Modificar</span></a></li> <span style="color: rgb(255, 255, 255);">D-ivans</span> </ul> </div>                            <div id="content-wrap">                      <div id="sidebar">                               <div class="left-box">                <p class="align-right"></p>             </div>                                       </div>

TASARIMIN ALTINA
CSS BÖLÜMÜNE

*{ margin:0; padding:0; } body{ background:#fff; color:#666; font:12px/18px Tahoma, Arial, Helvetica, sans-serif; } #menu{ width:700px; } #menu ul{ list-style:none; } #menu li{ list-style:none; display:block; float:left; margin:0 1px; } #menu li a{ display:block; float:left; height:52px; color:#0e7b93; text-transform:uppercase; font-size:11px; font-weight:bold; background:url(http://i42.tinypic.com/dwf9f5.jpg) no-repeat left; line-height:39px; padding:0 0 0 18px; text-decoration:none; } #menu li a span{ display:block; float:left; background:url(http://i42.tinypic.com/2mdqfzt.jpg) no-repeat right; height:52px; color:#0e7b93; line-height:39px; padding:0 36px 0 17px; } #menu li a:hover{ display:block; float:left; background:url(http://i43.tinypic.com/dpbmms.jpg) no-repeat left; height:52px; } #menu li a:hover span{ display:block; float:left; background:url(http://i41.tinypic.com/2ibluuu.jpg) no-repeat right; color:#7c832d; height:52px; } #menu li a.current{ display:block; float:left; height:52px; color:#7c832d; text-transform:uppercase; font-size:11px; font-weight:bold; background:url(http://i43.tinypic.com/dpbmms.jpg) no-repeat left; line-height:39px; padding:0 0 0 18px; text-decoration:none; } #menu li a.current span{ display:block; float:left; background:url(http://i41.tinypic.com/2ibluuu.jpg) no-repeat right; height:52px; color:#7c832d; line-height:39px; padding:0 36px 0 17px; } 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;}   /* Top Elements */ * { margin: 0; padding: 0; outline: 0 }  body {    background-image: none;background-color:#ffffff;    font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;    color: #555;    text-align: center; }  /* links */ a, a:visited {    text-decoration: none;    color: #2180BC;    background: inherit; } a:hover {    color: #88ac0b;    background: inherit;    text-decoration: underline; }  /* headers */ h1, h2, h3 {    font-family: 'Trebuchet MS', Tahoma, Sans-serif;          } h1 {    font-size: 150%;       font-weight: normal;    color: #cccccc; } h2 {    font-size: 140%;    text-transform: uppercase;    color: #cccccc; } h3 {    font-size: 120%;    color: #cccccc; }  h1, h2, h3, p {    padding: 10px;         margin: 0; } ul, ol {    margin: 5px 20px;    padding: 0 20px; }   /********************************************   Design ********************************************/ #wrap {    width: 838px;    background:  url(http://www.tervifincas.com/back/img/promotionimages/real_promo_2_42f6e_escaner_blanco.jpg) repeat-y center top;    margin: 0 auto;    text-align: left; } #content-wrap {    clear: both;    width: 760px;    padding: 0;    margin: 10px auto; } #header {    width: 838px;    position: relative;    height: 200px;    background: #fff url(http://i42.tinypic.com/2aaelnn.png) no-repeat center top;    padding: 0;        } #header h1#logo-text a {    position: absolute;    margin: 0; padding: 0;    font: bolder 44px 'Trebuchet MS', Arial, Sans-serif;    letter-spacing: -2px;    color: #FFF;    text-transform: none;    text-decoration: none;    background: transparent;        /* change the values of top and left to adjust the position of the logo*/    top: 25px; left: 47px;    } #header p#slogan {    position: absolute;    margin: 0; padding: 0;    font: normal 12px 'Trebuchet MS', Arial, Sans-serif;    text-transform: none;    color: #FFF;        /* change the values of top and left to adjust the position of the slogan*/    top: 70px; left: 55px;      }  /* header links */ #header #header-links {    position: absolute;    top: 20px; right: 30px;       color: #ffffff;    font-size: 10px;    } #header #header-links a {       color: #FFF;    text-decoration: none;    } #header #header-links a:hover {    color: #cccccc;    }  /* Menu */ #menu {    clear: both;       margin: 0 auto; padding: 0;    background: url(http://www.tervifincas.com/back/img/promotionimages/real_promo_2_42f6e_escaner_blanco.jpg) repeat-x 0 0;       font: bold 12px/37px Verdana, Arial, Tahoma, Sans-serif;    height: 28px;    width: 838px; } #menu ul {    float: right;    list-style: none;    margin:0; padding: 0; } #menu ul li {    display: inline; } #menu ul li a {    display: block;    float: left;    padding: 0 12px;    color: #FFF;       text-decoration: none; } #menu ul li.last a {    padding-right: 20px;    } #menu ul li a:hover {    color: #cccccc;    } #menu ul li#current a {       color: #bc0303; }  /* Main Column */ #main {    float: left;    width: 70%;    padding: 0; margin: 5px 0 0 5px;    display: inline; } #main h2 {    margin-top: 10px;    font: Bold 140% 'Trebuchet MS', Tahoma, Sans-serif;    color: #88ac0b;    padding: 5px 0 5px 25px;       border-bottom: 1px solid #EFF0F1;    background: #FFF  none no-repeat 3px 50%;       text-transform: none; } #main h2 a {    background: none;    color: #88ac0b;    text-decoration: none; }  #main ul li {    list-style-image:  none; }  .post-footer {    background-color: #FAFAFA;    padding: 5px; margin: 20px 10px 10px 10px;    border: 1px solid #f2f2f2;    font-size: 95%;    } .post-footer .date {    background:  none no-repeat left center;    padding-left: 20px; margin: 0 10px 0 5px; } .post-footer .comments {    background:  none no-repeat left center;    padding-left: 20px; margin: 0 10px 0 5px; } .post-footer .readmore {    background:  none no-repeat left center;    padding-left: 20px; margin: 0 10px 0 5px; }  /* Sidebar */    #sidebar {    float: right;    width: 26.5%;    padding: 0; margin: 0;       color: #000;            }    #sidebar h3 {    margin-top: 10px;    padding: 20px 20px;    font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;    color: #bc0303;    } #sidebar ul.sidemenu {    list-style: none;    text-align: left;    margin: 7px 4px 8px 0; padding: 0;    text-decoration: none;         background:  none repeat-x left top; } #sidebar ul.sidemenu li {    list-style: none;    background:  none repeat-x left bottom;    padding: 4px 0 4px 5px;    margin: 0 20px;       color: #bc0303;    } * html body #sidebar ul.sidemenu li {    height: 1%; } #sidebar ul.sidemenu li a {    text-decoration: none;       background-image: none;       color: #666666;          } #sidebar ul.sidemenu li a:hover {       color: #1773BC;    } #sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; } #sidebar ul.sidemenu ul li { background: none; }   /* Footer */    #footer {    color: #C6DDEE;    background:  url(http://i41.tinypic.com/oaqk9k.png) no-repeat center top;    clear: both;    width: 838px;    height: 100px;    text-align: center;       font-size: 92%;    } #footer a {    color: #FFF;    text-decoration: none; }  /* alignment classes */ .float-left  { float: left; } .float-right { float: right; } .align-left  { text-align: left; } .align-right { text-align: right; }  /* display and additional classes */ .clear { clear: both; }

TASARIMIN ÜSTÜNE

<div id="wrap">              <div id="header">                               <h1 id="logo-text"><a href="index.html" _fcksavedurl="index.html"></a></h1>               <p id="slogan"></p>                         <div id="header-links">          <p>             <a href="Url" _fcksavedurl="Url">Link</a> |                      <a href="Url" _fcksavedurl="Url">Link2</a>                   </p>            </div>                              </div>                        <div  id="menu">     <ul>             <li id="current"><a href="Url" _fcksavedurl="Url">Link </a></li>             <li><a href="Url" _fcksavedurl="Url">Link2</a></li>             <li><a href=" Url" _fcksavedurl=" Url">Link3</a></li>                     <li><a href="Url" _fcksavedurl="Url">Link4</a></li>             <li class="last"><a href="Url" _fcksavedurl="Url">Link5</a></li>          </ul>       </div>                                       <div id="content-wrap">                      <div id="sidebar">                               <div class="left-box">                <p class="align-right"></p>             </div>                                       </div>

TASARIMIN ALTINA
CSS BÖLÜMÜNE

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;}   /* Top Elements */ * { margin: 0; padding: 0; outline: 0 }  body {    background-image: none;background-color:#ffffff;    font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;    color: #555;    text-align: center; }  /* links */ a, a:visited {    text-decoration: none;    color: #2180BC;    background: inherit; } a:hover {    color: #88ac0b;    background: inherit;    text-decoration: underline; }  /* headers */ h1, h2, h3 {    font-family: 'Trebuchet MS', Tahoma, Sans-serif;          } h1 {    font-size: 150%;       font-weight: normal;    color: #cccccc; } h2 {    font-size: 140%;    text-transform: uppercase;    color: #cccccc; } h3 {    font-size: 120%;    color: #cccccc; }  h1, h2, h3, p {    padding: 10px;         margin: 0; } ul, ol {    margin: 5px 20px;    padding: 0 20px; }   /********************************************   Design ********************************************/ #wrap {    width: 838px;    background:  url(http://i35.tinypic.com/zlq93m.png) repeat-y center top;    margin: 0 auto;    text-align: left; } #content-wrap {    clear: both;    width: 760px;    padding: 0;    margin: 10px auto; } #header {    width: 838px;    position: relative;    height: 150px;    background: #fff url(http://pixelea.com/s/a9d119eff7.gif) no-repeat center top;    padding: 0;        } #header h1#logo-text a {    position: absolute;    margin: 0; padding: 0;    font: bolder 44px 'Trebuchet MS', Arial, Sans-serif;    letter-spacing: -2px;    color: #FFF;    text-transform: none;    text-decoration: none;    background: transparent;        /* change the values of top and left to adjust the position of the logo*/    top: 25px; left: 47px;    } #header p#slogan {    position: absolute;    margin: 0; padding: 0;    font: normal 12px 'Trebuchet MS', Arial, Sans-serif;    text-transform: none;    color: #FFF;        /* change the values of top and left to adjust the position of the slogan*/    top: 70px; left: 55px;      }  /* header links */ #header #header-links {    position: absolute;    top: 20px; right: 30px;       color: #ffffff;    font-size: 10px;    } #header #header-links a {       color: #FFF;    text-decoration: none;    } #header #header-links a:hover {    color: #cccccc;    }  /* Menu */ #menu {    clear: both;       margin: 0 auto; padding: 0;    background: url(http://pixelea.com/s/ab255a0b05.jpg) repeat-x 0 0;       font: bold 12px/37px Verdana, Arial, Tahoma, Sans-serif;    height: 28px;    width: 838px; } #menu ul {    float: right;    list-style: none;    margin:0; padding: 0; } #menu ul li {    display: inline; } #menu ul li a {    display: block;    float: left;    padding: 0 12px;    color: #FFF;       text-decoration: none; } #menu ul li.last a {    padding-right: 20px;    } #menu ul li a:hover {    color: #cccccc;    } #menu ul li#current a {       color: #bc0303; }  /* Main Column */ #main {    float: left;    width: 70%;    padding: 0; margin: 5px 0 0 5px;    display: inline; } #main h2 {    margin-top: 30px;    font: Bold 140% 'Trebuchet MS', Tahoma, Sans-serif;    color: #88ac0b;    padding: 5px 0 5px 25px;       border-bottom: 1px solid #EFF0F1;    background: #FFF  none no-repeat 3px 50%;       text-transform: none; } #main h2 a {    background: none;    color: #88ac0b;    text-decoration: none; }  #main ul li {    list-style-image:  none; }  .post-footer {    background-color: #FAFAFA;    padding: 5px; margin: 20px 10px 10px 10px;    border: 1px solid #f2f2f2;    font-size: 95%;    } .post-footer .date {    background:  none no-repeat left center;    padding-left: 20px; margin: 0 10px 0 5px; } .post-footer .comments {    background:  none no-repeat left center;    padding-left: 20px; margin: 0 10px 0 5px; } .post-footer .readmore {    background:  none no-repeat left center;    padding-left: 20px; margin: 0 10px 0 5px; }  /* Sidebar */    #sidebar {    float: right;    width: 26.5%;    padding: 0; margin: 0;       color: #000;            }    #sidebar h3 {    margin-top: 10px;    padding: 20px 20px;    font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;    color: #bc0303;    } #sidebar ul.sidemenu {    list-style: none;    text-align: left;    margin: 7px 4px 8px 0; padding: 0;    text-decoration: none;         background:  none repeat-x left top; } #sidebar ul.sidemenu li {    list-style: none;    background:  none repeat-x left bottom;    padding: 4px 0 4px 5px;    margin: 0 20px;       color: #bc0303;    } * html body #sidebar ul.sidemenu li {    height: 1%; } #sidebar ul.sidemenu li a {    text-decoration: none;       background-image: none;       color: #666666;          } #sidebar ul.sidemenu li a:hover {       color: #1773BC;    } #sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; } #sidebar ul.sidemenu ul li { background: none; }   /* Footer */    #footer {    color: #C6DDEE;    background:  url(http://pixelea.com/s/32ee7bb5fc.gif) no-repeat center top;    clear: both;    width: 838px;    height: 76px;    text-align: center;       font-size: 92%;    } #footer a {    color: #FFF;    text-decoration: none; }  /* alignment classes */ .float-left  { float: left; } .float-right { float: right; } .align-left  { text-align: left; } .align-right { text-align: right; }  /* display and additional classes */ .clear { clear: both; }

TASARIMIN ÜSTÜNE

<div id="wrap">              <div id="header">                               <h1 id="logo-text"><a href="index.html" _fcksavedurl="index.html"></a></h1>               <p id="slogan"></p>                         <div id="header-links">          <p>             <a href="Url" _fcksavedurl="Url">Link</a> |                      <a href="Url" _fcksavedurl="Url">Link2</a>                   </p>            </div>                              </div>                        <div  id="menu">     <ul>             <li id="current"><a href="Url" _fcksavedurl="Url">Link </a></li>             <li><a href="Url" _fcksavedurl="Url">Link2</a></li>             <li><a href=" Url" _fcksavedurl=" Url">Link3</a></li>                     <li><a href="Url" _fcksavedurl="Url">Link4</a></li>             <li class="last"><a href="Url" _fcksavedurl="Url">Link5</a></li>          </ul>       </div>                                       <div id="content-wrap">                      <div id="sidebar">                               <div class="left-box">                <p class="align-right"></p>             </div>                                       </div>

TASARIMIN ALTINA
CSS BÖLÜMÜNE

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;}   /* Top Elements */ * { margin: 0; padding: 0; outline: 0 }  body {    background-image: none;background-color:#ffffff;    font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;    color: #555;    text-align: center; }  /* links */ a, a:visited {    text-decoration: none;    color: #2180BC;    background: inherit; } a:hover {    color: #88ac0b;    background: inherit;    text-decoration: underline; }  /* headers */ h1, h2, h3 {    font-family: 'Trebuchet MS', Tahoma, Sans-serif;          } h1 {    font-size: 150%;       font-weight: normal;    color: #cccccc; } h2 {    font-size: 140%;    text-transform: uppercase;    color: #cccccc; } h3 {    font-size: 120%;    color: #cccccc; }  h1, h2, h3, p {    padding: 10px;         margin: 0; } ul, ol {    margin: 5px 20px;    padding: 0 20px; }   /********************************************   Design ********************************************/ #wrap {    width: 838px;    background:  url(http://i35.tinypic.com/zlq93m.png) repeat-y center top;    margin: 0 auto;    text-align: left; } #content-wrap {    clear: both;    width: 760px;    padding: 0;    margin: 10px auto; } #header {    width: 838px;    position: relative;    height: 150px;    background: #fff url(http://pixelea.com/s/1489b5be5a.gif) no-repeat center top;    padding: 0;        } #header h1#logo-text a {    position: absolute;    margin: 0; padding: 0;    font: bolder 44px 'Trebuchet MS', Arial, Sans-serif;    letter-spacing: -2px;    color: #FFF;    text-transform: none;    text-decoration: none;    background: transparent;        /* change the values of top and left to adjust the position of the logo*/    top: 25px; left: 47px;    } #header p#slogan {    position: absolute;    margin: 0; padding: 0;    font: normal 12px 'Trebuchet MS', Arial, Sans-serif;    text-transform: none;    color: #FFF;        /* change the values of top and left to adjust the position of the slogan*/    top: 70px; left: 55px;      }  /* header links */ #header #header-links {    position: absolute;    top: 20px; right: 30px;       color: #ffffff;    font-size: 10px;    } #header #header-links a {       color: #FFF;    text-decoration: none;    } #header #header-links a:hover {    color: #cccccc;    }  /* Menu */ #menu {    clear: both;       margin: 0 auto; padding: 0;    background: url(http://pixelea.com/s/9f3afc9e81.gif) repeat-x 0 0;       font: bold 12px/37px Verdana, Arial, Tahoma, Sans-serif;    height: 28px;    width: 838px; } #menu ul {    float: right;    list-style: none;    margin:0; padding: 0; } #menu ul li {    display: inline; } #menu ul li a {    display: block;    float: left;    padding: 0 12px;    color: #FFF;       text-decoration: none; } #menu ul li.last a {    padding-right: 20px;    } #menu ul li a:hover {    color: #cccccc;    } #menu ul li#current a {       color: #bc0303; }  /* Main Column */ #main {    float: left;    width: 70%;    padding: 0; margin: 5px 0 0 5px;    display: inline; } #main h2 {    margin-top: 30px;    font: Bold 140% 'Trebuchet MS', Tahoma, Sans-serif;    color: #88ac0b;    padding: 5px 0 5px 25px;       border-bottom: 1px solid #EFF0F1;    background: #FFF  none no-repeat 3px 50%;       text-transform: none; } #main h2 a {    background: none;    color: #88ac0b;    text-decoration: none; }  #main ul li {    list-style-image:  none; }  .post-footer {    background-color: #FAFAFA;    padding: 5px; margin: 20px 10px 10px 10px;    border: 1px solid #f2f2f2;    font-size: 95%;    } .post-footer .date {    background:  none no-repeat left center;    padding-left: 20px; margin: 0 10px 0 5px; } .post-footer .comments {    background:  none no-repeat left center;    padding-left: 20px; margin: 0 10px 0 5px; } .post-footer .readmore {    background:  none no-repeat left center;    padding-left: 20px; margin: 0 10px 0 5px; }  /* Sidebar */    #sidebar {    float: right;    width: 26.5%;    padding: 0; margin: 0;       color: #000;            }    #sidebar h3 {    margin-top: 10px;    padding: 20px 20px;    font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;    color: #bc0303;    } #sidebar ul.sidemenu {    list-style: none;    text-align: left;    margin: 7px 4px 8px 0; padding: 0;    text-decoration: none;         background:  none repeat-x left top; } #sidebar ul.sidemenu li {    list-style: none;    background:  none repeat-x left bottom;    padding: 4px 0 4px 5px;    margin: 0 20px;       color: #bc0303;    } * html body #sidebar ul.sidemenu li {    height: 1%; } #sidebar ul.sidemenu li a {    text-decoration: none;       background-image: none;       color: #666666;          } #sidebar ul.sidemenu li a:hover {       color: #1773BC;    } #sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; } #sidebar ul.sidemenu ul li { background: none; }   /* Footer */    #footer {    color: #C6DDEE;    background:  url(http://pixelea.com/s/c3775a581d.gif) no-repeat center top;    clear: both;    width: 838px;    height: 76px;    text-align: center;       font-size: 92%;    } #footer a {    color: #FFF;    text-decoration: none; }  /* alignment classes */ .float-left  { float: left; } .float-right { float: right; } .align-left  { text-align: left; } .align-right { text-align: right; }  /* display and additional classes */ .clear { clear: both; }

TASARIMIN ÜSTÜNE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <title>Tu Web Site</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <div id="header"> <div id="headerimg"> <div> <span class="title"><a href="#">Tu Web Site</a></span></div>  <div><span class="slogan">Versión 2009! </span> </div> <div id="search"> <form method="get" id="searchform" action="#"> <div> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Go" /> </div> </form>  </div> <div class="MainSyn"> </div> </div> <div id="navi"> <ul id="nav"> <li class="page_item"><a href="URL">Inicio</a></li> <li class="page_item page-item-2"><a href="URL">Galeria</a></li> <li class="page_item page-item-3"><a href="URL">Juegos</a></li> <li class="page_item page-item-2"><a href="URL">Servicios</a></li> <li class="page_item page-item-2"><a href="URL">Mas</a></li>  </ul> </div> </div> <div id="wrapper"> <div id="page"> <div id="content"> <div> <div>

TASARIMIN ALTINA

<div class="navigation"> <span class="previous-entries"></span> <span class="next-entries"></span> </div> </div> <div class="element atStart"> <div class="footer-recent-posts"> <h4>Temas recientes</h4> <ul> <li> <strong><a href="URL">Como adaptar Plantillas CSS? </a></strong><br /> <small>17-03-2009</small> </li> </ul> </div> </div> </div> </div> <div id="sidebar"> <a href="URL RSS"><img style="vertical-align:middle" src="http://pixelea.com/s/0a928d4763.jpg" alt="RSS" /></a> <h2 class="sidebartitle">Categorias</h2> <div class="widget"> <ul class="list-cat"> <li class="cat-item cat-item-1"><a href="URL">Juegos</li> <li class="cat-item cat-item-2"><a href="URL">Ayuda</li> <li class="cat-item cat-item-1"><a href="URL">Imagenes</li> <li class="cat-item cat-item-1"><a href="URL">Actualidad</li> <li class="cat-item cat-item-1"><a href="URL">Mundo</li> </ul> </div> <h2 class="sidebartitle">Archivos</h2> <div class="widget"> <ul class="list-archives"> <li><a href="URL">Enero 2009</a></li> <li><a href="URL">Febrero 2009</a></li> <li><a href="URL">Marzo 2009</a></li> <li><a href="URL">Abril 2009</a></li> </ul> </div> <h2 class="sidebartitle">Otros Sitios</h2> <div class="widget"> <ul class="linkcat"> <li><a href="http://www.free-css.com/">Free-css</a></li> <li><a href="http://www.pixelea.com/">Pixelea</a></li> <li><a href="http://www.paginawebgratis.es/">PaginaWebGratis</a></li> <li><a href="http://www.team-ayudamaster.es.tl">Team-Ayudamaster</a></li> <li><a href="http://www.paginawebgratis.es/forum">Foro PWG</a></li> </ul> </div> </div> <hr class="clear" /> </div> </div> <div id="footerbg"> <div id="credits" > <div class="center"> © 2009 Tu web.es.tl<br /> | Designed by <a href="http://www.toptut.com">Lorelei</a>| Adapted by <a href="http://www.team-ayudamaster.es.tl">Team-Ayudamaster</a></</div> </div> </div> </body>

CSS BÖLÜMÜNE

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;}  body { font:80%/150% "Trebuchet MS", Tahoma, Arial; color:#d4dac2; background:#000; background-image:url("http://pixelea.com/s/7c3b5e6da8.jpg"); background-repeat:repeat-x; margin:0; padding:0; }  .MainSyn { float:right; margin:-190px 15px 0 0; }  .MainSyn li { list-style-type:none; display:inline; float:left; margin:0 0 0 10px; padding:0; }  .MainSyn a { background:url(http://pixelea.com/s/db6229dcde.png) no-repeat left top; float:left; text-decoration:none; color:#fff; font-size:0.92em; font-family:tahoma,arial,verdana,sans-serif; text-transform:none; font-weight:700; padding:0 0 0 19px; }  .MainSyn a span { display:block; background:url(http://pixelea.com/s/db6229dcde.png) no-repeat right top; float:none; padding:4px 4px 5px 6px; }  .MainSyn a:hover { background-position:0 -27px; text-decoration:none; color:#89B0D1; }  .MainSyn a:hover span { background-position:100% -27px; color:#8CB1D1; }  .toggler { color:#222; background:#eee; border-bottom:1px solid #ddd; border-right:1px solid #ddd; border-top:1px solid #f5f5f5; border-left:1px solid #f5f5f5; font-size:11px; font-weight:400; font-family:'Andale Mono', sans-serif; margin:0; padding:2px 5px; }  .element p { margin:0; padding:4px; }  .float-right { float:right; padding:10px 20px; }  a { color:#7a9396; text-decoration:none; }  a:visited { color:#797900; text-decoration:none; }  a:hover { color:#736539; }  p { margin:0; padding:0 0 15px; }  h1 { height:60px; font:lighter 2.4em/1.2em Georgia,"Times New Roman",Times,serif; color:#FFF; margin:0; }  .title a { font:lighter 2.5em/1.3em verdana; color:#FFF; margin:1px; }  .title a:hover { font:lighter 2.5em/1.3em verdana; color:#c5f8f9; background:none; margin:1px; }  .slogan { color:#FFF; font-size:12px; }  h1 a,h1 a:visited { color:#FFF; text-decoration:none; }  h1 a:hover { color:#FFF; text-decoration:none; border:none; background:none; }  h2 { color:#4395bc; border-bottom:1px dotted #4395BC; width:100%; font:lighter 1.7em Georgia,"Times New Roman",Times,serif; padding-bottom:3px; margin:0 0 2px; }  h2 a,h2 a:visited { color:#ffbd33; text-decoration:none; }  h2 a:hover { color:#778b10; text-decoration:none; }  h4 { font:normal 130%/100% "Trebuchet MS", Tahoma, Arial; color:#f79043; margin:10px 0 5px; }  #wrapper { margin-top:0; margin-left:auto; margin-right:auto; width:962px; }  #page { width:961px; background:#252f30; margin:0 auto; }  #header { background-image:url(http://pixelea.com/s/4a8d28cb4c.jpg); position:relative; margin-top:0; color:#6d8302; width:1024px; height:286px; margin-left:auto; margin-right:auto; }  #headerimg { position:relative; margin-top:0; height:60px; width:760px; padding:140px 0 0 10px; }  #headerimg .description { color:#F6F5EE; padding-left:5px; font-size:14px; float:right; }  #navi { position:relative; height:30px; width:760px; margin-top:1px; margin-left:1px; text-align:center; line-height:normal; padding:42px 0 0 10px; }  #nav { list-style:none; float:left; margin:0 3px; padding:0; }  #nav li { float:left; height:30px; white-space:nowrap; margin:0 3px; }  #nav .page_item a { color:#c5f8f9; display:block; text-decoration:none; text-transform:uppercase; font:bold 1.1em Arial, Helvetica, sans-serif; line-height:30px; padding:0 12px; }  #nav li:hover { border:1px solid #dbfcfd; background:url(http://pixelea.com/s/5319e343f3.jpg) top repeat-x;  }  #nav .page_item a:hover { background-position:0 -36px; border:none; }  #nav li.current_page_item { color:#c5f8f9; text-decoration:none; text-transform:uppercase; border-bottom:1px solid #E3F7FF; }  #nav .current_page_item a,#nav .current_page_item a:visited { color:#c5f8f9; text-decoration:none; text-transform:uppercase; }  #content { float:left; width:700px; overflow:hidden; margin-left:10px; padding:0 0 30px 13px; }  #content img { border:1px solid #ccc2a2; padding:5px; }  .post { clear:both; padding-top:15px; }  .post-date { width:45px; height:49px; text-align:center; background:url(-) no-repeat; }  .post-month { font-size:11px; text-transform:uppercase; color:#FFF; text-align:center; display:block; line-height:11px; padding-top:2px; margin-left:-3px; }  .post-day { font-size:18px; text-transform:uppercase; color:#999; text-align:center; display:block; line-height:18px; padding-top:7px; margin-left:-3px; }  .post-cat { padding-left:0; float:left; }  .post-dates { padding-left:10px; margin-left:70px; float:left; font-size:95%; color:#BEB187; }  .post-comments { padding-left:20px; float:right; }  .post-calendar { padding-left:0; float:right; font-size:95%; color:#999; }  .post-content { clear:both; padding-top:10px; }  .post-info { height:15px; color:#6d8302; font:bold 12px "Trebuchet MS", "Tahoma", sans-serif; border-top:1px dotted #4395bc; padding:10px; }  .post-info a { color:#4395bc; text-decoration:underline; }  .post-info a:hover { color:#ffbd33; text-decoration:none; }  .post-content blockquote { background:#095758; border-right:2px solid #29b8bc; color:#fff; padding:8px; }  .navigation { clear:both; padding:10px 0; }  .navigation a,.navigation a:visited { color:#59770e; }  .previous-entries a { float:left; padding-left:18px; background:url(-) no-repeat left center; }  .next-entries a { float:right; padding-right:18px; background:url(-) no-repeat right center; }  #comments,#respond { border-bottom:1px dotted #4395BC; clear:both; padding:10px 0 5px; }  .commentlist { padding-left:20px; line-height:130%; margin:10px 0; }  .commentlist li { padding:10px 10px 0; }  .commentlist .alt { background:#e9ebd4; border:1px dotted #eaecda; }  .commentlist cite,.commentlist cite a,.commentlist cite a:visited { font-weight:700; font-style:normal; font-size:120%; }  .commentlist small { margin-bottom:5px; display:block; font-size:87%; }  #commentform { margin-top:10px; font:110% Arial, Helvetica, sans-serif; }  #commentform p { margin:0; padding:6px 0; }  #commentform label { color:#787878; font-size:87%; }  #commentform input { width:200px; background:#D8DAAF; border:1px dotted #eaecda; margin-top:3px; padding:3px; }  #commentform textarea { width:485px; height:115px; background:#e9ebd4; border:1px solid #eaecda; margin-top:3px; overflow:hidden; padding:2px; }  #commentform textarea:focus,#commentform input[type="text"]:focus { background:#fff; }  #commentform #submit { background:url(http://pixelea.com/s/15924b858c.gif) no-repeat; border:1px solid #111; font:bold 12px Arial, Helvetica, sans-serif; color:#fff; float:right; width:144px; height:28px; cursor:pointer; }  #sidebar { float:right; width:190px; color:#31e1e6; overflow:hidden; padding:14px 10px 20px 0; }  #sidebar h2,#sidebar .sidebartitle { font:1em Arial,Helvetica,FreeSans,clean,sans-serif; color:#ffbd33; font-weight:700; margin-bottom:5px; font-size:14px; }  #sidebar a,#sidebar a:visited { color:#31e1e6; text-decoration:none; }  #sidebar li a:hover { color:#ffbd33; text-decoration:none; }  .widget { margin-bottom:10px; border-top:1px solid #1c9598; border-left:1px solid #1c9598; border-bottom:1px solid #04686a; border-right:1px solid #04686a; background:#095759; padding:5px 10px 10px; }  #sidebar ul li { list-style:none; border:none; margin:0; padding:0; }  #sidebar ul li ul li { border-bottom:1px solid #31e1e6; padding:2px 0; }  #sidebar ul li ul li ul li { border:none; padding:1px 0 1px 10px; }  ul.list-archives div,li.widget_archives li { background:url(-) no-repeat !important; padding-left:0 !important; }  ul.list-page li,div.widget_pages li,li.widget_recent_entries li { background:url(-) no-repeat left center !important; padding-left:0 !important; }  ul.list-page li ul div,li.widget_pages li ul li { background:url(-) no-repeat !important; padding-left:10px !important; }  div.widget_recent_comments li { background:url(-) no-repeat !important; padding-left:20px !important; }  div.widget_calendar td { padding:1px 5px; }  .textwidget { padding-top:5px; }  #search { float:left; width:185px; height:25px; text-align:center; padding-top:1px; padding-left:40px; margin:-197px 15px 0 0; }  #searchform { margin:3px 0 0; }  #searchform br { display:none; }  #searchform #s { width:130px; height:17px; border:1px solid #a29b85; background:#fff; margin-right:2px; color:#000; font-weight:400; padding:3px 5px 0; }  #searchform input { background:none; border:none; height:16px; font:bold 12px Arial, Helvetica, sans-serif; color:#FFF; vertical-align:middle; }  #footerbg { background:#252f30; clear:both; padding-bottom:10px; border-top: 1px dotted #0C72A2; height:50px; text-align: middle; width:962px; margin-bottom:0; margin-left:auto; margin-right:auto; }  #footer { width:962px; font-size:75%; color:#6d8302; line-height:130%; margin:0 auto; }  #footer a,#footer a:visited { color:#0C72A2; }  #footer h4 { font:normal 146%/100% "Trebuchet MS", Tahoma, Arial; color:#6d8302; margin:10px 0 5px; }  .footer-recent-comments ul { list-style:none; margin:0; padding:0; }  .footer-meta { background:#e8dfc3; width:100%; float:left; margin-left:20px; }  .footer-meta ul li { background:url(http://pixelea.com/s/1a73fc1892.gif) no-repeat 5px 4px; font-size:107%; line-height:135%; font-weight:700; display:inline; padding:0 0 10px 20px; }  #credits { color:#69a599; font-size:1.0em; margin:0 auto 0 50px; }  #credits a,#credit a:visited { color:#69a599; }  #credits a:hover { color:#6B8E23; }  .footer-meta ul li.rss { background:url(-) no-repeat left 2px; padding:0 0 10px 20px; }  .loginout { background:url(-) no-repeat left center; padding-left:18px; padding-bottom:2px; margin-left:8px; }  .center { text-align:center; }  img.center,img[align="center"] { display:block; margin-left:auto; margin-right:auto; }  .alignleft { float:left; }  img.alignleft,img[align="left"] { float:left; margin:2px 10px 5px 0; }  .alignright { float:right; }  img.alignright,img[align="right"] { float:right; margin:2px 0 5px 10px; }  .clear { clear:both; }  hr.clear { clear:both; visibility:hidden; margin:0; padding:0; }  .MainSyn ul,#sidebar ul li ul { margin:0; padding:0; }  img,#sidebar a:hover { border:none; }  form,#sidebar ul { margin:0; padding:0; }  ul.linkcat li,div.linkcat li,ul.list-cat li,div.widget_categories li { padding-left:0 !important; }  .footer-recent-comments,.footer-recent-posts { width:240px; float:left; margin-left:10px; }  .footer-recent-comments ul li,.footer-recent-posts ul li { background:url(http://pixelea.com/s/1a73fc1892.gif) no-repeat 5px 4px; padding:0 0 10px 20px; }  .footer-recent-posts strong,.footer-meta strong { font-size:107%; line-height:135%; font-weight:700; }  .footer-recent-posts ul,.footer-meta ul { list-style:none; font-size:92%; line-height:110%; margin:0; padding:0; }

TASARIMIN ÜSTÜNE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.en"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <div id="wrapper">    <div id="header">       <h1>Designs-web</h1>       <h3>And Photoshop Extreme</h3>     </div>    <div id="topnavi">       <ul>          <li class="select"><a href="#" _fcksavedurl="#">HOME</a></li>          <li class="norm"><a href="#" _fcksavedurl="#">SERVICES</a></li>          <li class="norm"><a href="#" _fcksavedurl="#">PRODUCTS</a></li>          <li class="norm"><a href="#" _fcksavedurl="#">STRATEGY</a></li>           <li class="norm"><a href="#" _fcksavedurl="#">PARTNERS</a></li>          <li class="norm"><a href="#" _fcksavedurl="#">ABOUT US</a></li>          <li class="norm"><a href="#" _fcksavedurl="#">CONTACT</a></li>       </ul>    </div>    <div id="headimg"> </div>    <div id="bodybox">        <div id="subnavi">          <h2>Home</h2>          <ul>             <li class="select"><a href="#" _fcksavedurl="#">Sidebar Link</a></li>             <li class="norm"><a href="#" _fcksavedurl="#">Sidebar Link</a></li>             <li class="norm"><a href="#" _fcksavedurl="#">Sidebar Link</a></li>             <li class="norm"><a href="#" _fcksavedurl="#">Sidebar Link</a></li>              <li class="norm"><a href="#" _fcksavedurl="#">Sidebar Link</a></li>             <li class="norm"><a href="#" _fcksavedurl="#">Sidebar Link</a></li>          </ul>       </div>

TASARIMIN ALTINA
CSS BÖLÜMÜNE

body {    margin-top:29px;    text-align:center;    background-image:url(http://pixelea.com/s/70774241ad.jpg);    background-color:#000000;    font-family:Tahoma, sans-serif;    font-size:11px;    color:#eeeeee; }  #wrapper {    width:702px;    margin:0 auto;    background-image:url(http://pixelea.com/s/90e5ce1ce1.jpg);    text-align:left; }  #header {    float:left;    width:702px;    height:83px;    background-image:url(http://pixelea.com/s/6d36773c59.jpg); }  h1 {    margin:0px;    padding:0px;    font-family:Arial, Helvetica, sans-serif;    font-weight:bold;    font-size:30px;    color:#ff5700; }  h2 {    margin:0px;    padding:0px;    font-family:Arial, Helvetica, sans-serif;    font-weight:bold;    font-size:18px;    color:#ff5700; }  h3 {    margin:0px;    padding:0px;    font-family:Tahoma, sans-serif;    font-size:11px;    color:#cccccc;    font-weight:normal; }  .cleaner {    clear:both;    height:0px;    font-size:0px;    border:none;    margin:0; padding:0;    background:transparent; }  #header h1 {    margin-top:25px;    margin-left:25px; }  #header h3 {    margin-top:-6px;    margin-left:25px; }  #topnavi {    float:left;    width:702px;    height:29px;    background-image:url(http://pixelea.com/s/afc62d3498.jpg); }  #topnavi ul {    margin:0px;    padding:0px;    list-style-type:none;    margin-left:8px;    margin-right:8px; }  #topnavi ul li.norm {    float:left;    height:29px;    background-image:url(http://pixelea.com/s/ee27b04161.jpg);    background-position:right; }  #topnavi ul li.select {    float:left;    height:29px;    background-image:url(http://pixelea.com/s/54ce2ca29e.jpg);    background-position:right; }  #topnavi ul li.norm a {    display:block;    padding-right:24px;    padding-left:24px;    line-height:28px;    font-family:Arial, Helvetica, sans-serif;    font-weight:bold;    color:#FFFFFF;    font-size:10px;    text-decoration:none; }  #topnavi ul li.select a {    display:block;    padding-right:24px;    padding-left:24px;    line-height:28px;    font-family:Arial, Helvetica, sans-serif;    font-weight:bold;    color:#FFFFFF;    font-size:10px;    text-decoration:none; }  #topnavi ul li.norm a:hover {    display:block;    padding-right:24px;    padding-left:24px;    line-height:28px;    font-family:Arial, Helvetica, sans-serif;    font-weight:bold;    color:#FFFFFF;    font-size:10px;    text-decoration:underline; }  #topnavi ul li.select a:hover {    display:block;    padding-right:24px;    padding-left:24px;    line-height:28px;    font-family:Arial, Helvetica, sans-serif;    font-weight:bold;    color:#FFFFFF;    font-size:10px;    text-decoration:underline; }  #headimg {    float:left;    width:702px;    height:147px;    background-image:url(http://pixelea.com/s/f68137e031.jpg); }  #bodybox {    float:left;    width:702px;    background-image:url(http://pixelea.com/s/4321d525f9.jpg);    background-repeat:no-repeat; }  #subnavi {    float:left;    display:inline;    margin-left:18px;    margin-top:2px;    padding-top:26px;    padding-bottom:26px;    width:180px;    background-color:#1e1d1e;    background-image:url(http://pixelea.com/s/b0aa904755.jpg);    background-position:bottom; }  #subnavi ul {    margin:0px;    padding:0px;    list-style-type:none;    margin-left:13px;    margin-right:13px; }  #subnavi ul li.norm, #subnavi ul li.select {    height:24px;    background-image:url(http://pixelea.com/s/57a1f1f1b5.gif); }  #subnavi ul li.norm a {    display:block;    line-height:23px;    padding-left:20px;    font-family:Arial, Helvetica, sans-serif;    font-size:11px;    color:#eeeeee;    text-decoration:none; }  #subnavi ul li.norm a:hover {    display:block;    line-height:23px;    padding-left:20px;    font-family:Arial, Helvetica, sans-serif;    font-size:11px;    color:#eeeeee;    text-decoration:underline; }  #subnavi ul li.select a {    display:block;    line-height:23px;    padding-left:20px;    font-family:Arial, Helvetica, sans-serif;    font-size:11px;    color:#ff5700;    text-decoration:none; }  #subnavi ul li.select a:hover {    display:block;    line-height:23px;    padding-left:20px;    font-family:Arial, Helvetica, sans-serif;    font-size:11px;    color:#ff5700;    text-decoration:underline; }  #subnavi h2 {    margin-left:17px;    margin-bottom:6px; }  #content {    float:left;    display:inline;    width:440px;    margin-left:27px;    margin-right:27px;    padding-top:26px;    padding-bottom:26px; }  #content p {    color:#eeeeee; }  #content ul {    list-style-image:url(http://pixelea.com/s/0582320639.gif) }  #content a {    color:#ff5700;    text-decoration:none; }  #content img.pic {    float:right;    margin-left:8px;    margin-bottom:8px;    border:1px solid #333333;    padding:2px; }  #content a:hover {    color:#ff5700;    text-decoration:underline; }  #footer {    float:left;    width:702px;    height:49px;    background-image:url(http://pixelea.com/s/662cde7d72.jpg);    text-align:center;    color:#cccccc;    font-family:Tahoma, sans-serif;    font-size:9px;    line-height:42px; }  #footer a {    color:#cccccc;    text-decoration:none; }  #footer a:hover {    color:#cccccc;    text-decoration:underline;  } #header {display: none;} #title {display: none;} #nav_container { display:none; }