Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje10-12-2010, 18:04 (UTC)    
Título del mensaje: (AYUDA) CON MI CSS DESIGN
Responder citando
hHola webmaster, tengo un pequeño problema que nose como arreglarlo. Tengo una plantilla css descargada y casi terminada de adaptar el problema es que los comentarios y el contenido de la página salen por debajo de la plantilla. Os dejo los codigos por debajo a ver si me podeis ayudar. Saludos.
NUEVA AYUDA:: EL CODGIO DE HERNAN666RECURSOS SI ME SIRVE PERO AHORA EL CONTENIDO SALE ENTRE LA PARTE SUPERIOR Y LA DE ABAJO EN VEZ DE SALIR EN LA PLANTILLA. PODEIS VER LO QUE DIGO EN: WWW.SALVA-DO.ES.TL/INICIO.HTM

Codigo completo de la plantilla::
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
 
<title>CoolBlue</title>
 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="Erwin Aligam - styleshout.com" />
<meta name="description" content="Site Description Here" />
<meta name="keywords" content="keywords, here" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />
 
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
 
</head>
 
<body>
 
<!--header -->
<div id="header-wrap"><div id="header">
 
   <a name="top"></a>
 
   <h1 id="logo-text"><a href="index.html" title="">Salva-Do</a></h1>
   <p id="slogan">Lo mejor esta aquí </p>
 
   <div  id="nav">
      <ul>
         <li id="current"><a href="index.html">Inicio</a></li>
         <li><a href="style.html">Concursos</a></li>
         <li><a href="blog.html">Foro No Disponible</a></li>
         <li><a href="archives.html">PSP</a></li>
         <li><a href="index.html">PC</a></li>
         <li><a href="index.html">Wii Muy Pronto</a></li>
      </ul>
   </div>
 
   <p id="rss">
      <a href="index.html"></a>
   </p>
 
   <form id="quick-search" method="get" action="index.html">
      <fieldset class="search">
         <label for="qsearch">Search:</label>
         <input class="tbox" id="qsearch" type="text" name="qsearch" value="Buscar" title="Start typing and hit ENTER" />
         <button class="btn" title="Submit Search">Search</button>
      </fieldset>
   </form>
 
<!--/header-->
</div></div>
   
<!-- content-outer -->
<div id="content-wrap" class="clear" >
 
   <!-- content -->
   <div id="content">
 <!-- main -->
      <div id="main">
 
         <div class="post">
 
            <div class="right">
 
               <h2><a href="">Salva-Do Estrena Nueva Plantilla</a></h2>
 
               <p class="post-info">Noticia de <a href="index.html">actualizaciones</a>, <a href="index.html">novedades</a></p>
 
                  <div class="image-section">
                       <img src="http://img.webme.com/pic/m/marcihabbohd/salvado3.jpg" alt="image post" height="200" width="500"/>
                   </div>
 
               <p><strong>Salva-do</strong> estrena una nueva plantilla más moderna y con más novedades. La plantilla esta creada por Style Shout y totalmente modificada por mi. </p>         
<p>Crear una plantilla web y modificarla no es fácil es difícil  y hay que tener ciertos conocimientos en códigos html. </p>
<p>Bueno, dejemonos de rollos y vamos a decirte las novedades de esta plantilla:</p>
<p>-Podrás acceder a la pagina de Salva-do en Facebook y Twitter.</p>
<p>-Podrás encontrar todas las noticias organizadas por fecha y hora de publicación.</p>
<p>-Toda la información sobre mi.                              </p>
 
 
               <p><a class="more" href="index.html">..</a></p>
 
            </div>
 
            <div class="left">
 
               <p class="dateinfo">DIC<span>8</span></p>
 
                  <div class="post-meta">
                     <h4>Post Info</h4>
                        <ul>
                           <li class="user"><a href="#">Marcial</a></li>
                           <li class="time"><a href="#">15:45 PM</a></li>
                           <li class="comment"><a href="#">0 Comments</a></li>
                           <li class="permalink"><a href="#">Permalink</a></li>
                        </ul>
                  </div>
 
            </div>
 
         </div>
 
         <div class="post">
 
            <div class="right">
 
               <h2><a href="index.html">Aliquam Risus Justo</a></h2>
 
               <p class="post-info">Filed under <a href="index.html">templates</a>, <a href="index.html">internet</a></p>
 
               <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
               Cras id urna. Morbi tincidunt, orci ac <a href="index.html">convallis aliquam</a>, lectus turpis varius lorem, eu
               posuere nunc justo tempus leo.</p>
 
               <p>
               Donec mattis, purus nec placerat bibendum, <a href="index.html">dui pede condimentum</a>
               odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra
               condimentum, lorem tellus eleifend magna, <a href="index.html">eget fringilla velit</a> magna id neque. Curabitur vel urna.
               In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
               Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
               posuere nunc justo tempus leo.</p>
 
               <p><a class="more" href="index.html">continue reading »</a></p>
 
            </div>
 
            <div class="left">
 
               <p class="dateinfo">JAN<span>29</span></p>
 
               <div class="post-meta">
                  <h4>Post Info</h4>
                     <ul>
                        <li class="user"><a href="#">Erwin</a></li>
                        <li class="time"><a href="#">10:30 PM</a></li>
                        <li class="comment"><a href="#">5 comments</a></li>
                        <li class="permalink"><a href="#">Permalink</a></li>
                     </ul>
               </div>
 
            </div>
 
         </div>
 
         <div class="post">
 
            <div class="right">
 
               <h2><a href="index.html">Lorem Ipsum Dolor Sit Amet</a></h2>
 
               <p class="post-info">Filed under <a href="index.html">templates</a>, <a href="index.html">internet</a></p>
 
               <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
               Cras id urna. Morbi tincidunt, orci ac <a href="index.html">convallis aliquam</a>, lectus turpis varius lorem, eu
               posuere nunc justo tempus leo.</p>
 
               <p>
               Donec mattis, purus nec placerat bibendum, <a href="index.html">dui pede condimentum</a>
               odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra
               condimentum, lorem tellus eleifend magna, <a href="index.html">eget fringilla velit</a> magna id neque. Curabitur vel urna.
               In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
               Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
               posuere nunc justo tempus leo.</p>
 
               <p><a class="more" href="index.html">continue reading »</a></p>
 
            </div>
 
            <div class="left">
 
               <p class="dateinfo">JAN<span>25</span></p>
 
               <div class="post-meta">
                  <h4>Post Info</h4>
                     <ul>
                        <li class="user"><a href="#">Erwin</a></li>
                        <li class="time"><a href="#">11:30 AM</a></li>
                        <li class="comment"><a href="#">7 comments</a></li>
                        <li class="permalink"><a href="#">Permalink</a></li>
                     </ul>
               </div>
 
            </div>
 
         </div>
 

              <!-- /main -->
      </div>
 
      <!-- sidebar -->
      <div id="sidebar">
 
         <div class="about-me">
 
            <h3>About Me</h3>
            <p>
            <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/gravatar.jpg" width="40" height="40" alt="firefox" class="float-left" /></a>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
            Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
            posuere nunc justo tempus leo <a href="index.html">Learn more...</a>
            </p>
 
         </div>
 
         <div class="sidemenu">
 
            <h3>Sidebar Menu</h3>
            <ul>
               <li><a href="index.html">Home</a></li>
               <li><a href="index.html#TemplateInfo">TemplateInfo</a></li>
               <li><a href="style.html">Style Demo</a></li>
               <li><a href="blog.html">Blog</a></li>
               <li><a href="archives.html">Archives</a></li>
               <li><a href="http://www.dreamtemplate.com" title="Web Templates">Web Templates</a></li>
            </ul>
 
         </div>
 
         <div class="sidemenu">
 
            <h3>Sponsors</h3>
            <ul>
               <li><a href="http://www.dreamtemplate.com" title="Website Templates">DreamTemplate <br />
                  <span>Over 6,000+ Premium Web Templates</span></a>
               </li>
               <li><a href="http://www.themelayouts.com" title="WordPress Themes">ThemeLayouts <br />
                  <span>Premium WordPress & Joomla Themes</span></a>
               </li>
               <li><a href="http://www.imhosted.com" title="Website Hosting">ImHosted.com <br />
                  <span>Affordable Web Hosting Provider</span></a>
               </li>
               <li><a href="http://www.dreamstock.com" title="Stock Photos">DreamStock <br />
                  <span>Download Amazing Stock Photos</span></a>
               </li>
               <li><a href="http://www.evrsoft.com" title="Website Builder">Evrsoft <br />
                  <span>Website Builder Software & Tools</span></a>
               </li>
               <li><a href="http://www.webhostingwp.com" title="Web Hosting">Web Hosting <br />
                  <span>Top 10 Hosting Reviews</span></a>
               </li>
            </ul>
 
         </div>
 
         <div class="popular">
 
            <h3>Most Popular</h3>
            <ul>
               <li><a href="index.html">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
                  <br /><span>Posted on December 22, 2010</span>
               </li>
               <li><a href="index.html">Cras fringilla magna. Phasellus suscipit.</a>
                  <br /><span>Posted on December 20, 2010</span>
               </li>
               <li><a href="index.html">Morbi tincidunt, orci ac convallis aliquam.</a>
                  <br /><span>Posted on December 15, 2010</span>
               </li>
               <li><a href="index.html">Ipsum dolor sit amet, consectetuer adipiscing elit.</a>
                  <br /><span>Posted on December 14, 2010</span>
               </li>
               <li><a href="index.html">Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem</a>
                  <br /><span>Posted on December 12, 2010</span>
               </li>
            </ul>
 
         </div>
 
      <!-- /sidebar -->
      </div>
 
    <!-- content -->
   </div>
 
<!-- /content-out -->
</div>
      
<!-- footer-outer -->
<div id="footer-outer" class="clear"><div id="footer-wrap">
 
   <div id="gallery" class="clear">
 
      <h3>Flickr Photos </h3>
 
      <p class="thumbs">
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
      </p>
 
    </div>
 
    <div class="col-a">
 
      <h3>Contact Info</h3>
 
      <p>
      <strong>Phone: </strong>+1234567<br/>
      <strong>Fax: </strong>+123456789
      </p>
 
      <p><strong>Address: </strong>123 Put Your Address Here</p>
        <p><strong>E-mail: </strong>me@coolblue.com</p>
      <p>Want more info - go to our <a href="#">contact page</a></p>
 
      <h3>Updates</h3>
 
      <ul class="subscribe-stuff">
         <li><a title="RSS" href="index.html" rel="nofollow">
            <img alt="RSS" title="RSS" src="http://img.webme.com/pic/s/salva-do/social_rss.png" /></a>
         </li>
         <li><a title="Facebook" href="index.html" rel="nofollow">
            <img alt="Facebook" title="Facebook" src="http://img.webme.com/pic/s/salva-do/social_facebook.png" /></a>
         </li>
         <li><a title="Twitter" href="index.html" rel="nofollow">
            <img alt="Twitter" title="Twitter" src="http://img.webme.com/pic/s/salva-do/social_twitter.png" /></a>
         </li>
         <li><a title="E-mail this story to a friend!" href="index.html" rel="nofollow">
            <img alt="E-mail this story to a friend!" title="E-mail this story to a friend!" src="http://img.webme.com/pic/s/salva-do/social_email.png" /></a>
         </li>
      </ul>
 
      <p>Stay up to date. Subscribe via
      <a href="index">RSS</a>, <a href="index">Facebook</a>,
      <a href="index">Twitter</a> or <a href="index">Email</a>
      </p>
 
   </div>
 
   <div class="col-a">
 
      <h3>Site Links</h3>
 
      <div class="footer-list">
         <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="index.html">Style Demo</a></li>
            <li><a href="index.html">Blog</a></li>
            <li><a href="index.html">Archive</a></li>
            <li><a href="index.html">About</a></li>
            <li><a href="index.html">Template Info</a></li>
            <li><a href="index.html">Site Map</a></li>
         </ul>
      </div>
 
      <h3>Friends</h3>
 
      <div class="footer-list">
         <ul>
            <li><a href="index.html">consequat molestie</a></li>
            <li><a href="index.html">sem justo</a></li>
            <li><a href="index.html">semper</a></li>
            <li><a href="index.html">magna sed purus</a></li>
            <li><a href="index.html">tincidunt</a></li>
            <li><a href="index.html">consequat molestie</a></li>
            <li><a href="index.html">magna sed purus</a></li>
         </ul>
      </div>
 
   </div>
 
   <div class="col-a">
 
      <h3>Credits</h3>
 
      <div class="footer-list">
         <ul>
            <li><a href="http://jasonlarose.com/blog/110-free-classy-social-media-icons">
                  110 Free Classy Social Media Icons by Jason LaRose
                </a>
            </li>
            <li><a href="http://wefunction.com/2009/05/free-social-icons-app-icons/">
                  Free Social Media Icons by WeFunction
                </a>
            </li>
            <li><a href="http://www.famfamfam.com/lab/icons/">
                  Free Icons by FAMFAMFAM
                </a>
            </li>
         </ul>
      </div>
 
      <h3>Recent Comments</h3>
 
      <div class="recent-comments">
         <ul>
         <li><a href="index.html" title="Comment on title">Whoa! This one is really cool...</a><br /> - <cite>Erwin</cite></li>
         <li><a href="index.html" title="Comment on title">Wow. This theme is really awesome...</a><br /> - <cite>John Doe</cite></li>
         <li><a href="index.html" title="Comment on title">Type your comment here...</a><br />- <cite>Naruto</cite></li>
         <li><a href="index.html" title="Comment on title">And don't forget this theme is free...</a><br /> - <cite>Shikamaru</cite></li>
         <li><a href="index.html" title="Comment on title">Just a simple reply test. Thanks...</a><br /> - <cite>ABCD</cite></li>
         </ul>
      </div>
 
   </div>
 
   <div class="col-b">
 
      <h3>Archives</h3>
 
      <div class="footer-list">
         <ul>
            <li><a href="index.html">January 2010</a></li>
            <li><a href="index.html">December 2009</a></li>
            <li><a href="index.html">November 2009</a></li>
            <li><a href="index.html">October 2009</a></li>
            <li><a href="index.html">September 2009</a></li>
         </ul>
      </div>
 
      <h3>Recent Bookmarks</h3>
 
      <div class="footer-list">
         <ul>
            <li><a href="index.html">5 Must Have Sans Serif Fonts for Web Designers</a></li>
            <li><a href="index.html">The Basics of CSS3</a></li>
            <li><a href="index.html">10 Simple Tips for Launching a Website</a></li>
            <li><a href="index.html">24 ways: Working With RGBA Colour</a></li>
            <li><a href="index.html">30 Blog Designs with Killer Typography</a></li>
            <li><a href="index.html">The Principles of Great Design</a></li>
         </ul>
      </div>
 
   </div>
 
