- CSS TASARIM 3

CSS TASARIM 3

TASARIMIN ÜSTÜNE :

TASARIM ALTINA:

<div  id="sidebar">  <div id="sidebar-top">     <h3>PaginaWebGratis.es</h3>      <ul>    <li  class="page_item page-item-2"><a href="#" _fcksavedurl="#"  ">Foro</a></li>    <li><a href="#"  _fcksavedurl="#">Normas del Foro</a></li>     <li><a href="#" _fcksavedurl="#">Moderadores del  Foro</a></li>  </ul> </div>    <div id="sidebar-bottom"> <h3>Web's  Amigas</h3> <ul class='xoxo blogroll'>    <li><a  href="#" _fcksavedurl="#">Enlace 1</a></li>     <li><a href="#" _fcksavedurl="#">Enlace  2</a></li>    <li><a href="#"  _fcksavedurl="#">Enlace 3</a></li>    <li><a  href="#" _fcksavedurl="#">Enlace 4</a></li>     <li><a href="#" _fcksavedurl="#">Enlace  5</a></li> </ul> </div>      <div  id="sidebar-bottom"> <h3>Lo mas Destacado</h3> <ul  class='xoxo blogroll'>    <li><a href="#"  _fcksavedurl="#">Enlace 1</a></li>    <li><a  href="#" _fcksavedurl="#">Enlace 2</a></li>     <li><a href="#" _fcksavedurl="#">Enlace  3</a></li>    <li><a href="#"  _fcksavedurl="#">Enlace 4</a></li>    <li><a  href="#" _fcksavedurl="#">Enlace 5</a></li> </ul>  </div>      </div> </div>    </div> <div  id="front-popular" class="clearfloat"> <div id="recentpost"  class="clearfloat">    <h3>Webmaster Tux !</h3>           <ul id="recentcomments">    <li><a href='#'  _fcksavedurl='#'>Nombre</a></li>    <li><a  href='#' _fcksavedurl='#'>Nombre</a></li>     <li><a href='#' _fcksavedurl='#'>Nombre</a></li>     <li><a href='#'  _fcksavedurl='#'>Nombre</a></li>    <li><a  href='#' _fcksavedurl='#'>Nombre</a></li>     <li><a href='#' _fcksavedurl='#'>Nombre</a></li>   </ul> </div>         <div id="mostcommented"  class="clearfloat"> <h3>Webmaster Tux !</h3> <ul>     <li><a href='#'  _fcksavedurl='#'>Nombre</a></li>    <li><a  href='#' _fcksavedurl='#'>Nombre</a></li>     <li><a href='#' _fcksavedurl='#'>Nombre</a></li>     <li><a href='#'  _fcksavedurl='#'>Nombre</a></li>    <li><a  href='#' _fcksavedurl='#'>Nombre</a></li>     <li><a href='#' _fcksavedurl='#'>Nombre</a></li>  </ul> </div>  <div id="recent_comments"  class="clearfloat"> <img  src="http://www.fileden.com/files/2009/5/1/2426283/square.jpg"  _fcksavedurl="http://www.fileden.com/files/2009/5/1/2426283/square.jpg"  width="280px" height="210px" /> </div> </div> <div  id="footer"> Potenciado por <a href="http://es.tl"  _fcksavedurl="http://es.tl">Pagin web gratis</a> | Diseño  Creado por : www.Team-AyudaWebs </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;} #header {display: none;} #title {display: none;} #nav_container  {display:none;} table {margin-left:auto;margin-right:auto;}   *  {margin:0;padding:0;}  body {    font: 100% Arial, Helvetica;     background: #FFF;    color: #333;    }  p {       margin: 15px 0;    }   a:link, a:visited {    color: #3c78a7;    text-decoration:none    }   a:hover, a:active {    color: #3c78a7;    text-decoration:underline;    }   a img {    border:0;    }  code {    font: 1.0em 'Courier New',  Courier, Fixed;    background:#ececec;    }     acronym, abbr, span.caps  {       font-size: 0.9em;    letter-spacing: .07em;    cursor: help;     }           acronym, abbr {    border-bottom: 1px dashed #999;    }   blockquote {    padding: 10px 10px 0 10px;    border-top: 1px solid  #ddd;    border-bottom: 1px solid #ddd;    background: #eee;     font:1.0em Arial;    line-height:1.5em;    margin:10px 0px;    }  select  {    width: 130px;    }       /* Structure */   #head {    width:960px;     margin:0px auto;    margin-top:15px;    padding:0px;     font-size:0.7em;    }   #page {    width:940px;    margin:0px auto;     padding:10px;    background:#ececec;    font-size:0.7em;    }  .left,  .alignleft {    float:left;    }  .right, .alignright {    float:right;     }   /* Navigation Bar*/ #navbar {    margin:0 auto;     margin-top:15px;    padding:0px 10px;    text-transform:uppercase;     background:#2c2c2c  url("https://img.webme.com/pic/p/pruebas-webmaster-tux/navbar.png");    }   #page-bar {    width:722px;    }  #page-bar ul {    list-style: none;     }  #page-bar li {    float:left;    list-style:none;    cursor:  pointer;    display:block;    border-right:1px solid #333;    }   #page-bar li:hover {    background: #402020;    }   #page-bar a,  #page-bar a:visited {    margin: 0px;    padding:10px 16px;     font-weight:bold;    color:#FFF;    display:block;    }  #page-bar  a:hover {    text-decoration:none;    display:block;    }  #searchform {     width:194px;    float:right;    text-align:right;     padding-top:8px;    margin-right:10px;    }  /* Dropdown Menus */       #page-bar li {    float: left;    margin: 0px;    padding: 0px;    }      #page-bar li li {    float: left;    margin: 0px;    padding: 0px;     width: 122px;    text-transform:none;    }     #page-bar li li a,  #page-bar li li a:link, #page-bar li li a:visited {    background:  #2B2B2B;    width: 122px;    float: none;    margin: 0px;    padding:  5px 10px 5px 18px;    border-top: 1px solid #C0C0C0;    }     #page-bar  li li a:hover, #page-bar li li a:active {    background: #666666;     padding: 5px 10px 5px 18px;    }  #page-bar li ul {    position:  absolute;    width: 10em;    left: -999em;    }  #page-bar li:hover ul {     left: auto;    display: block;    }     #page-bar li:hover ul,  #page-bar li.sfhover ul {    left: auto;    }   /* Text*/  h1 {     font:3.5em Arial;    font-weight:bold;    letter-spacing:-0.08em;    }   h2 {    font:2.3em Georgia, "Times New Roman";    }  h3 {    font:1.3em  Arial;    margin-bottom:3px;    color:#3c78a7;    font-weight:bold;    }   h4 {    font:1.0em Arial;    }  h3.cat_title, h3.cat_title a {     color:#333;    letter-spacing:-0.05em;    font-size:0.85em;    }   h3#respond {    margin-top:0px;    padding-top:20px;    }  h3#comments {     margin-top:32px;    padding-left:0px;    }  h3.authors {     margin-top:15px;    }  /* Index Page*/  #logo {    width:350px;    }   #tagline {    margin-top:5px;    font-size:1em;    color:#333;    }   #top {    padding:0;    }  #headline {    width:590px;    float:left;     background:#fff;    padding:10px;    font-size:1.05em;     line-height:1.5em;    margin:0;    }  #headline  div.title {     font-weight:bold;    font:2.4em Georgia;    letter-spacing:-0.05em;     display:block;    padding-bottom:5px;    }  #headline div.meta {     display:block;    margin-top:-5px;    padding-bottom:2px;    }   #headline p {    padding-bottom:15px;    }  #featured {    width:300px;     background:#fff;    float:right;    padding:10px 10px 9px 10px;    }   #featured .clearfloat {    margin-top:7px;    margin-bottom:8px;    }   #featured .info {    margin-top:5px;    padding-top:5px;    float:right;     width:180px;    }  #featured .title {    font-weight:bold;    }   #headline a img, #featured a img {    border:1px solid #ccc;     margin-top:5px;    margin-right:10px;    padding:2px;    }     .category  {    width:164px;    float:left;    border-top:8px solid #333;     margin:0px;    padding:5px 10px 10px 10px;    background:#fff;    }   .category p {    margin:0;    }  #cat-1, #cat-3, #cat-5  {border-top:8px  solid #333333;} #cat-2, #cat-4 {border-top:8px solid #3c78a7;}   .category span.cat_title, #front-popular h3, #front-list .cat_title,  #archive .cat_title {    text-transform:lowercase;    margin:0;     font-weight:bold;    font-size:1.5em;    letter-spacing:-0.05em;    }   #front-popular h3 {    color:#fff;    }  .category a {    color:#333;     display:block;    background:none;    }  .category a:hover {     background:none;    color:#fff;    text-decoration:none;    }  #waper {     width: 940px;    }  #content {    width:590px;    background:#fff;     padding:10px;    font-size:1.05em;    line-height:1.75em;     float:left;    }  #archive {    padding-top:15px;    font-size:1.05em;     line-height:1.75em;    }  #front-list blockquote {    padding: 0px  10px 0 10px;    }  #front-list .title, #archive .title {     font-weight:bold;    font:2.0em Georgia;    letter-spacing:-0.05em;    }   #front-list .clearfloat, #archive .clearfloat {     padding-bottom:10px;    border-bottom:1px dotted #ccc;     margin-bottom:10px;    }  #front-list .spoiler, #archive .spoiler {     display:block;    margin-top:3px;    }  #front-list p, #archive p {     margin:0px;    padding:0px;    }  .author {    font-size:0.8em;     font-weight:bold;    }  .meta {    font-size:0.8em;    color:#333;    }   .meta a {    color:#333;    }  #headline p, #featured p {    margin:0;     }   /* Content Page*/    /* Sidebar*/ #sidebar {    width:320px;     float:right;    margin:0px 0px 0px 0px;    }  #sidebar h3 {     font:1.1em Arial;    font-weight:bold;    background:  url(https://img.webme.com/pic/p/pruebas-webmaster-tux/navbar.png);     color:#fff;    margin:10px 0px 5px 0px;    padding:3px 10px;    }   #sidebar-top, #sidebar-bottom {    width:300px;    float:right;     padding:0px 10px 10px 10px;    background:#fff;    }  #sidebar-bottom,  #sidebar-middle {    margin-top:10px;    }  #sidebar-middle {     width:320px;    float:right;    }  #sidebar-left {    width:135px;     padding:0px 10px 10px 10px;    float:left;    background:#fff;    }   #sidebar-right {    width:135px;    padding:0px 10px 10px 10px;     float:right;    background:#fff;    }   #sidebar li {     list-style:none;    border-bottom:1px dotted #ccc;    display:block;     padding:2px 0px 2px 13px;     background:url("http://www.fileden.com/files/2009/5/1/2426283/sub.png")  no-repeat 0 0px;    }  #sidebar li ul li:last-child{    list-style:none;     border-bottom:0px dotted #ccc;    display:block;    padding:2px 0px  0px 13px;     background:url("http://www.fileden.com/files/2009/5/1/2426283/sub.png")  no-repeat 0 0px;    }  #sidebar-ads {    width:300px;    float:right;     margin-bottom:10px;    padding:10px;    background:#fff;    }   /* Form  Elements */  select {    border:1px solid #333;    width:100%    }      .field {    padding: 2px;    border:1px solid #333;    background:#fff;     font-size:1.0em;    }  #s {    padding:1px;    font-size:1.0em;     width:150px;    }     #searchsubmit {    padding-left:5px;    }   #commentform input {    width: 140px;    margin: 5px 5px 1px 0;    }   #commentform textarea {    width: 99%;    margin-top:5px;    }    /*  Comments*/  .commentlist cite {    font-style:normal;     margin-bottom:4px;    display:block;    }     .commentlist blockquote {     background:#ededed;    }           .commentlist li {    padding: 10px  0px 10px 0px;    list-style:none;    margin-bottom:3px;    }   .commentlist li li {    background:none;    border:none;     list-style:square;    margin:3px 0 3px 20px;    padding:3px 0;    }   .commenttext {    padding: 10px 10px 0px 10px;    background:#f2f2f2;     border-top:1px solid #ddd;    border-bottom: 1px solid #ddd;     width:495px;    float:right    }       .commentlist cite strong {     font-size:1.1em;    }     li.my_comment {    background: #FFF;     border:none;    }  li.my_comment cite strong {    font-size: 1.3em;     color:#313228;    }     #commentform small {    background:#FFF;     font-weight:bold;    padding:0;    }     .commentmetadata {     color:#4d4d4d;    display: block;    margin-top:3px;     text-align:right;    font-size:0.9em;    }  .commentmetadata a,  .commentmetadata a:visited {    color:#959382;    }     .commentlist  small {    background:#e9e9e9;    }  .avatar {    border:1px solid #bbb;     margin:0px 10px 0px 0px;    float:left;    padding:2px;     width:55px;    height:55px;    }     #comment {    width:590px;     background:#fff;    }  /* Footer*/  #front-popular {    font-size:0.7em;     color:#fff;    width: 940px;    background:#2c2c2c  url("https://img.webme.com/pic/p/pruebas-webmaster-tux/bottombar.png")  bottom no-repeat;    margin: 0 auto;    padding:10px;    }  #recentpost,  #mostcommented {    width:280px;    float:left;    padding:10px;     border:1px solid #fff;    }  #mostcommented {    margin-left:17px;    }   #recent_comments {    width:280px;    float:right;    padding:10px;     border:1px solid #fff;    }  #recentpost a, #mostcommented a,  #recent_comments a {    color:#fff;    }  #recentpost ul, #mostcommented  ul, #recent_comments ul {    margin-top:5px;    }  #recentpost ul li,  #mostcommented ul li, #recent_comments ul li {    list-style:none;     border-top:1px dotted #fff;    padding:5px;    display:block;    }   #recentpost ul li:hover, #mostcommented ul li:hover, #recent_comments ul  li:hover {    background:#402020;    color:#fff;    }  #recentpost ul  li:first-child, #mostcommented ul li:first-child, #recent_comments ul  li:first-child {    border-top:0px dotted #fff;    }   #footer {     margin: 0 auto;    width: 960px;    font-size:0.6em;     padding-top:10px;    padding-bottom:10px;    }   /* Float Properties*/   .clearfloat:after {    content:".";    display:block;    height:0;     clear:both;    visibility:hidden;    }  .clearfloat {    display:  inline-block;    }   /* Hides from IE-mac */ * html .clearfloat {     height:1%;    }  *+html .clearfloat {    height:1%;    }  .clearfloat {     display:block;    }