Avatar 2.0
Encima de la página| Código: |
| <center> <!-- Cabezal --> <img src="http://img29.xooimage.com/files/1/2/3/head-1733b1d.png" width="850px"/> <!-- Fin cabezal --> </center> <div class="main"> <ul> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> <li><a href="#">Enlace</a></li> </ul> </div> <div id="warp"> |
Debajo de la página
| Código: |
| <div id="sidebar"> <div id="titulo">Lo mas reciente:</div> <center> Aquí puedes escribir noticias sobre tu web u otras cosas... <br><br></center> <div id="titulo">Enlaces</div> - <a href="#">Enlace 1</a> / Descripcion del enlace<br> - <a href="#">Enlace 2</a> / Descripcion del enlace<br> - <a href="#">Enlace 3</a> / Descripcion del enlace<br> - <a href="#">Enlace 4</a> / Descripcion del enlace<br> - <a href="#">Enlace 5</a> / Descripcion del enlace<br> - <a href="#">Enlace 6</a> / Descripcion del enlace<br> <div id="titulo">Publicidad</div> <center> Aquí puedes colocar a tus afiliados u otras cosas... </center> </div><!-- fin sidebar --> <div style="clear: both;"></div> <div id="footer"> <p class="left">© Derechos reservados: <a href="http://tuweb.es.tl">Tu web</a> 2009 | Estructura: <a href="http://cssplantillas.es.tl">CP</a> | Diseño: <a href="http://inwebmaster.es">iW</a> </p> <p class="right"><a href="/inicio.htm">Inicio</a> | <a href="/contacto.htm" class="b">Contacto</a></p> </div> </div> <br /> |
CSS CODE Sin style tags
| Código: |
| #pre_header {display: none;} #post_header {display: none;} #header_container {display: none;} lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;} #header {display: none;} #title {display: none;} #nav_container {display:none;} table {margin-left:auto;margin-right:auto;} * {margin: 0;padding: 0;} html {height: 100%;} body { height: 100%; text-align: center; font: 12px Arial, Helvetica, sans-serif; min-width: 850px; background-color:#EAEAEA; background-image:url(http://fc03.deviantart.net/fs25/f/2008/150/d/c/OS_X_Leopard_Wallpaper_Blue_by_D72.jpg); background-repeat: no-repeat; background-attachment: fixed; } a:link, a:visited { color: #FF6A00; text-decoration: none; } a:hover { text-decoration: none; } h1 { font: 2.6em Georgia, "Times New Roman", Times, serif; margin: 0 0 10px 40px; border-bottom: 1px solid #7F7F7F; width: 55%; padding: 15px 0 5px 0; } h2 { font: 1.2em Verdana, Arial, Helvetica, sans-serif; letter-spacing: 1px; color: #FFFFFF; border-left: 3px solid #FFAE20; padding-left: 14px; margin: 12px 0 0 40px; } h3 { color: #3D3D3D; font: 1.7em Georgia, "Times New Roman", Times, serif; letter-spacing: 1px; padding-left: 35px; margin: 18px 0 10px 0; } img { border: 0px; } /* Menu */ .main{ width: 850px; margin: 0 auto; margin-top:-3px; } .main:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .main ul{ width: 100%; background: #2572ad; padding: 6px 0; margin: 0; text-align: left; } .main ul li{ display: inline; } .main ul li a{ color: #fff; font:bold 13px arial; padding: 7px 10px; margin: 0; text-decoration: none; } .main ul li a:hover, .main ul li a.selected{ background: #115183; color: yellow; } /* Content boxes */ #warp { width: 848px; margin: 0 auto; border: 1px solid #999; background: #fff; } #content { float: left; width: 620px; text-align: left; padding-left: 5px; padding-top: 3px; } #sidebar { float: right; width: 206px; border:2px solid #115183; margin-bottom: 5px; background: #E2E2E2; text-align: left; } #sidebar a, #sidebar a:hover { color: #5B7F00; font-weight: bold; } #titulo { font-size: 13px; background: #2c7ab6; color: #FFFFFF; padding-top: 3px; padding-bottom: 3px; width: 206px; font-weight: bold; text-align:center; margin-bottom: 2px; } /* Footer */ #footer { background: #246fa8; color: white; width: 848px; height: 34px; margin: 0 auto; font-size: 11px; } #footer a, #footer a:hover { color: #fff; font-weight: bold; } #footer p.left, #footer p.right { width: 400px; display: inline; margin-bottom: 0; line-height: 30px; } #footer p.left { float: left; text-align: left; margin-left: 15px; } #footer p.right { float: right; font-weight: bold; text-align: right; margin-right: 15px; } |