<!-- /footer-outer -->
</div></div>
 
<!-- footer-bottom -->
<div id="footer-bottom">
 
   <p class="bottom-left">
      © 2010 <strong>Copyright Info</strong>     
      <a href="http://www.bluewebtemplates.com/" title="Website Templates">website templates</a> by <a href="http://www.styleshout.com/">styleshout</a>
   </p>
 
   <p class="bottom-right">
      <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> |
      <a href="http://validator.w3.org/check/referer">XHTML</a>   |
      <a href="index.html">Home</a> |
      <a href="index.html">Sitemap</a> |
      <a href="index.html">RSS Feed</a> |
      <strong><a href="#top">Back to Top</a></strong>
   </p>
 
<!-- /footer-bottom-->
</div>
 
</body>
</html>






CSS CODE SIN STYLE TAGS:
Código:
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;}

/* -----------------------------------------------------------------------------
   Template Name : CoolBlue
   Template Code : S-0031
   Version : 1.0
   Author : Erwin Aligam
   Author URI : http://www.styleshout.com/
   Last Date Modified : March 10, 2010
 -------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------
    G E N E R A L
--------------------------------------------------------------------------------- */
body {
   font: 12px/170% 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   color: #777;
   margin: 0; padding: 0;
   background: url(http://img.webme.com/pic/s/salva-do/bg.jpg);
}
/* links */
a:link, a:visited {
   text-decoration: none;
   color: #FF409F;
}
a:hover { color: #147DB6; }
a:link.more, a:visited.more {
   float: left;
   margin-top: 20px;
   margin-right: 5px;
   padding: 6px 8px;
   border: 1px solid #2177A5;
   background-color: #227bad;
    text-transform: lowercase;
   text-decoration: none;
   font-weight: bold;
   color: #fff;
}
a:hover.more {
   border: 1px solid #FF2B95;
   background-color: #FF3399;
}

/* Headers */
h1, h2, h3, h4 {
   font: bold 1em/1.5em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   color: #555;
   margin: 8px 25px;
}
h1 { font-size: 3.7em; font-weight: normal; letter-spacing: -2px; }
h2 { font-size: 2.8em; font-weight: normal; }
h3 { font-size: 2.2em; font-weight: normal; letter-spacing: -0.5px; padding-top: 15px; }
h4 { font-size: 1.5em; }

/* lists */
ul, ol {
   margin: 10px 25px;
   padding: 0 20px;
}
ul { list-style: disc; }
ol { list-style: decimal; }

dt {
  font-weight: bold;
  color: #1980AF;   
}
dd {
  padding-left: 20px;
}

p, dl { margin: 10px 25px; }

/* images */
img {
   background: #F3F4F5;
   border: 1px solid #E2E4E7;
   padding: 10px;
}
img.float-right {   margin: 5px 0px 10px 10px; }
img.float-left { margin: 5px 10px 10px 0px; }

code {
     margin: 3px 0;
     padding: 20px;
     text-align: left;
     display: block;
     overflow: auto;
     font: 500 1em/1.5em 'Lucida Console', 'Courier New', Monospace;
     /* white-space: pre; */
     border: 1px solid #F0F0F0;
   background: #F8F8F8;
   color: #555;
}
acronym {
   cursor: help;
     border-bottom: 1px dotted #777;
}
blockquote {
     margin: 10px 25px;
     padding: 10px 20px 10px 32px;
     border: 1px solid #F0F0F0;
     background: #f8f8f8 url(http://img.webme.com/pic/s/salva-do/quote.gif) no-repeat 12px 12px;
     font-weight: normal;
     font-size: 17px;
     line-height: 1.5em;
     font-style: italic;
     font-family: Georgia, 'Times New Roman', Times, Serif;
     color: #555;
}
strong { font-weight: bold; }

/* table */
table {
   border-collapse: collapse;
   margin: 10px 25px;
}
tr { background: #FFF; }
th, td {
   text-align: left;         
   border-width: 1px;
     border-style: solid;
}
th {
     padding: .8em 1em;
   background: #2C76A6;
     border-color: #308ABA #308ABA #246F97 #308ABA;
   color: #fff;
   font-weight: bold;
}
td {
   border-color: #E9E9E9;
   padding: .7em 1em;
}

/* form elements */
form {
   margin: 10px 25px 10px 25px;
   padding: 10px 25px 25px 25px;
    background: #F3F4F5;
    border: 1px solid #E2E4E7;
   width: 477px;
}
form p {
   border-bottom: 1px solid #E6E6E6;
   padding: 12px 0 5px 0;   margin: 0;   
   color: #2C76A6;
}
label {
   font-weight: bold;
   color: #666666;
}
input, select, textarea {
   margin: 5px 0;
   padding: 7px 6px;
   color: #6A6969;
   border-width: 1px;
   border-style: solid;
     border-color: #D4D4D4 #EBEBEB #EBEBEB #D4D4D4;    
   font: 11px 'Lucida Grande', Verdana, Helvetica, sans-serif;
}
input:focus, select:focus, textarea:focus {
   color: #19465D;
   background: #EEF8FB;
}
#name, #email, #message, #website {
   width: 460px;
}
input.button {
   font: bold 12px Arial, Sans-serif;
   height: 30px;
   margin: 0;
   padding: 2px 3px;
   color: #FFF;
   background: #2C76A6;
   
   border-width: 1px;
     border-style: solid;
     border-color: #86BBDF #245F86 #245F86 #86BBDF;
   cursor: pointer;
}

/* ------------------------------------------------------------------------------
    L A Y O U T
--------------------------------------------------------------------------------- */

/* header */
#header-wrap {
  float: left;
  height: 200px;
  width: 100%;
  background: url(http://img.webme.com/pic/s/salva-do/header-bg.jpg) repeat-x;
}
#header {
  position: relative;
  margin: 0 auto;
  width: 1000px;
}

#header h1#logo-text { margin: 0; padding: 0; }
#header h1#logo-text a {
   position: absolute;
   margin: 0; padding: 0 5px 0 0;
   font: bold 55px 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-Serif;
   letter-spacing: -4px;
   color: #333;
   text-decoration: none;

     /* change the values of top and left to adjust the position of the logo*/
   top: 82px; left: 25px;
}
#header p#slogan {
   position: absolute;
   margin: 0; padding:  0 5px 0 0;
   font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   font-weight: bold;
   font-size: 11px;
   line-height: 1.8em;
   font-style: normal;
   letter-spacing: -.5px;
   color: #0d6684;

   /* change the values of top and left to adjust the position */
   top: 142px; left: 30px;
}

/* RSS */
#header p#rss {
  position: absolute;
  width: 175px;
  height: 50px;
  top: 15px;  right: 17px;
  padding: 0; margin: 0;
  text-align: right;
}
#header p#rss a {
  background: transparent url(http://img.webme.com/pic/s/salva-do/rss.gif) no-repeat left center;
  color: #baa7a7;
  height: 30px;
  font: bold 12px 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
  margin: 0;
  padding: 10px 0 0 30px;
  display: block;
}
#header p#rss a:hover { color: #fff; }

/* Quick Search */
form#quick-search {
     position: absolute;
     top: 95px; right: 12px;
     background: transparent;
     border: none;
     margin: 0; padding: 0;
     width: 250px;
}
fieldset.search {
   border: none;
   width: 250px; height: 40px;
   padding: 0; margin: 0;
   background: url(http://img.webme.com/pic/s/salva-do/search.gif) no-repeat;
}
.search input {
     border: none;
     float: left;
    padding: 0; margin: 0;
}
.search button {
     border: none;
     float: right;
     padding: 0; margin: 0;
}
.search label { display: none; }
.search input.tbox {
     color: #7d8285;
     font-weight: bold;
     margin: 15px 0 10px 10px;
     background: transparent;
     width: 200px;
}
.search button.btn {
     width: 40px;
     height: 40px;
     cursor: pointer;
     text-indent: -9999px;
     background: #fbc900 url(http://img.webme.com/pic/s/salva-do/search.gif) no-repeat top right;
}

/*  navigation  */
#header #nav {
   position: absolute;
   left: 15px;   top: 25px;
   margin: 0; padding: 0;
   width: 750px;
}
#header #nav ul {
   float: left;   
   list-style: none;
   margin: 0; padding: 0;
   height: 45px;
}
#header #nav ul li {
   float: left;
   margin: 0; padding: 0;         
}
#header #nav ul li a {
   float:left;
   margin: 0;
   padding: 0 15px 29px 15px;
   color: #baa7a7;
   font: bold 12px 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
}
#header #nav ul li a:hover,
#header #nav ul li a:active {
   border: none;
   color: #fff;
}
#header #nav ul li#current a {
   background: transparent url(http://img.webme.com/pic/s/salva-do/current.jpg) no-repeat center bottom;
   color: #fff;
}

/* content */
#content-wrap {
   clear: both;
     margin: 0; padding: 0;
   background: #fff;
   width: 100%;
   float: left;
}
#content {
   width: 1000px;
   margin: 0 auto;
   padding: 0 0 20px 0;
   background: #FFF url(http://img.webme.com/pic/s/salva-do/content.gif) repeat-y center top;
   overflow: hidden;
}

/* columns */
#main {
   float: left;
   margin: 0;
   padding: 25px 0 0 0;
   width: 740px;
}
#sidebar {
   width: 245px;
   float: right;
   margin: 0;
   padding: 15px 0;
   font-size: .95em;
}

#main h2 {
   font: bold 3.2em/1em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   color: #333;
   letter-spacing: -2.0px;
   margin-bottom: 0;
   padding-bottom: 0;
}
#main h2 a { color: #333; }
#sidebar h3 {
   font: bold 1.7em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   letter-spacing: .2px;
   margin-left: 10px;
   color: #333;
}
#sidebar h3, #sidebar p {
   margin-left: 10px;
}
#sidebar img { padding: 8px; }


/* sidemenu */
.sidemenu ul {
   text-align: left;
   margin: 10px 15px 10px 8px;
   padding: 0;
   border-top: 1px solid #EFEFEF;
}
.sidemenu ul li {
   list-style: none;
   font-size: 11px;
   margin: 0;
   padding: 7px 5px;
   border-bottom: 1px solid #EFEFEF;
}
* html body .sidemenu ul li {   height: 1%; }
.sidemenu ul li a:link,
.sidemenu ul li a:visited {
   color: #33799B;
   padding-left: 0;
   font-weight: bold;
   text-transform: uppercase;
}
.sidemenu ul li a span {
   color: #959595;
   font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   font-style: normal;
   font-weight: normal;
   text-transform: none;
}
.sidemenu ul li a:hover { color: #000; }
.sidemenu ul ul { margin: 0 0 0 5px; padding: 0; }
.sidemenu ul ul li { border: none; }

/* popular */
.popular ul {
   text-align: left;
   margin: 10px 15px 10px 8px;
    padding: 0;
   border-top: 1px solid #EFEFEF;
}
.popular ul li {
   list-style: none;
   border-bottom: 1px solid #EFEFEF;
    font-size: 12px;
   line-height: 1.5em;
   padding: 8px 5px 8px 20px;
   margin: 0;
   background: url(http://img.webme.com/pic/s/salva-do/document.gif) no-repeat 3px 11px;
}
* html body .popular ul li { height: 1%; }
.popular ul li a:link,
.popular ul li a:visited {
   color: #33799B;
   padding-left: 0;
   font-weight: bold;
   text-transform: none;
}
.popular ul li span {
   color: #888;
   font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   font-style: normal;
   font-weight: normal;
   text-transform: uppercase;
   font-size: 10px;
   line-height: 1.7em;
}
.popular ul li a:hover { color: #000; }

/* footer */
#footer-outer {
   clear: both;
   text-align: left;
   width: 100%;
   font-size: .9em;
   color: #C2DBE7;
    padding-bottom: 30px;
   border-top: #1a5d8a;
}
#footer-wrap {
   width: 1000px;
   margin: 0 auto;
}
#footer-wrap a:link,
#footer-wrap a:visited { color: #fff; }
#footer-wrap a:hover { color: #99CCFF; }
#footer-wrap h3 {
   font: bold 1.7em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   letter-spacing: .2px;
   margin-bottom: 15px;
   color: #fff;
}

/* gallery */
#footer-wrap #gallery {
   padding: 0 0 10px 0;
   margin: 0;
   width: 100%;
   background: url(http://img.webme.com/pic/s/salva-do/footer-line.gif) repeat-x left bottom;

   /* border-bottom: 1px solid #326B8D;  */
}
#footer-wrap #gallery h3 {
  float: left;
  display: inline;
  width: 200px;
  margin: 30px 0 0 20px;
  padding: 0;
}
#footer-wrap #gallery p.thumbs {
  float: right;
  display: inline;
  width: 730px;
  margin: 20px 0 0 0;
  padding: 0;
}
p.thumbs img {
   position: relative;
   padding: 8px;
   margin: 10px 10px 10px 0;
   background: #FAFAFA;
   border: 1px solid #EDEDED;
}

/* footer columns */
#footer-wrap .col-a {
   width: 250px;
   float: left;
}
#footer-wrap .col-b {
   width: 245px;
   float: right;
}

/* recent comments */
.recent-comments ul {
   text-align: left;
   margin-left: 20px;
   padding: 0;
   background: url(http://img.webme.com/pic/s/salva-do/footer-line.gif) repeat-x left top;
}
.recent-comments ul li {
   list-style: none;
   font-size: 12px;
   line-height: 1.5em;
   padding: 7px 5px 7px 20px;
   background: url(http://img.webme.com/pic/s/salva-do/speech_bubble.gif) no-repeat 3px 11px;
}
* html body .recent-comments ul li { height: 1%; }
.recent-comments ul li a:link,
.recent-comments ul li a:visited { padding-left: 0; }
.recent-comments ul li cite {
   font-size: .9em;
   font-style: normal;
}

/* footer-list */
.footer-list ul {
   background: url(http://img.webme.com/pic/s/salva-do/footer-line.gif) repeat-x left top;
   list-style: none;
   padding: 0;
   margin-left: 20px;
}
.footer-list ul li { border-bottom: 1px solid #326B8D; }
.footer-list ul li a:link,
.footer-list ul li a:visited {
   display: block;
   width: 98%;
   line-height: 2em;
   padding: 5px 0 5px 5px;
   margin-left: 0;
   color: #fff;
}
.footer-list ul li a:hover { color: #99CCFF; }

/* subscribe stuff */
ul.subscribe-stuff {
  list-style: none;
  margin: 0 0 0 20px; padding: 0;
}
ul.subscribe-stuff li {
  float: left;
  margin: 0 3px 0 0; padding: 0;
}
ul.subscribe-stuff li img {
  padding: 0; margin: 0;
  border: none;
  background: none;
}

/* footer-bottom */
#footer-bottom {
   clear: both;
   width: 1000px;
   font-size: .9em;
   margin: 0 auto;
   padding-top: 10px;
   font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
   font-size: .9em;
   color: #C2DBE7;
   overflow: hidden;
   background: url(http://img.webme.com/pic/s/salva-do/footer-line.gif) repeat-x left top;
}
#footer-bottom a { color: #fff; }
#footer-bottom a:hover { color: #99CCFF; }

#footer-bottom p.bottom-left {
   float: left;
   display: inline;
   margin: 0 0 30px 20px;
   padding: 0;
   width: 600px;
   text-align: left;
}
#footer-bottom p.bottom-right {
   float: right;
   display: inline;
   margin: 0 30px 30px 0;
   padding: 0;
   width: 320px;
   text-align: right;
}

/* ------------------------------------------------------------------------------
      B L O G   P O S T
--------------------------------------------------------------------------------- */
.post {
   margin: 5px 0 20px 0;
   padding: 0 0 20px 0;
   width: 740px;
   overflow: hidden;
   border-bottom: 1px solid #eee;
}
.right {
   width: 560px;
   float: right;
   display: inline;
   padding-right: 15px;
}
.left {
    position: relative;
    width: 150px;
    float: right;
    display: inline;
}
.right .image-section {
   clear: both;
   display: block;
   margin: 25px 0 10px 20px;
   padding: 0;
}
.right .image-section img {
   background: #F3F4F5;
   border: 1px solid #E2E3E7;
   padding: 12px;
}
.right h2 { margin-top: 0; }

/* share */
.right .share-box {
   margin: 20px 12px 0 20px;
   padding: 0 10px 10px 20px;
   background: #FAFAFA;
   border: 1px solid #EAECEE;
   overflow: hidden;
   width: 494px;
}
.right .share-box h4 {
 margin-left: 0;
}
.right .share-box ul {
  list-style: none;
  margin: 0; padding: 0;
}
.right .share-box ul li {
  float: left;
  margin-right: 5px;
}
.right .share-box ul li a:hover { cursor: pointer; }
.right .share-box ul li img {
  margin: 0;
  padding: 5px;
  background: #fff;
}

/* dateinfo */
.left p.dateinfo {
  background: url(http://img.webme.com/pic/s/salva-do/date-bg.gif) no-repeat;
  height: 83px;
  width: 68px;
  margin: 12px 0 0 70px;
  padding: 8px 0 0 1px;
  font: bold 15px Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  color: #fff;
}
.left p.dateinfo span {
  font: bold 30px Arial, Helvetica, sans-serif;
  display: block;
  color: #555;
  margin: 8px 0 0 0;
  padding: 0;
  letter-spacing: 0;
}

/* post meta */
.left .post-meta {
    width: 140px;
    font-size: .9em;
    margin: 5px 0 20px 0;
    padding: 0;
}
.left .post-meta h4 {
   text-align: right;
   margin: 0 5px 10px 5px;
   padding: 0;
   color: #555;
}
.left .post-meta ul {
   list-style: none;
   margin: 0; padding: 0;
   border-top: 1px solid #F1F1F1;
}
.left .post-meta ul li {
   list-style: none;
   border-bottom: 1px solid #F1F1F1;
   padding: 3px 5px;
   margin: 0;
   text-align: right;
   color: #147DB6;
}
* html body .left .post-meta ul li { height: 1%; }

.left .post-meta ul.tags li { background: url(http://img.webme.com/pic/s/salva-do/tag.gif) no-repeat 2px center; }
.left .post-meta ul li.user { background: url(http://img.webme.com/pic/s/salva-do/user.gif) no-repeat 2px center; }
.left .post-meta ul li.time { background: url(http://img.webme.com/pic/s/salva-do/clock.gif) no-repeat 2px center; }
.left .post-meta ul li.comment { background: url(http://img.webme.com/pic/s/salva-do/comment.gif) no-repeat 2px center; }
.left .post-meta ul li.permalink { background: url(http://img.webme.com/pic/s/salva-do/permalink.gif) no-repeat 2px center; }

.left .post-meta ul li a { color: #147DB6; }
.left .post-meta ul li a:hover { color: #333; }

/* post bottom */
.post-bottom-section {
   position: relative;
   margin: 10px 0 20px 0;
   padding: 0 0 20px 0;
   width: 740px;
   overflow: hidden;
   border-bottom: 1px solid #eeeeee;
}
.post-bottom-section h4 {
   position: absolute;
   left: 0px; top: 5px;
   text-align: right;
   width: 135px;
}
.post-bottom-section .right form {
   position: relative;
   top: 15px; left: 20px;
   margin: 0 0 20px 0 ;
}

/* post info */
.post-info { margin-top: 3px; }
.post .post-info a:link,
.post .post-info a:visited {
     color: #1372a8;
     border: none;
     font-size: .9em;
}

/* comments list */
ol.commentlist {
   margin: 12px 12px 12px 20px;
   padding: 0;
   background: #FAFAFA;
   border-top: 1px solid #EAECEE;
}
.commentlist li {
   list-style: none;
   margin: 0;
   padding: 12px 0 0 0;
   border: 1px solid #EAECEE;
   border-width: 0 1px 1px 1px;
   overflow: hidden;
}
.commentlist li a:link,
.commentlist li a:visited {
  color: #227bad;
}
.commentlist li .comment-info {
   width: 99%;
   margin: 0; padding: 0;
   overflow: hidden;
}
.commentlist li .comment-info img {
   float: right;
   margin: 3px 13px 0 0;
   background: #fff;
   border: 1px solid #E8EAEC;
   display: inline;
}
.commentlist li .comment-info cite {
   display: block;
   margin: 0; padding: 5px 65px 5px 20px;
   font-style: normal;
   font-weight: bold;
}
.commentlist li .comment-info cite .comment-data {
   font-size: .8em;
   font-weight: normal;
}
.commentlist li .comment-text {
   clear: both;
   margin: 0; padding: 0 20px 25px 20px;
}
.commentlist li .comment-text p {
   margin:  5px 0 20px 0;
   padding: 0;
}
.commentlist li .comment-text .reply a {
   padding: 5px;
   border: 1px solid #2177A5;
   background-color: #227bad;
   font-weight: bold;
   font-size: 11px;
   color: #fff;
}
.commentlist li ul.children { margin:0; padding: 0; }
.commentlist li ul.children li.depth-2,
.commentlist li ul.children li.depth-3 {
   margin-left: 40px;
   border-style: solid;
   border-color: #E1E6E8;
   border-width: 1px 0 0 1px;
}
.commentlist li.thread-alt {
   background: #F3F4F5;
   border-color: #E2E4E7;
}

/* ------------------------------------------------------------------------------
    A R C H I V E S
--------------------------------------------------------------------------------- */
ul.archive {
   margin: 10px 30px 10px 20px;
   padding: 0;
   border-top: 1px solid #eeeeee;
}
ul.archive li {
   margin: 0;
   padding: 12px 5px;
   border-bottom: 1px solid #eeeeee;
   list-style: none;
}
ul.archive li .post-title {
   margin: 0;   padding: 0;
   font-size: 1.2em;
   font-weight: bold;
}
ul.archive li .post-title a:link,
ul.archive li .post-title a:visited {
   color: #444;
}
ul.archive li .post-title a:hover {
   border: none;
   color: #000;
}
ul.archive li .post-details {
   margin-left: 0;
   margin-top: 0;
   font-size: .9em;
}
ul.archive li .post-details a:link,
ul.archive li .post-details a:visited {
   color: #1372a8;
}

/* pagenavigation */
.navigation {
   margin: 10px 20px; padding: 0;
   width: 560px;
}
.navigation a:link,
.navigation a:visited {
   float: left;
   display: block;
   margin: 10px 10px 0 0;
   padding: 5px 7px;
   text-transform: lowercase;
   text-decoration: none;
   font-weight: bold;
   color: #fff;
   background: #2C76A6;
   border-width: 1px;
     border-style: solid;
     border-color: #86BBDF #245F86 #245F86 #86BBDF;
}
.navigation a:hover {
   background: #FF3399;
   border-width: 1px;
     border-style: solid;
   border-color: #FF75BA #EA0075 #EA0075 #FF75BA;
}

/* ------------------------------------------------------------------------------
      M I S C
--------------------------------------------------------------------------------- */

/* alignment classes & additional classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }
.no-border { border: none; }
.no-bg {   background: none; }

/* clearing */
.fix {
   clear: both;
   height: 1px;
   margin: -1px 0 0;
   overflow: hidden;
}
.clear {   display:inline-block; }
.clear:after {
   display:block;
   visibility:hidden;
   clear:both;
   height:0;
   content: " ";
} 
[/quote]


Ultima edición por salva-do el Sab Dic 11, 2010 9:15 am; editado 1 vez
↑
Mensaje10-12-2010, 18:49 (UTC)    
Título del mensaje:
Responder citando
mira yo no se mucho de css., pero adapte + o - tu plantilla espero q t guste y te sirba.

Por encima
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
 
<title>CoolBlue</title>
 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="Erwin Aligam - styleshout.com" />
<meta name="description" content="Site Description Here" />
<meta name="keywords" content="keywords, here" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />
 
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
 
</head>
 
<body>
 
<!--header -->
<div id="header-wrap"><div id="header">
 
   <a name="top"></a>
 
   <h1 id="logo-text"><a href="index.html" title="">Salva-Do</a></h1>
   <p id="slogan">Lo mejor esta aquí </p>
 
   <div  id="nav">
      <ul>
         <li id="current"><a href="index.html">Inicio</a></li>
         <li><a href="style.html">Concursos</a></li>
         <li><a href="blog.html">Foro No Disponible</a></li>
         <li><a href="archives.html">PSP</a></li>
         <li><a href="index.html">PC</a></li>
         <li><a href="index.html">Wii Muy Pronto</a></li>
      </ul>
   </div>
 
   <p id="rss">
      <a href="index.html"></a>
   </p>
 
   <form id="quick-search" method="get" action="index.html">
      <fieldset class="search">
         <label for="qsearch">Search:</label>
         <input class="tbox" id="qsearch" type="text" name="qsearch" value="Buscar" title="Start typing and hit ENTER" />
         <button class="btn" title="Submit Search">Search</button>
      </fieldset>
   </form>
 
<!--/header-->
</div></div>
   
<!-- content-outer -->

 
 
      <!-- sidebar -->
      <div id="sidebar">
 
         <div class="about-me">
 
 
         </div>
 
         <div class="sidemenu">
 
            <h3>Sidebar Menu</h3>
            <ul>
               <li><a href="index.html">Home</a></li>
               <li><a href="index.html#TemplateInfo">TemplateInfo</a></li>
               <li><a href="style.html">Style Demo</a></li>
               <li><a href="blog.html">Blog</a></li>
               <li><a href="archives.html">Archives</a></li>
               <li><a href="http://www.dreamtemplate.com" title="Web Templates">Web Templates</a></li>
            </ul>
 
         </div>
 
         <div class="sidemenu">
 
            <h3>Sponsors</h3>
            <ul>
               <li><a href="http://www.dreamtemplate.com" title="Website Templates">DreamTemplate <br />
                  <span>Over 6,000+ Premium Web Templates</span></a>
               </li>
               <li><a href="http://www.themelayouts.com" title="WordPress Themes">ThemeLayouts <br />
                  <span>Premium WordPress & Joomla Themes</span></a>
               </li>
               <li><a href="http://www.imhosted.com" title="Website Hosting">ImHosted.com <br />
                  <span>Affordable Web Hosting Provider</span></a>
               </li>
               <li><a href="http://www.dreamstock.com" title="Stock Photos">DreamStock <br />
                  <span>Download Amazing Stock Photos</span></a>
               </li>
               <li><a href="http://www.evrsoft.com" title="Website Builder">Evrsoft <br />
                  <span>Website Builder Software & Tools</span></a>
               </li>
               <li><a href="http://www.webhostingwp.com" title="Web Hosting">Web Hosting <br />
                  <span>Top 10 Hosting Reviews</span></a>
               </li>
            </ul>
 
         </div>
 
         <div class="popular">
 
            <h3>Most Popular</h3>
            <ul>
               <li><a href="index.html">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
                  <br /><span>Posted on December 22, 2010</span>
               </li>
               <li><a href="index.html">Cras fringilla magna. Phasellus suscipit.</a>
                  <br /><span>Posted on December 20, 2010</span>
               </li>
               <li><a href="index.html">Morbi tincidunt, orci ac convallis aliquam.</a>
                  <br /><span>Posted on December 15, 2010</span>
               </li>
               <li><a href="index.html">Ipsum dolor sit amet, consectetuer adipiscing elit.</a>
                  <br /><span>Posted on December 14, 2010</span>
               </li>
               <li><a href="index.html">Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem</a>
                  <br /><span>Posted on December 12, 2010</span>
               </li>
            </ul>
 
         </div>
 
      <!-- /sidebar -->
      </div>


por debajo
Código:
    <!-- content -->
   </div>
 
<!-- /content-out -->
</div>
     
<!-- footer-outer -->
<div id="footer-outer" class="clear"><div id="footer-wrap">
 
   <div id="gallery" class="clear">
 
      <h3>Flickr Photos </h3>
 
      <p class="thumbs">
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
      </p>
 
    </div>
 
    <div class="col-a">
 
      <h3>Contact Info</h3>
 
      <p>
      <strong>Phone: </strong>+1234567<br/>
      <strong>Fax: </strong>+123456789
      </p>
 
      <p><strong>Address: </strong>123 Put Your Address Here</p>
        <p><strong>E-mail: </strong>me@coolblue.com</p>
      <p>Want more info - go to our <a href="#">contact page</a></p>
 
      <h3>Updates</h3>
 
      <ul class="subscribe-stuff">
         <li><a title="RSS" href="index.html" rel="nofollow">
            <img alt="RSS" title="RSS" src="http://img.webme.com/pic/s/salva-do/social_rss.png" /></a>
         </li>
         <li><a title="Facebook" href="index.html" rel="nofollow">
            <img alt="Facebook" title="Facebook" src="http://img.webme.com/pic/s/salva-do/social_facebook.png" /></a>
         </li>
         <li><a title="Twitter" href="index.html" rel="nofollow">
            <img alt="Twitter" title="Twitter" src="http://img.webme.com/pic/s/salva-do/social_twitter.png" /></a>
         </li>
         <li><a title="E-mail this story to a friend!" href="index.html" rel="nofollow">
            <img alt="E-mail this story to a friend!" title="E-mail this story to a friend!" src="http://img.webme.com/pic/s/salva-do/social_email.png" /></a>
         </li>
      </ul>
 
      <p>Stay up to date. Subscribe via
      <a href="index">RSS</a>, <a href="index">Facebook</a>,
      <a href="index">Twitter</a> or <a href="index">Email</a>
      </p>
 
   </div>
 
   <div class="col-a">
 
      <h3>Site Links</h3>
 
      <div class="footer-list">
         <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="index.html">Style Demo</a></li>
            <li><a href="index.html">Blog</a></li>
            <li><a href="index.html">Archive</a></li>
            <li><a href="index.html">About</a></li>
            <li><a href="index.html">Template Info</a></li>
            <li><a href="index.html">Site Map</a></li>
         </ul>
      </div>
 
      <h3>Friends</h3>
 
      <div class="footer-list">
         <ul>
            <li><a href="index.html">consequat molestie</a></li>
            <li><a href="index.html">sem justo</a></li>
            <li><a href="index.html">semper</a></li>
            <li><a href="index.html">magna sed purus</a></li>
            <li><a href="index.html">tincidunt</a></li>
            <li><a href="index.html">consequat molestie</a></li>
            <li><a href="index.html">magna sed purus</a></li>
         </ul>
      </div>
 
   </div>
 
   <div class="col-a">
 
      <h3>Credits</h3>
 
      <div class="footer-list">
         <ul>
            <li><a href="http://jasonlarose.com/blog/110-free-classy-social-media-icons">
                  110 Free Classy Social Media Icons by Jason LaRose
                </a>
            </li>
            <li><a href="http://wefunction.com/2009/05/free-social-icons-app-icons/">
                  Free Social Media Icons by WeFunction
                </a>
            </li>
            <li><a href="http://www.famfamfam.com/lab/icons/">
                  Free Icons by FAMFAMFAM
                </a>
            </li>
         </ul>
      </div>
 
      <h3>Recent Comments</h3>
 
      <div class="recent-comments">
         <ul>
         <li><a href="index.html" title="Comment on title">Whoa! This one is really cool...</a><br /> - <cite>Erwin</cite></li>
         <li><a href="index.html" title="Comment on title">Wow. This theme is really awesome...</a><br /> - <cite>John Doe</cite></li>
         <li><a href="index.html" title="Comment on title">Type your comment here...</a><br />- <cite>Naruto</cite></li>
         <li><a href="index.html" title="Comment on title">And don't forget this theme is free...</a><br /> - <cite>Shikamaru</cite></li>
         <li><a href="index.html" title="Comment on title">Just a simple reply test. Thanks...</a><br /> - <cite>ABCD</cite></li>
         </ul>
      </div>
 
   </div>
 
   <div class="col-b">
 
      <h3>Archives</h3>
 
      <div class="footer-list">
         <ul>
            <li><a href="index.html">January 2010</a></li>
            <li><a href="index.html">December 2009</a></li>
            <li><a href="index.html">November 2009</a></li>
            <li><a href="index.html">October 2009</a></li>
            <li><a href="index.html">September 2009</a></li>
         </ul>
      </div>
 
      <h3>Recent Bookmarks</h3>
 
      <div class="footer-list">
         <ul>
            <li><a href="index.html">5 Must Have Sans Serif Fonts for Web Designers</a></li>
            <li><a href="index.html">The Basics of CSS3</a></li>
            <li><a href="index.html">10 Simple Tips for Launching a Website</a></li>
            <li><a href="index.html">24 ways: Working With RGBA Colour</a></li>
            <li><a href="index.html">30 Blog Designs with Killer Typography</a></li>
            <li><a href="index.html">The Principles of Great Design</a></li>
         </ul>
      </div>
 
   </div>
 
<!-- /footer-outer -->
</div></div>
 
<!-- footer-bottom -->
<div id="footer-bottom">
 
   <p class="bottom-left">
      © 2010 <strong>Copyright Info</strong>     
      <a href="http://www.bluewebtemplates.com/" title="Website Templates">website templates</a> by <a href="http://www.styleshout.com/">styleshout</a>
   </p>
 
   <p class="bottom-right">
      <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> |
      <a href="http://validator.w3.org/check/referer">XHTML</a>   |
      <a href="index.html">Home</a> |
      <a href="index.html">Sitemap</a> |
      <a href="index.html">RSS Feed</a> |
      <strong><a href="#top">Back to Top</a></strong>
   </p>
 
<!-- /footer-bottom-->
</div>
 
</body>
</html>


css code
Código:
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;}

/* -----------------------------------------------------------------------------
   Template Name : CoolBlue
   Template Code : S-0031
   Version : 1.0
   Author : Erwin Aligam
   Author URI : http://www.styleshout.com/
   Last Date Modified : March 10, 2010
 -------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------
    G E N E R A L
--------------------------------------------------------------------------------- */
body {
   font: 12px/170% 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   color: #777;
   margin: 0; padding: 0;
   background: url(http://img.webme.com/pic/s/salva-do/bg.jpg);
}
/* links */
a:link, a:visited {
   text-decoration: none;
   color: #FF409F;
}
a:hover { color: #147DB6; }
a:link.more, a:visited.more {
   float: left;
   margin-top: 20px;
   margin-right: 5px;
   padding: 6px 8px;
   border: 1px solid #2177A5;
   background-color: #227bad;
    text-transform: lowercase;
   text-decoration: none;
   font-weight: bold;
   color: #fff;
}
a:hover.more {
   border: 1px solid #FF2B95;
   background-color: #FF3399;
}

/* Headers */
h1, h2, h3, h4 {
   font: bold 1em/1.5em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   color: #555;
   margin: 8px 25px;
}
h1 { font-size: 3.7em; font-weight: normal; letter-spacing: -2px; }
h2 { font-size: 2.8em; font-weight: normal; }
h3 { font-size: 2.2em; font-weight: normal; letter-spacing: -0.5px; padding-top: 15px; }
h4 { font-size: 1.5em; }

/* lists */
ul, ol {
   margin: 10px 25px;
   padding: 0 20px;
}
ul { list-style: disc; }
ol { list-style: decimal; }

dt {
  font-weight: bold;
  color: #1980AF;   
}
dd {
  padding-left: 20px;
}

p, dl { margin: 10px 25px; }

/* images */
img {
   background: #F3F4F5;
   border: 1px solid #E2E4E7;
   padding: 10px;
}
img.float-right {   margin: 5px 0px 10px 10px; }
img.float-left { margin: 5px 10px 10px 0px; }

code {
     margin: 3px 0;
     padding: 20px;
     text-align: left;
     display: block;
     overflow: auto;
     font: 500 1em/1.5em 'Lucida Console', 'Courier New', Monospace;
     /* white-space: pre; */
     border: 1px solid #F0F0F0;
   background: #F8F8F8;
   color: #555;
}
acronym {
   cursor: help;
     border-bottom: 1px dotted #777;
}
blockquote {
     margin: 10px 25px;
     padding: 10px 20px 10px 32px;
     border: 1px solid #F0F0F0;
     background: #f8f8f8 url(http://img.webme.com/pic/s/salva-do/quote.gif) no-repeat 12px 12px;
     font-weight: normal;
     font-size: 17px;
     line-height: 1.5em;
     font-style: italic;
     font-family: Georgia, 'Times New Roman', Times, Serif;
     color: #555;
}
strong { font-weight: bold; }

/* table */
table {
   border-collapse: collapse;
   margin: 10px 25px;
}
tr { background: #FFF; }
th, td {
   text-align: left;         
   border-width: 1px;
     border-style: solid;
}
th {
     padding: .8em 1em;
   background: #2C76A6;
     border-color: #308ABA #308ABA #246F97 #308ABA;
   color: #fff;
   font-weight: bold;
}
td {
   border-color: #E9E9E9;
   padding: .7em 1em;
}

/* form elements */
form {
   margin: 10px 25px 10px 25px;
   padding: 10px 25px 25px 25px;
    background: #F3F4F5;
    border: 1px solid #E2E4E7;
   width: 477px;
}
form p {
   border-bottom: 1px solid #E6E6E6;
   padding: 12px 0 5px 0;   margin: 0;   
   color: #2C76A6;
}
label {
   font-weight: bold;
   color: #666666;
}
input, select, textarea {
   margin: 5px 0;
   padding: 7px 6px;
   color: #6A6969;
   border-width: 1px;
   border-style: solid;
     border-color: #D4D4D4 #EBEBEB #EBEBEB #D4D4D4;   
   font: 11px 'Lucida Grande', Verdana, Helvetica, sans-serif;
}
input:focus, select:focus, textarea:focus {
   color: #19465D;
   background: #EEF8FB;
}
#name, #email, #message, #website {
   width: 460px;
}
input.button {
   font: bold 12px Arial, Sans-serif;
   height: 30px;
   margin: 0;
   padding: 2px 3px;
   color: #FFF;
   background: #2C76A6;
   
   border-width: 1px;
     border-style: solid;
     border-color: #86BBDF #245F86 #245F86 #86BBDF;
   cursor: pointer;
}

/* ------------------------------------------------------------------------------
    L A Y O U T
--------------------------------------------------------------------------------- */

/* header */
#header-wrap {
  float: left;
  height: 200px;
  width: 100%;
  background: url(http://img.webme.com/pic/s/salva-do/header-bg.jpg) repeat-x;
}
#header {
  position: relative;
  margin: 0 auto;
  width: 1000px;
}

#header h1#logo-text { margin: 0; padding: 0; }
#header h1#logo-text a {
   position: absolute;
   margin: 0; padding: 0 5px 0 0;
   font: bold 55px 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-Serif;
   letter-spacing: -4px;
   color: #333;
   text-decoration: none;

     /* change the values of top and left to adjust the position of the logo*/
   top: 82px; left: 25px;
}
#header p#slogan {
   position: absolute;
   margin: 0; padding:  0 5px 0 0;
   font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   font-weight: bold;
   font-size: 11px;
   line-height: 1.8em;
   font-style: normal;
   letter-spacing: -.5px;
   color: #0d6684;

   /* change the values of top and left to adjust the position */
   top: 142px; left: 30px;
}

/* RSS */
#header p#rss {
  position: absolute;
  width: 175px;
  height: 50px;
  top: 15px;  right: 17px;
  padding: 0; margin: 0;
  text-align: right;
}
#header p#rss a {
  background: transparent url(http://img.webme.com/pic/s/salva-do/rss.gif) no-repeat left center;
  color: #baa7a7;
  height: 30px;
  font: bold 12px 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
  margin: 0;
  padding: 10px 0 0 30px;
  display: block;
}
#header p#rss a:hover { color: #fff; }

/* Quick Search */
form#quick-search {
     position: absolute;
     top: 95px; right: 12px;
     background: transparent;
     border: none;
     margin: 0; padding: 0;
     width: 250px;
}
fieldset.search {
   border: none;
   width: 250px; height: 40px;
   padding: 0; margin: 0;
   background: url(http://img.webme.com/pic/s/salva-do/search.gif) no-repeat;
}
.search input {
     border: none;
     float: left;
    padding: 0; margin: 0;
}
.search button {
     border: none;
     float: right;
     padding: 0; margin: 0;
}
.search label { display: none; }
.search input.tbox {
     color: #7d8285;
     font-weight: bold;
     margin: 15px 0 10px 10px;
     background: transparent;
     width: 200px;
}
.search button.btn {
     width: 40px;
     height: 40px;
     cursor: pointer;
     text-indent: -9999px;
     background: #fbc900 url(http://img.webme.com/pic/s/salva-do/search.gif) no-repeat top right;
}

/*  navigation  */
#header #nav {
   position: absolute;
   left: 15px;   top: 25px;
   margin: 0; padding: 0;
   width: 750px;
}
#header #nav ul {
   float: left;   
   list-style: none;
   margin: 0; padding: 0;
   height: 45px;
}
#header #nav ul li {
   float: left;
   margin: 0; padding: 0;         
}
#header #nav ul li a {
   float:left;
   margin: 0;
   padding: 0 15px 29px 15px;
   color: #baa7a7;
   font: bold 12px 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
}
#header #nav ul li a:hover,
#header #nav ul li a:active {
   border: none;
   color: #fff;
}
#header #nav ul li#current a {
   background: transparent url(http://img.webme.com/pic/s/salva-do/current.jpg) no-repeat center bottom;
   color: #fff;
}

/* content */
#content-wrap {
   clear: both;
     margin: 0; padding: 0;
   background: #fff;
   width: 100%;
   float: left;
}
#content {
   width: 1000px;
   margin: 0 auto;
   padding: 0 0 20px 0;
   background: #FFF url(http://img.webme.com/pic/s/salva-do/content.gif) repeat-y center top;
   overflow: hidden;
}

/* columns */
#main {
   float: left;
   margin: 0;
   padding: 25px 0 0 0;
   width: 740px;
}
#sidebar {
   width: 245px;
   float: right;
   margin: 0;
   padding: 15px 0;
   font-size: .95em;
}

#main h2 {
   font: bold 3.2em/1em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   color: #333;
   letter-spacing: -2.0px;
   margin-bottom: 0;
   padding-bottom: 0;
}
#main h2 a { color: #333; }
#sidebar h3 {
   font: bold 1.7em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   letter-spacing: .2px;
   margin-left: 10px;
   color: #333;
}
#sidebar h3, #sidebar p {
   margin-left: 10px;
}
#sidebar img { padding: 8px; }


/* sidemenu */
.sidemenu ul {
   text-align: left;
   margin: 10px 15px 10px 8px;
   padding: 0;
   border-top: 1px solid #EFEFEF;
}
.sidemenu ul li {
   list-style: none;
   font-size: 11px;
   margin: 0;
   padding: 7px 5px;
   border-bottom: 1px solid #EFEFEF;
}
* html body .sidemenu ul li {   height: 1%; }
.sidemenu ul li a:link,
.sidemenu ul li a:visited {
   color: #33799B;
   padding-left: 0;
   font-weight: bold;
   text-transform: uppercase;
}
.sidemenu ul li a span {
   color: #959595;
   font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   font-style: normal;
   font-weight: normal;
   text-transform: none;
}
.sidemenu ul li a:hover { color: #000; }
.sidemenu ul ul { margin: 0 0 0 5px; padding: 0; }
.sidemenu ul ul li { border: none; }

/* popular */
.popular ul {
   text-align: left;
   margin: 10px 15px 10px 8px;
    padding: 0;
   border-top: 1px solid #EFEFEF;
}
.popular ul li {
   list-style: none;
   border-bottom: 1px solid #EFEFEF;
    font-size: 12px;
   line-height: 1.5em;
   padding: 8px 5px 8px 20px;
   margin: 0;
   background: url(http://img.webme.com/pic/s/salva-do/document.gif) no-repeat 3px 11px;
}
* html body .popular ul li { height: 1%; }
.popular ul li a:link,
.popular ul li a:visited {
   color: #33799B;
   padding-left: 0;
   font-weight: bold;
   text-transform: none;
}
.popular ul li span {
   color: #888;
   font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   font-style: normal;
   font-weight: normal;
   text-transform: uppercase;
   font-size: 10px;
   line-height: 1.7em;
}
.popular ul li a:hover { color: #000; }

/* footer */
#footer-outer {
   clear: both;
   text-align: left;
   width: 100%;
   font-size: .9em;
   color: #C2DBE7;
    padding-bottom: 30px;
   border-top: #1a5d8a;
}
#footer-wrap {
   width: 1000px;
   margin: 0 auto;
}
#footer-wrap a:link,
#footer-wrap a:visited { color: #fff; }
#footer-wrap a:hover { color: #99CCFF; }
#footer-wrap h3 {
   font: bold 1.7em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   letter-spacing: .2px;
   margin-bottom: 15px;
   color: #fff;
}

/* gallery */
#footer-wrap #gallery {
   padding: 0 0 10px 0;
   margin: 0;
   width: 100%;
   background: url(http://img.webme.com/pic/s/salva-do/footer-line.gif) repeat-x left bottom;

   /* border-bottom: 1px solid #326B8D;  */
}
#footer-wrap #gallery h3 {
  float: left;
  display: inline;
  width: 200px;
  margin: 30px 0 0 20px;
  padding: 0;
}
#footer-wrap #gallery p.thumbs {
  float: right;
  display: inline;
  width: 730px;
  margin: 20px 0 0 0;
  padding: 0;
}
p.thumbs img {
   position: relative;
   padding: 8px;
   margin: 10px 10px 10px 0;
   background: #FAFAFA;
   border: 1px solid #EDEDED;
}

/* footer columns */
#footer-wrap .col-a {
   width: 250px;
   float: left;
}
#footer-wrap .col-b {
   width: 245px;
   float: right;
}

/* recent comments */
.recent-comments ul {
   text-align: left;
   margin-left: 20px;
   padding: 0;
   background: url(http://img.webme.com/pic/s/salva-do/footer-line.gif) repeat-x left top;
}
.recent-comments ul li {
   list-style: none;
   font-size: 12px;
   line-height: 1.5em;
   padding: 7px 5px 7px 20px;
   background: url(http://img.webme.com/pic/s/salva-do/speech_bubble.gif) no-repeat 3px 11px;
}
* html body .recent-comments ul li { height: 1%; }
.recent-comments ul li a:link,
.recent-comments ul li a:visited { padding-left: 0; }
.recent-comments ul li cite {
   font-size: .9em;
   font-style: normal;
}

/* footer-list */
.footer-list ul {
   background: url(http://img.webme.com/pic/s/salva-do/footer-line.gif) repeat-x left top;
   list-style: none;
   padding: 0;
   margin-left: 20px;
}
.footer-list ul li { border-bottom: 1px solid #326B8D; }
.footer-list ul li a:link,
.footer-list ul li a:visited {
   display: block;
   width: 98%;
   line-height: 2em;
   padding: 5px 0 5px 5px;
   margin-left: 0;
   color: #fff;
}
.footer-list ul li a:hover { color: #99CCFF; }

/* subscribe stuff */
ul.subscribe-stuff {
  list-style: none;
  margin: 0 0 0 20px; padding: 0;
}
ul.subscribe-stuff li {
  float: left;
  margin: 0 3px 0 0; padding: 0;
}
ul.subscribe-stuff li img {
  padding: 0; margin: 0;
  border: none;
  background: none;
}

/* footer-bottom */
#footer-bottom {
   clear: both;
   width: 1000px;
   font-size: .9em;
   margin: 0 auto;
   padding-top: 10px;
   font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
   font-size: .9em;
   color: #C2DBE7;
   overflow: hidden;
   background: url(http://img.webme.com/pic/s/salva-do/footer-line.gif) repeat-x left top;
}
#footer-bottom a { color: #fff; }
#footer-bottom a:hover { color: #99CCFF; }

#footer-bottom p.bottom-left {
   float: left;
   display: inline;
   margin: 0 0 30px 20px;
   padding: 0;
   width: 600px;
   text-align: left;
}
#footer-bottom p.bottom-right {
   float: right;
   display: inline;
   margin: 0 30px 30px 0;
   padding: 0;
   width: 320px;
   text-align: right;
}

/* ------------------------------------------------------------------------------
      B L O G   P O S T
--------------------------------------------------------------------------------- */
.post {
   margin: 5px 0 20px 0;
   padding: 0 0 20px 0;
   width: 740px;
   overflow: hidden;
   border-bottom: 1px solid #eee;
}
.right {
   width: 560px;
   float: right;
   display: inline;
   padding-right: 15px;
}
.left {
    position: relative;
    width: 150px;
    float: right;
    display: inline;
}
.right .image-section {
   clear: both;
   display: block;
   margin: 25px 0 10px 20px;
   padding: 0;
}
.right .image-section img {
   background: #F3F4F5;
   border: 1px solid #E2E3E7;
   padding: 12px;
}
.right h2 { margin-top: 0; }

/* share */
.right .share-box {
   margin: 20px 12px 0 20px;
   padding: 0 10px 10px 20px;
   background: #FAFAFA;
   border: 1px solid #EAECEE;
   overflow: hidden;
   width: 494px;
}
.right .share-box h4 {
 margin-left: 0;
}
.right .share-box ul {
  list-style: none;
  margin: 0; padding: 0;
}
.right .share-box ul li {
  float: left;
  margin-right: 5px;
}
.right .share-box ul li a:hover { cursor: pointer; }
.right .share-box ul li img {
  margin: 0;
  padding: 5px;
  background: #fff;
}

/* dateinfo */
.left p.dateinfo {
  background: url(http://img.webme.com/pic/s/salva-do/date-bg.gif) no-repeat;
  height: 83px;
  width: 68px;
  margin: 12px 0 0 70px;
  padding: 8px 0 0 1px;
  font: bold 15px Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  color: #fff;
}
.left p.dateinfo span {
  font: bold 30px Arial, Helvetica, sans-serif;
  display: block;
  color: #555;
  margin: 8px 0 0 0;
  padding: 0;
  letter-spacing: 0;
}

/* post meta */
.left .post-meta {
    width: 140px;
    font-size: .9em;
    margin: 5px 0 20px 0;
    padding: 0;
}
.left .post-meta h4 {
   text-align: right;
   margin: 0 5px 10px 5px;
   padding: 0;
   color: #555;
}
.left .post-meta ul {
   list-style: none;
   margin: 0; padding: 0;
   border-top: 1px solid #F1F1F1;
}
.left .post-meta ul li {
   list-style: none;
   border-bottom: 1px solid #F1F1F1;
   padding: 3px 5px;
   margin: 0;
   text-align: right;
   color: #147DB6;
}
* html body .left .post-meta ul li { height: 1%; }

.left .post-meta ul.tags li { background: url(http://img.webme.com/pic/s/salva-do/tag.gif) no-repeat 2px center; }
.left .post-meta ul li.user { background: url(http://img.webme.com/pic/s/salva-do/user.gif) no-repeat 2px center; }
.left .post-meta ul li.time { background: url(http://img.webme.com/pic/s/salva-do/clock.gif) no-repeat 2px center; }
.left .post-meta ul li.comment { background: url(http://img.webme.com/pic/s/salva-do/comment.gif) no-repeat 2px center; }
.left .post-meta ul li.permalink { background: url(http://img.webme.com/pic/s/salva-do/permalink.gif) no-repeat 2px center; }

.left .post-meta ul li a { color: #147DB6; }
.left .post-meta ul li a:hover { color: #333; }

/* post bottom */
.post-bottom-section {
   position: relative;
   margin: 10px 0 20px 0;
   padding: 0 0 20px 0;
   width: 740px;
   overflow: hidden;
   border-bottom: 1px solid #eeeeee;
}
.post-bottom-section h4 {
   position: absolute;
   left: 0px; top: 5px;
   text-align: right;
   width: 135px;
}
.post-bottom-section .right form {
   position: relative;
   top: 15px; left: 20px;
   margin: 0 0 20px 0 ;
}

/* post info */
.post-info { margin-top: 3px; }
.post .post-info a:link,
.post .post-info a:visited {
     color: #1372a8;
     border: none;
     font-size: .9em;
}

/* comments list */
ol.commentlist {
   margin: 12px 12px 12px 20px;
   padding: 0;
   background: #FAFAFA;
   border-top: 1px solid #EAECEE;
}
.commentlist li {
   list-style: none;
   margin: 0;
   padding: 12px 0 0 0;
   border: 1px solid #EAECEE;
   border-width: 0 1px 1px 1px;
   overflow: hidden;
}
.commentlist li a:link,
.commentlist li a:visited {
  color: #227bad;
}
.commentlist li .comment-info {
   width: 99%;
   margin: 0; padding: 0;
   overflow: hidden;
}
.commentlist li .comment-info img {
   float: right;
   margin: 3px 13px 0 0;
   background: #fff;
   border: 1px solid #E8EAEC;
   display: inline;
}
.commentlist li .comment-info cite {
   display: block;
   margin: 0; padding: 5px 65px 5px 20px;
   font-style: normal;
   font-weight: bold;
}
.commentlist li .comment-info cite .comment-data {
   font-size: .8em;
   font-weight: normal;
}
.commentlist li .comment-text {
   clear: both;
   margin: 0; padding: 0 20px 25px 20px;
}
.commentlist li .comment-text p {
   margin:  5px 0 20px 0;
   padding: 0;
}
.commentlist li .comment-text .reply a {
   padding: 5px;
   border: 1px solid #2177A5;
   background-color: #227bad;
   font-weight: bold;
   font-size: 11px;
   color: #fff;
}
.commentlist li ul.children { margin:0; padding: 0; }
.commentlist li ul.children li.depth-2,
.commentlist li ul.children li.depth-3 {
   margin-left: 40px;
   border-style: solid;
   border-color: #E1E6E8;
   border-width: 1px 0 0 1px;
}
.commentlist li.thread-alt {
   background: #F3F4F5;
   border-color: #E2E4E7;
}

/* ------------------------------------------------------------------------------
    A R C H I V E S
--------------------------------------------------------------------------------- */
ul.archive {
   margin: 10px 30px 10px 20px;
   padding: 0;
   border-top: 1px solid #eeeeee;
}
ul.archive li {
   margin: 0;
   padding: 12px 5px;
   border-bottom: 1px solid #eeeeee;
   list-style: none;
}
ul.archive li .post-title {
   margin: 0;   padding: 0;
   font-size: 1.2em;
   font-weight: bold;
}
ul.archive li .post-title a:link,
ul.archive li .post-title a:visited {
   color: #444;
}
ul.archive li .post-title a:hover {
   border: none;
   color: #000;
}
ul.archive li .post-details {
   margin-left: 0;
   margin-top: 0;
   font-size: .9em;
}
ul.archive li .post-details a:link,
ul.archive li .post-details a:visited {
   color: #1372a8;
}

/* pagenavigation */
.navigation {
   margin: 10px 20px; padding: 0;
   width: 560px;
}
.navigation a:link,
.navigation a:visited {
   float: left;
   display: block;
   margin: 10px 10px 0 0;
   padding: 5px 7px;
   text-transform: lowercase;
   text-decoration: none;
   font-weight: bold;
   color: #fff;
   background: #2C76A6;
   border-width: 1px;
     border-style: solid;
     border-color: #86BBDF #245F86 #245F86 #86BBDF;
}
.navigation a:hover {
   background: #FF3399;
   border-width: 1px;
     border-style: solid;
   border-color: #FF75BA #EA0075 #EA0075 #FF75BA;
}

/* ------------------------------------------------------------------------------
      M I S C
--------------------------------------------------------------------------------- */

/* alignment classes & additional classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }
.no-border { border: none; }
.no-bg {   background: none; }

/* clearing */
.fix {
   clear: both;
   height: 1px;
   margin: -1px 0 0;
   overflow: hidden;
}
.clear {   display:inline-block; }
.clear:after {
   display:block;
   visibility:hidden;
   clear:both;
   height:0;
   content: " ";
} 
↑
Mensaje11-12-2010, 13:17 (UTC)    
Título del mensaje: Re: (AYUDA) EL CONTENIDO DE LA PAG. NO SALE EN LA PLANTILLA
Responder citando
salva-do escribió:
hHola webmaster, tengo un pequeño problema que nose como arreglarlo. Tengo una plantilla css descargada y casi terminada de adaptar el problema es que los comentarios y el contenido de la página salen por debajo de la plantilla. Os dejo los codigos por debajo a ver si me podeis ayudar. Saludos.
NUEVA AYUDA:: EL CODIGO DE HERNAN666RECURSOS SI ME SIRVE PERO AHORA EL CONTENIDO SALE ENTRE LA PARTE SUPERIOR Y LA DE ABAJO EN VEZ DE SALIR EN LA PLANTILLA. PODEIS VER LO QUE DIGO EN: WWW.SALVA-DO.ES.TL/INICIO.HTM

Codigo completo de la plantilla::
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
 
<title>CoolBlue</title>
 
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="Erwin Aligam - styleshout.com" />
<meta name="description" content="Site Description Here" />
<meta name="keywords" content="keywords, here" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />
 
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
 
</head>
 
<body>
 
<!--header -->
<div id="header-wrap"><div id="header">
 
   <a name="top"></a>
 
   <h1 id="logo-text"><a href="index.html" title="">Salva-Do</a></h1>
   <p id="slogan">Lo mejor esta aquí </p>
 
   <div  id="nav">
      <ul>
         <li id="current"><a href="index.html">Inicio</a></li>
         <li><a href="style.html">Concursos</a></li>
         <li><a href="blog.html">Foro No Disponible</a></li>
         <li><a href="archives.html">PSP</a></li>
         <li><a href="index.html">PC</a></li>
         <li><a href="index.html">Wii Muy Pronto</a></li>
      </ul>
   </div>
 
   <p id="rss">
      <a href="index.html"></a>
   </p>
 
   <form id="quick-search" method="get" action="index.html">
      <fieldset class="search">
         <label for="qsearch">Search:</label>
         <input class="tbox" id="qsearch" type="text" name="qsearch" value="Buscar" title="Start typing and hit ENTER" />
         <button class="btn" title="Submit Search">Search</button>
      </fieldset>
   </form>
 
<!--/header-->
</div></div>
   
<!-- content-outer -->
<div id="content-wrap" class="clear" >
 
   <!-- content -->
   <div id="content">
 <!-- main -->
      <div id="main">
 
         <div class="post">
 
            <div class="right">
 
               <h2><a href="">Salva-Do Estrena Nueva Plantilla</a></h2>
 
               <p class="post-info">Noticia de <a href="index.html">actualizaciones</a>, <a href="index.html">novedades</a></p>
 
                  <div class="image-section">
                       <img src="http://img.webme.com/pic/m/marcihabbohd/salvado3.jpg" alt="image post" height="200" width="500"/>
                   </div>
 
               <p><strong>Salva-do</strong> estrena una nueva plantilla más moderna y con más novedades. La plantilla esta creada por Style Shout y totalmente modificada por mi. </p>         
<p>Crear una plantilla web y modificarla no es fácil es difícil  y hay que tener ciertos conocimientos en códigos html. </p>
<p>Bueno, dejemonos de rollos y vamos a decirte las novedades de esta plantilla:</p>
<p>-Podrás acceder a la pagina de Salva-do en Facebook y Twitter.</p>
<p>-Podrás encontrar todas las noticias organizadas por fecha y hora de publicación.</p>
<p>-Toda la información sobre mi.                              </p>
 
 
               <p><a class="more" href="index.html">..</a></p>
 
            </div>
 
            <div class="left">
 
               <p class="dateinfo">DIC<span>8</span></p>
 
                  <div class="post-meta">
                     <h4>Post Info</h4>
                        <ul>
                           <li class="user"><a href="#">Marcial</a></li>
                           <li class="time"><a href="#">15:45 PM</a></li>
                           <li class="comment"><a href="#">0 Comments</a></li>
                           <li class="permalink"><a href="#">Permalink</a></li>
                        </ul>
                  </div>
 
            </div>
 
         </div>
 
         <div class="post">
 
            <div class="right">
 
               <h2><a href="index.html">Aliquam Risus Justo</a></h2>
 
               <p class="post-info">Filed under <a href="index.html">templates</a>, <a href="index.html">internet</a></p>
 
               <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
               Cras id urna. Morbi tincidunt, orci ac <a href="index.html">convallis aliquam</a>, lectus turpis varius lorem, eu
               posuere nunc justo tempus leo.</p>
 
               <p>
               Donec mattis, purus nec placerat bibendum, <a href="index.html">dui pede condimentum</a>
               odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra
               condimentum, lorem tellus eleifend magna, <a href="index.html">eget fringilla velit</a> magna id neque. Curabitur vel urna.
               In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
               Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
               posuere nunc justo tempus leo.</p>
 
               <p><a class="more" href="index.html">continue reading »</a></p>
 
            </div>
 
            <div class="left">
 
               <p class="dateinfo">JAN<span>29</span></p>
 
               <div class="post-meta">
                  <h4>Post Info</h4>
                     <ul>
                        <li class="user"><a href="#">Erwin</a></li>
                        <li class="time"><a href="#">10:30 PM</a></li>
                        <li class="comment"><a href="#">5 comments</a></li>
                        <li class="permalink"><a href="#">Permalink</a></li>
                     </ul>
               </div>
 
            </div>
 
         </div>
 
         <div class="post">
 
            <div class="right">
 
               <h2><a href="index.html">Lorem Ipsum Dolor Sit Amet</a></h2>
 
               <p class="post-info">Filed under <a href="index.html">templates</a>, <a href="index.html">internet</a></p>
 
               <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
               Cras id urna. Morbi tincidunt, orci ac <a href="index.html">convallis aliquam</a>, lectus turpis varius lorem, eu
               posuere nunc justo tempus leo.</p>
 
               <p>
               Donec mattis, purus nec placerat bibendum, <a href="index.html">dui pede condimentum</a>
               odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra
               condimentum, lorem tellus eleifend magna, <a href="index.html">eget fringilla velit</a> magna id neque. Curabitur vel urna.
               In tristique orci porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
               Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
               posuere nunc justo tempus leo.</p>
 
               <p><a class="more" href="index.html">continue reading »</a></p>
 
            </div>
 
            <div class="left">
 
               <p class="dateinfo">JAN<span>25</span></p>
 
               <div class="post-meta">
                  <h4>Post Info</h4>
                     <ul>
                        <li class="user"><a href="#">Erwin</a></li>
                        <li class="time"><a href="#">11:30 AM</a></li>
                        <li class="comment"><a href="#">7 comments</a></li>
                        <li class="permalink"><a href="#">Permalink</a></li>
                     </ul>
               </div>
 
            </div>
 
         </div>
 

              <!-- /main -->
      </div>
 
      <!-- sidebar -->
      <div id="sidebar">
 
         <div class="about-me">
 
            <h3>About Me</h3>
            <p>
            <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/gravatar.jpg" width="40" height="40" alt="firefox" class="float-left" /></a>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
            Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
            posuere nunc justo tempus leo <a href="index.html">Learn more...</a>
            </p>
 
         </div>
 
         <div class="sidemenu">
 
            <h3>Sidebar Menu</h3>
            <ul>
               <li><a href="index.html">Home</a></li>
               <li><a href="index.html#TemplateInfo">TemplateInfo</a></li>
               <li><a href="style.html">Style Demo</a></li>
               <li><a href="blog.html">Blog</a></li>
               <li><a href="archives.html">Archives</a></li>
               <li><a href="http://www.dreamtemplate.com" title="Web Templates">Web Templates</a></li>
            </ul>
 
         </div>
 
         <div class="sidemenu">
 
            <h3>Sponsors</h3>
            <ul>
               <li><a href="http://www.dreamtemplate.com" title="Website Templates">DreamTemplate <br />
                  <span>Over 6,000+ Premium Web Templates</span></a>
               </li>
               <li><a href="http://www.themelayouts.com" title="WordPress Themes">ThemeLayouts <br />
                  <span>Premium WordPress & Joomla Themes</span></a>
               </li>
               <li><a href="http://www.imhosted.com" title="Website Hosting">ImHosted.com <br />
                  <span>Affordable Web Hosting Provider</span></a>
               </li>
               <li><a href="http://www.dreamstock.com" title="Stock Photos">DreamStock <br />
                  <span>Download Amazing Stock Photos</span></a>
               </li>
               <li><a href="http://www.evrsoft.com" title="Website Builder">Evrsoft <br />
                  <span>Website Builder Software & Tools</span></a>
               </li>
               <li><a href="http://www.webhostingwp.com" title="Web Hosting">Web Hosting <br />
                  <span>Top 10 Hosting Reviews</span></a>
               </li>
            </ul>
 
         </div>
 
         <div class="popular">
 
            <h3>Most Popular</h3>
            <ul>
               <li><a href="index.html">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a>
                  <br /><span>Posted on December 22, 2010</span>
               </li>
               <li><a href="index.html">Cras fringilla magna. Phasellus suscipit.</a>
                  <br /><span>Posted on December 20, 2010</span>
               </li>
               <li><a href="index.html">Morbi tincidunt, orci ac convallis aliquam.</a>
                  <br /><span>Posted on December 15, 2010</span>
               </li>
               <li><a href="index.html">Ipsum dolor sit amet, consectetuer adipiscing elit.</a>
                  <br /><span>Posted on December 14, 2010</span>
               </li>
               <li><a href="index.html">Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem</a>
                  <br /><span>Posted on December 12, 2010</span>
               </li>
            </ul>
 
         </div>
 
      <!-- /sidebar -->
      </div>
 
    <!-- content -->
   </div>
 
<!-- /content-out -->
</div>
      
<!-- footer-outer -->
<div id="footer-outer" class="clear"><div id="footer-wrap">
 
   <div id="gallery" class="clear">
 
      <h3>Flickr Photos </h3>
 
      <p class="thumbs">
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
         <a href="index.html"><img src="http://img.webme.com/pic/s/salva-do/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
      </p>
 
    </div>
 
    <div class="col-a">
 
      <h3>Contact Info</h3>
 
      <p>
      <strong>Phone: </strong>+1234567<br/>
      <strong>Fax: </strong>+123456789
      </p>
 
      <p><strong>Address: </strong>123 Put Your Address Here</p>
        <p><strong>E-mail: </strong>me@coolblue.com</p>
      <p>Want more info - go to our <a href="#">contact page</a></p>
 
      <h3>Updates</h3>
 
      <ul class="subscribe-stuff">
         <li><a title="RSS" href="index.html" rel="nofollow">
            <img alt="RSS" title="RSS" src="http://img.webme.com/pic/s/salva-do/social_rss.png" /></a>
         </li>
         <li><a title="Facebook" href="index.html" rel="nofollow">
            <img alt="Facebook" title="Facebook" src="http://img.webme.com/pic/s/salva-do/social_facebook.png" /></a>
         </li>
         <li><a title="Twitter" href="index.html" rel="nofollow">
            <img alt="Twitter" title="Twitter" src="http://img.webme.com/pic/s/salva-do/social_twitter.png" /></a>
         </li>
         <li><a title="E-mail this story to a friend!" href="index.html" rel="nofollow">
            <img alt="E-mail this story to a friend!" title="E-mail this story to a friend!" src="http://img.webme.com/pic/s/salva-do/social_email.png" /></a>
         </li>
      </ul>
 
      <p>Stay up to date. Subscribe via
      <a href="index">RSS</a>, <a href="index">Facebook</a>,
      <a href="index">Twitter</a> or <a href="index">Email</a>
      </p>
 
   </div>
 
   <div class="col-a">
 
      <h3>Site Links</h3>
 
      <div class="footer-list">
         <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="index.html">Style Demo</a></li>
            <li><a href="index.html">Blog</a></li>
            <li><a href="index.html">Archive</a></li>
            <li><a href="index.html">About</a></li>
            <li><a href="index.html">Template Info</a></li>
            <li><a href="index.html">Site Map</a></li>
         </ul>
      </div>
 
      <h3>Friends</h3>
 
      <div class="footer-list">
         <ul>
            <li><a href="index.html">consequat molestie</a></li>
            <li><a href="index.html">sem justo</a></li>
            <li><a href="index.html">semper</a></li>
            <li><a href="index.html">magna sed purus</a></li>
            <li><a href="index.html">tincidunt</a></li>
            <li><a href="index.html">consequat molestie</a></li>
            <li><a href="index.html">magna sed purus</a></li>
         </ul>
      </div>
 
   </div>
 
   <div class="col-a">
 
      <h3>Credits</h3>
 
      <div class="footer-list">
         <ul>
            <li><a href="http://jasonlarose.com/blog/110-free-classy-social-media-icons">
                  110 Free Classy Social Media Icons by Jason LaRose
                </a>
            </li>
            <li><a href="http://wefunction.com/2009/05/free-social-icons-app-icons/">
                  Free Social Media Icons by WeFunction
                </a>
            </li>
            <li><a href="http://www.famfamfam.com/lab/icons/">
                  Free Icons by FAMFAMFAM
                </a>
            </li>
         </ul>
      </div>
 
      <h3>Recent Comments</h3>
 
      <div class="recent-comments">
         <ul>
         <li><a href="index.html" title="Comment on title">Whoa! This one is really cool...</a><br /> - <cite>Erwin</cite></li>
         <li><a href="index.html" title="Comment on title">Wow. This theme is really awesome...</a><br /> - <cite>John Doe</cite></li>
         <li><a href="index.html" title="Comment on title">Type your comment here...</a><br />- <cite>Naruto</cite></li>
         <li><a href="index.html" title="Comment on title">And don't forget this theme is free...</a><br /> - <cite>Shikamaru</cite></li>
         <li><a href="index.html" title="Comment on title">Just a simple reply test. Thanks...</a><br /> - <cite>ABCD</cite></li>
         </ul>
      </div>
 
   </div>
 
   <div class="col-b">
 
      <h3>Archives</h3>
 
      <div class="footer-list">
         <ul>
            <li><a href="index.html">January 2010</a></li>
            <li><a href="index.html">December 2009</a></li>
            <li><a href="index.html">November 2009</a></li>
            <li><a href="index.html">October 2009</a></li>
            <li><a href="index.html">September 2009</a></li>
         </ul>
      </div>
 
      <h3>Recent Bookmarks</h3>
 
      <div class="footer-list">
         <ul>
            <li><a href="index.html">5 Must Have Sans Serif Fonts for Web Designers</a></li>
            <li><a href="index.html">The Basics of CSS3</a></li>
            <li><a href="index.html">10 Simple Tips for Launching a Website</a></li>
            <li><a href="index.html">24 ways: Working With RGBA Colour</a></li>
            <li><a href="index.html">30 Blog Designs with Killer Typography</a></li>
            <li><a href="index.html">The Principles of Great Design</a></li>
         </ul>
      </div>
 
   </div>
 
<!-- /footer-outer -->
</div></div>
 
<!-- footer-bottom -->
<div id="footer-bottom">
 
   <p class="bottom-left">
      © 2010 <strong>Copyright Info</strong>     
      <a href="http://www.bluewebtemplates.com/" title="Website Templates">website templates</a> by <a href="http://www.styleshout.com/">styleshout</a>
   </p>
 
   <p class="bottom-right">
      <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> |
      <a href="http://validator.w3.org/check/referer">XHTML</a>   |
      <a href="index.html">Home</a> |
      <a href="index.html">Sitemap</a> |
      <a href="index.html">RSS Feed</a> |
      <strong><a href="#top">Back to Top</a></strong>
   </p>
 
<!-- /footer-bottom-->
</div>
 
</body>
</html>






CSS CODE SIN STYLE TAGS:
Código:
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;}

/* -----------------------------------------------------------------------------
   Template Name : CoolBlue
   Template Code : S-0031
   Version : 1.0
   Author : Erwin Aligam
   Author URI : http://www.styleshout.com/
   Last Date Modified : March 10, 2010
 -------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------
    G E N E R A L
--------------------------------------------------------------------------------- */
body {
   font: 12px/170% 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   color: #777;
   margin: 0; padding: 0;
   background: url(http://img.webme.com/pic/s/salva-do/bg.jpg);
}
/* links */
a:link, a:visited {
   text-decoration: none;
   color: #FF409F;
}
a:hover { color: #147DB6; }
a:link.more, a:visited.more {
   float: left;
   margin-top: 20px;
   margin-right: 5px;
   padding: 6px 8px;
   border: 1px solid #2177A5;
   background-color: #227bad;
    text-transform: lowercase;
   text-decoration: none;
   font-weight: bold;
   color: #fff;
}
a:hover.more {
   border: 1px solid #FF2B95;
   background-color: #FF3399;
}

/* Headers */
h1, h2, h3, h4 {
   font: bold 1em/1.5em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   color: #555;
   margin: 8px 25px;
}
h1 { font-size: 3.7em; font-weight: normal; letter-spacing: -2px; }
h2 { font-size: 2.8em; font-weight: normal; }
h3 { font-size: 2.2em; font-weight: normal; letter-spacing: -0.5px; padding-top: 15px; }
h4 { font-size: 1.5em; }

/* lists */
ul, ol {
   margin: 10px 25px;
   padding: 0 20px;
}
ul { list-style: disc; }
ol { list-style: decimal; }

dt {
  font-weight: bold;
  color: #1980AF;   
}
dd {
  padding-left: 20px;
}

p, dl { margin: 10px 25px; }

/* images */
img {
   background: #F3F4F5;
   border: 1px solid #E2E4E7;
   padding: 10px;
}
img.float-right {   margin: 5px 0px 10px 10px; }
img.float-left { margin: 5px 10px 10px 0px; }

code {
     margin: 3px 0;
     padding: 20px;
     text-align: left;
     display: block;
     overflow: auto;
     font: 500 1em/1.5em 'Lucida Console', 'Courier New', Monospace;
     /* white-space: pre; */
     border: 1px solid #F0F0F0;
   background: #F8F8F8;
   color: #555;
}
acronym {
   cursor: help;
     border-bottom: 1px dotted #777;
}
blockquote {
     margin: 10px 25px;
     padding: 10px 20px 10px 32px;
     border: 1px solid #F0F0F0;
     background: #f8f8f8 url(http://img.webme.com/pic/s/salva-do/quote.gif) no-repeat 12px 12px;
     font-weight: normal;
     font-size: 17px;
     line-height: 1.5em;
     font-style: italic;
     font-family: Georgia, 'Times New Roman', Times, Serif;
     color: #555;
}
strong { font-weight: bold; }

/* table */
table {
   border-collapse: collapse;
   margin: 10px 25px;
}
tr { background: #FFF; }
th, td {
   text-align: left;         
   border-width: 1px;
     border-style: solid;
}
th {
     padding: .8em 1em;
   background: #2C76A6;
     border-color: #308ABA #308ABA #246F97 #308ABA;
   color: #fff;
   font-weight: bold;
}
td {
   border-color: #E9E9E9;
   padding: .7em 1em;
}

/* form elements */
form {
   margin: 10px 25px 10px 25px;
   padding: 10px 25px 25px 25px;
    background: #F3F4F5;
    border: 1px solid #E2E4E7;
   width: 477px;
}
form p {
   border-bottom: 1px solid #E6E6E6;
   padding: 12px 0 5px 0;   margin: 0;   
   color: #2C76A6;
}
label {
   font-weight: bold;
   color: #666666;
}
input, select, textarea {
   margin: 5px 0;
   padding: 7px 6px;
   color: #6A6969;
   border-width: 1px;
   border-style: solid;
     border-color: #D4D4D4 #EBEBEB #EBEBEB #D4D4D4;    
   font: 11px 'Lucida Grande', Verdana, Helvetica, sans-serif;
}
input:focus, select:focus, textarea:focus {
   color: #19465D;
   background: #EEF8FB;
}
#name, #email, #message, #website {
   width: 460px;
}
input.button {
   font: bold 12px Arial, Sans-serif;
   height: 30px;
   margin: 0;
   padding: 2px 3px;
   color: #FFF;
   background: #2C76A6;
   
   border-width: 1px;
     border-style: solid;
     border-color: #86BBDF #245F86 #245F86 #86BBDF;
   cursor: pointer;
}

/* ------------------------------------------------------------------------------
    L A Y O U T
--------------------------------------------------------------------------------- */

/* header */
#header-wrap {
  float: left;
  height: 200px;
  width: 100%;
  background: url(http://img.webme.com/pic/s/salva-do/header-bg.jpg) repeat-x;
}
#header {
  position: relative;
  margin: 0 auto;
  width: 1000px;
}

#header h1#logo-text { margin: 0; padding: 0; }
#header h1#logo-text a {
   position: absolute;
   margin: 0; padding: 0 5px 0 0;
   font: bold 55px 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-Serif;
   letter-spacing: -4px;
   color: #333;
   text-decoration: none;

     /* change the values of top and left to adjust the position of the logo*/
   top: 82px; left: 25px;
}
#header p#slogan {
   position: absolute;
   margin: 0; padding:  0 5px 0 0;
   font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   font-weight: bold;
   font-size: 11px;
   line-height: 1.8em;
   font-style: normal;
   letter-spacing: -.5px;
   color: #0d6684;

   /* change the values of top and left to adjust the position */
   top: 142px; left: 30px;
}

/* RSS */
#header p#rss {
  position: absolute;
  width: 175px;
  height: 50px;
  top: 15px;  right: 17px;
  padding: 0; margin: 0;
  text-align: right;
}
#header p#rss a {
  background: transparent url(http://img.webme.com/pic/s/salva-do/rss.gif) no-repeat left center;
  color: #baa7a7;
  height: 30px;
  font: bold 12px 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
  margin: 0;
  padding: 10px 0 0 30px;
  display: block;
}
#header p#rss a:hover { color: #fff; }

/* Quick Search */
form#quick-search {
     position: absolute;
     top: 95px; right: 12px;
     background: transparent;
     border: none;
     margin: 0; padding: 0;
     width: 250px;
}
fieldset.search {
   border: none;
   width: 250px; height: 40px;
   padding: 0; margin: 0;
   background: url(http://img.webme.com/pic/s/salva-do/search.gif) no-repeat;
}
.search input {
     border: none;
     float: left;
    padding: 0; margin: 0;
}
.search button {
     border: none;
     float: right;
     padding: 0; margin: 0;
}
.search label { display: none; }
.search input.tbox {
     color: #7d8285;
     font-weight: bold;
     margin: 15px 0 10px 10px;
     background: transparent;
     width: 200px;
}
.search button.btn {
     width: 40px;
     height: 40px;
     cursor: pointer;
     text-indent: -9999px;
     background: #fbc900 url(http://img.webme.com/pic/s/salva-do/search.gif) no-repeat top right;
}

/*  navigation  */
#header #nav {
   position: absolute;
   left: 15px;   top: 25px;
   margin: 0; padding: 0;
   width: 750px;
}
#header #nav ul {
   float: left;   
   list-style: none;
   margin: 0; padding: 0;
   height: 45px;
}
#header #nav ul li {
   float: left;
   margin: 0; padding: 0;         
}
#header #nav ul li a {
   float:left;
   margin: 0;
   padding: 0 15px 29px 15px;
   color: #baa7a7;
   font: bold 12px 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
}
#header #nav ul li a:hover,
#header #nav ul li a:active {
   border: none;
   color: #fff;
}
#header #nav ul li#current a {
   background: transparent url(http://img.webme.com/pic/s/salva-do/current.jpg) no-repeat center bottom;
   color: #fff;
}

/* content */
#content-wrap {
   clear: both;
     margin: 0; padding: 0;
   background: #fff;
   width: 100%;
   float: left;
}
#content {
   width: 1000px;
   margin: 0 auto;
   padding: 0 0 20px 0;
   background: #FFF url(http://img.webme.com/pic/s/salva-do/content.gif) repeat-y center top;
   overflow: hidden;
}

/* columns */
#main {
   float: left;
   margin: 0;
   padding: 25px 0 0 0;
   width: 740px;
}
#sidebar {
   width: 245px;
   float: right;
   margin: 0;
   padding: 15px 0;
   font-size: .95em;
}

#main h2 {
   font: bold 3.2em/1em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   color: #333;
   letter-spacing: -2.0px;
   margin-bottom: 0;
   padding-bottom: 0;
}
#main h2 a { color: #333; }
#sidebar h3 {
   font: bold 1.7em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   letter-spacing: .2px;
   margin-left: 10px;
   color: #333;
}
#sidebar h3, #sidebar p {
   margin-left: 10px;
}
#sidebar img { padding: 8px; }


/* sidemenu */
.sidemenu ul {
   text-align: left;
   margin: 10px 15px 10px 8px;
   padding: 0;
   border-top: 1px solid #EFEFEF;
}
.sidemenu ul li {
   list-style: none;
   font-size: 11px;
   margin: 0;
   padding: 7px 5px;
   border-bottom: 1px solid #EFEFEF;
}
* html body .sidemenu ul li {   height: 1%; }
.sidemenu ul li a:link,
.sidemenu ul li a:visited {
   color: #33799B;
   padding-left: 0;
   font-weight: bold;
   text-transform: uppercase;
}
.sidemenu ul li a span {
   color: #959595;
   font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   font-style: normal;
   font-weight: normal;
   text-transform: none;
}
.sidemenu ul li a:hover { color: #000; }
.sidemenu ul ul { margin: 0 0 0 5px; padding: 0; }
.sidemenu ul ul li { border: none; }

/* popular */
.popular ul {
   text-align: left;
   margin: 10px 15px 10px 8px;
    padding: 0;
   border-top: 1px solid #EFEFEF;
}
.popular ul li {
   list-style: none;
   border-bottom: 1px solid #EFEFEF;
    font-size: 12px;
   line-height: 1.5em;
   padding: 8px 5px 8px 20px;
   margin: 0;
   background: url(http://img.webme.com/pic/s/salva-do/document.gif) no-repeat 3px 11px;
}
* html body .popular ul li { height: 1%; }
.popular ul li a:link,
.popular ul li a:visited {
   color: #33799B;
   padding-left: 0;
   font-weight: bold;
   text-transform: none;
}
.popular ul li span {
   color: #888;
   font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   font-style: normal;
   font-weight: normal;
   text-transform: uppercase;
   font-size: 10px;
   line-height: 1.7em;
}
.popular ul li a:hover { color: #000; }

/* footer */
#footer-outer {
   clear: both;
   text-align: left;
   width: 100%;
   font-size: .9em;
   color: #C2DBE7;
    padding-bottom: 30px;
   border-top: #1a5d8a;
}
#footer-wrap {
   width: 1000px;
   margin: 0 auto;
}
#footer-wrap a:link,
#footer-wrap a:visited { color: #fff; }
#footer-wrap a:hover { color: #99CCFF; }
#footer-wrap h3 {
   font: bold 1.7em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
   letter-spacing: .2px;
   margin-bottom: 15px;
   color: #fff;
}

/* gallery */
#footer-wrap #gallery {
   padding: 0 0 10px 0;
   margin: 0;
   width: 100%;
   background: url(http://img.webme.com/pic/s/salva-do/footer-line.gif) repeat-x left bottom;

   /* border-bottom: 1px solid #326B8D;  */
}
#footer-wrap #gallery h3 {
  float: left;
  display: inline;
  width: 200px;
  margin: 30px 0 0 20px;
  padding: 0;
}
#footer-wrap #gallery p.thumbs {
  float: right;
  display: inline;
  width: 730px;
  margin: 20px 0 0 0;
  padding: 0;
}
p.thumbs img {
   position: relative;
   padding: 8px;
   margin: 10px 10px 10px 0;
   background: #FAFAFA;
   border: 1px solid #EDEDED;
}

/* footer columns */
#footer-wrap .col-a {
   width: 250px;
   float: left;
}
#footer-wrap .col-b {
   width: 245px;
   float: right;
}

/* recent comments */
.recent-comments ul {
   text-align: left;
   margin-left: 20px;
   padding: 0;
   background: url(http://img.webme.com/pic/s/salva-do/footer-line.gif) repeat-x left top;
}
.recent-comments ul li {
   list-style: none;
   font-size: 12px;
   line-height: 1.5em;
   padding: 7px 5px 7px 20px;
   background: url(http://img.webme.com/pic/s/salva-do/speech_bubble.gif) no-repeat 3px 11px;
}
* html body .recent-comments ul li { height: 1%; }
.recent-comments ul li a:link,
.recent-comments ul li a:visited { padding-left: 0; }
.recent-comments ul li cite {
   font-size: .9em;
   font-style: normal;
}

/* footer-list */
.footer-list ul {
   background: url(http://img.webme.com/pic/s/salva-do/footer-line.gif) repeat-x left top;
   list-style: none;
   padding: 0;
   margin-left: 20px;
}
.footer-list ul li { border-bottom: 1px solid #326B8D; }
.footer-list ul li a:link,
.footer-list ul li a:visited {
   display: block;
   width: 98%;
   line-height: 2em;
   padding: 5px 0 5px 5px;
   margin-left: 0;
   color: #fff;
}
.footer-list ul li a:hover { color: #99CCFF; }

/* subscribe stuff */
ul.subscribe-stuff {
  list-style: none;
  margin: 0 0 0 20px; padding: 0;
}
ul.subscribe-stuff li {
  float: left;
  margin: 0 3px 0 0; padding: 0;
}
ul.subscribe-stuff li img {
  padding: 0; margin: 0;
  border: none;
  background: none;
}

/* footer-bottom */
#footer-bottom {
   clear: both;
   width: 1000px;
   font-size: .9em;
   margin: 0 auto;
   padding-top: 10px;
   font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
   font-size: .9em;
   color: #C2DBE7;
   overflow: hidden;
   background: url(http://img.webme.com/pic/s/salva-do/footer-line.gif) repeat-x left top;
}
#footer-bottom a { color: #fff; }
#footer-bottom a:hover { color: #99CCFF; }

#footer-bottom p.bottom-left {
   float: left;
   display: inline;
   margin: 0 0 30px 20px;
   padding: 0;
   width: 600px;
   text-align: left;
}
#footer-bottom p.bottom-right {
   float: right;
   display: inline;
   margin: 0 30px 30px 0;
   padding: 0;
   width: 320px;
   text-align: right;
}

/* ------------------------------------------------------------------------------
      B L O G   P O S T
--------------------------------------------------------------------------------- */
.post {
   margin: 5px 0 20px 0;
   padding: 0 0 20px 0;
   width: 740px;
   overflow: hidden;
   border-bottom: 1px solid #eee;
}
.right {
   width: 560px;
   float: right;
   display: inline;
   padding-right: 15px;
}
.left {
    position: relative;
    width: 150px;
    float: right;
    display: inline;
}
.right .image-section {
   clear: both;
   display: block;
   margin: 25px 0 10px 20px;
   padding: 0;
}
.right .image-section img {
   background: #F3F4F5;
   border: 1px solid #E2E3E7;
   padding: 12px;
}
.right h2 { margin-top: 0; }

/* share */
.right .share-box {
   margin: 20px 12px 0 20px;
   padding: 0 10px 10px 20px;
   background: #FAFAFA;
   border: 1px solid #EAECEE;
   overflow: hidden;
   width: 494px;
}
.right .share-box h4 {
 margin-left: 0;
}
.right .share-box ul {
  list-style: none;
  margin: 0; padding: 0;
}
.right .share-box ul li {
  float: left;
  margin-right: 5px;
}
.right .share-box ul li a:hover { cursor: pointer; }
.right .share-box ul li img {
  margin: 0;
  padding: 5px;
  background: #fff;
}

/* dateinfo */
.left p.dateinfo {
  background: url(http://img.webme.com/pic/s/salva-do/date-bg.gif) no-repeat;
  height: 83px;
  width: 68px;
  margin: 12px 0 0 70px;
  padding: 8px 0 0 1px;
  font: bold 15px Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
  color: #fff;
}
.left p.dateinfo span {
  font: bold 30px Arial, Helvetica, sans-serif;
  display: block;
  color: #555;
  margin: 8px 0 0 0;
  padding: 0;
  letter-spacing: 0;
}

/* post meta */
.left .post-meta {
    width: 140px;
    font-size: .9em;
    margin: 5px 0 20px 0;
    padding: 0;
}
.left .post-meta h4 {
   text-align: right;
   margin: 0 5px 10px 5px;
   padding: 0;
   color: #555;
}
.left .post-meta ul {
   list-style: none;
   margin: 0; padding: 0;
   border-top: 1px solid #F1F1F1;
}
.left .post-meta ul li {
   list-style: none;
   border-bottom: 1px solid #F1F1F1;
   padding: 3px 5px;
   margin: 0;
   text-align: right;
   color: #147DB6;
}
* html body .left .post-meta ul li { height: 1%; }

.left .post-meta ul.tags li { background: url(http://img.webme.com/pic/s/salva-do/tag.gif) no-repeat 2px center; }
.left .post-meta ul li.user { background: url(http://img.webme.com/pic/s/salva-do/user.gif) no-repeat 2px center; }
.left .post-meta ul li.time { background: url(http://img.webme.com/pic/s/salva-do/clock.gif) no-repeat 2px center; }
.left .post-meta ul li.comment { background: url(http://img.webme.com/pic/s/salva-do/comment.gif) no-repeat 2px center; }
.left .post-meta ul li.permalink { background: url(http://img.webme.com/pic/s/salva-do/permalink.gif) no-repeat 2px center; }

.left .post-meta ul li a { color: #147DB6; }
.left .post-meta ul li a:hover { color: #333; }

/* post bottom */
.post-bottom-section {
   position: relative;
   margin: 10px 0 20px 0;
   padding: 0 0 20px 0;
   width: 740px;
   overflow: hidden;
   border-bottom: 1px solid #eeeeee;
}
.post-bottom-section h4 {
   position: absolute;
   left: 0px; top: 5px;
   text-align: right;
   width: 135px;
}
.post-bottom-section .right form {
   position: relative;
   top: 15px; left: 20px;
   margin: 0 0 20px 0 ;
}

/* post info */
.post-info { margin-top: 3px; }
.post .post-info a:link,
.post .post-info a:visited {
     color: #1372a8;
     border: none;
     font-size: .9em;
}

/* comments list */
ol.commentlist {
   margin: 12px 12px 12px 20px;
   padding: 0;
   background: #FAFAFA;
   border-top: 1px solid #EAECEE;
}
.commentlist li {
   list-style: none;
   margin: 0;
   padding: 12px 0 0 0;
   border: 1px solid #EAECEE;
   border-width: 0 1px 1px 1px;
   overflow: hidden;
}
.commentlist li a:link,
.commentlist li a:visited {
  color: #227bad;
}
.commentlist li .comment-info {
   width: 99%;
   margin: 0; padding: 0;
   overflow: hidden;
}
.commentlist li .comment-info img {
   float: right;
   margin: 3px 13px 0 0;
   background: #fff;
   border: 1px solid #E8EAEC;
   display: inline;
}
.commentlist li .comment-info cite {
   display: block;
   margin: 0; padding: 5px 65px 5px 20px;
   font-style: normal;
   font-weight: bold;
}
.commentlist li .comment-info cite .comment-data {
   font-size: .8em;
   font-weight: normal;
}
.commentlist li .comment-text {
   clear: both;
   margin: 0; padding: 0 20px 25px 20px;
}
.commentlist li .comment-text p {
   margin:  5px 0 20px 0;
   padding: 0;
}
.commentlist li .comment-text .reply a {
   padding: 5px;
   border: 1px solid #2177A5;
   background-color: #227bad;
   font-weight: bold;
   font-size: 11px;
   color: #fff;
}
.commentlist li ul.children { margin:0; padding: 0; }
.commentlist li ul.children li.depth-2,
.commentlist li ul.children li.depth-3 {
   margin-left: 40px;
   border-style: solid;
   border-color: #E1E6E8;
   border-width: 1px 0 0 1px;
}
.commentlist li.thread-alt {
   background: #F3F4F5;
   border-color: #E2E4E7;
}

/* ------------------------------------------------------------------------------
    A R C H I V E S
--------------------------------------------------------------------------------- */
ul.archive {
   margin: 10px 30px 10px 20px;
   padding: 0;
   border-top: 1px solid #eeeeee;
}
ul.archive li {
   margin: 0;
   padding: 12px 5px;
   border-bottom: 1px solid #eeeeee;
   list-style: none;
}
ul.archive li .post-title {
   margin: 0;   padding: 0;
   font-size: 1.2em;
   font-weight: bold;
}
ul.archive li .post-title a:link,
ul.archive li .post-title a:visited {
   color: #444;
}
ul.archive li .post-title a:hover {
   border: none;
   color: #000;
}
ul.archive li .post-details {
   margin-left: 0;
   margin-top: 0;
   font-size: .9em;
}
ul.archive li .post-details a:link,
ul.archive li .post-details a:visited {
   color: #1372a8;
}

/* pagenavigation */
.navigation {
   margin: 10px 20px; padding: 0;
   width: 560px;
}
.navigation a:link,
.navigation a:visited {
   float: left;
   display: block;
   margin: 10px 10px 0 0;
   padding: 5px 7px;
   text-transform: lowercase;
   text-decoration: none;
   font-weight: bold;
   color: #fff;
   background: #2C76A6;
   border-width: 1px;
     border-style: solid;
     border-color: #86BBDF #245F86 #245F86 #86BBDF;
}
.navigation a:hover {
   background: #FF3399;
   border-width: 1px;
     border-style: solid;
   border-color: #FF75BA #EA0075 #EA0075 #FF75BA;
}

/* ------------------------------------------------------------------------------
      M I S C
--------------------------------------------------------------------------------- */

/* alignment classes & additional classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }
.no-border { border: none; }
.no-bg {   background: none; }

/* clearing */
.fix {
   clear: both;
   height: 1px;
   margin: -1px 0 0;
   overflow: hidden;
}
.clear {   display:inline-block; }
.clear:after {
   display:block;
   visibility:hidden;
   clear:both;
   height:0;
   content: " ";
} 
[/quote]
↑
Mostrar mensajes anteriores:   
  • Página 1 de 1

  •  
    • Saltar a:  


Powered by phpBB © 2001, 2005 phpBB Group

© 2024 webme GmbH, Alemania. Todos los derechos reservados.