Beautifuyics

Por arriba 
Código:
<!-- www.designs-ics.es.tl --> 
<div class="top"><div class="header"> 
<div class="left"></div> 
<div class="right"> 
<h2>Noticias</h2><p> 
Introduce una noticia o cualquer otra cosa ! recuerda diseño adaptado por designs-ics 
</p></div></div></div> 
<div class="container">    
<style> 
a { 
   color: #333; 
} 
#nav { 
   margin: 0; 
   padding: 7px 6px 0; 
   background: #7d7d7d url(https://img.webme.com/pic/k/kateko/menugradient.png) repeat-x 0 -110px; 
   line-height: 100%; 
  
   border-radius: 2em; 
   -webkit-border-radius: 2em; 
   -moz-border-radius: 2em; 
  
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4); 
   -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4); 
} 
#nav li { 
   margin: 0 5px; 
   padding: 0 0 8px; 
   float: left; 
   position: relative; 
   list-style: none; 
} 
  
  
/* main level link */ 
#nav a { 
   font-weight: bold; 
   color: #e7e5e5; 
   text-decoration: none; 
   display: block; 
   padding:  8px 20px; 
   margin: 0; 
  
   -webkit-border-radius: 1.6em; 
   -moz-border-radius: 1.6em; 
    
   text-shadow: 0 1px 1px rgba(0,0,0, .3); 
} 
#nav a:hover { 
   background: #000; 
   color: #fff; 
} 
  
/* main level link hover */ 
#nav .current a, #nav li:hover > a { 
   background: #666 url(https://img.webme.com/pic/k/kateko/menugradient.png) repeat-x 0 -40px; 
   color: #444; 
   border-top: solid 1px #f8f8f8; 
  
   -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); 
   -moz-box-shadow: 0 1px 1px rgba(0,0,0, .2); 
   box-shadow: 0 1px 1px rgba(0,0,0, .2); 
  
   text-shadow: 0 1px 0 rgba(255,255,255, 1); 
} 
  
/* sub levels link hover */ 
#nav ul li:hover a, #nav li:hover li a { 
   background: none; 
   border: none; 
   color: #666; 
  
   -webkit-box-shadow: none; 
   -moz-box-shadow: none; 
} 
#nav ul a:hover { 
   background: #0078ff url(https://img.webme.com/pic/k/kateko/menugradient.png) repeat-x 0 -100px !important; 
   color: #fff !important; 
  
   -webkit-border-radius: 0; 
   -moz-border-radius: 0; 
  
   text-shadow: 0 1px 1px rgba(0,0,0, .1); 
} 
  
/* dropdown */ 
#nav li:hover > ul { 
   display: block; 
} 
  
/* level 2 list */ 
#nav ul { 
   display: none; 
  
   margin: 0; 
   padding: 0; 
   width: 185px; 
   position: absolute; 
   top: 35px; 
   left: 0; 
   background: #ddd url(https://img.webme.com/pic/k/kateko/menugradient.png) repeat-x 0 0; 
   border: solid 1px #b4b4b4; 
  
   -webkit-border-radius: 10px; 
   -moz-border-radius: 10px; 
   border-radius: 10px; 
  
   -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
   -moz-box-shadow: 0 1px 3px rgba(0,0,0, .3); 
   box-shadow: 0 1px 3px rgba(0,0,0, .3); 
} 
#nav ul li { 
   float: none; 
   margin: 0; 
   padding: 0; 
} 
  
#nav ul a { 
   font-weight: normal; 
   text-shadow: 0 1px 0 #fff; 
} 
  
/* level 3+ list */ 
#nav ul ul { 
   left: 181px; 
   top: -3px; 
} 
  
/* rounded corners of first and last link */ 
#nav ul li:first-child > a { 
   -webkit-border-top-left-radius: 9px; 
   -moz-border-radius-topleft: 9px; 
  
   -webkit-border-top-right-radius: 9px; 
   -moz-border-radius-topright: 9px; 
} 
#nav ul li:last-child > a { 
   -webkit-border-bottom-left-radius: 9px; 
   -moz-border-radius-bottomleft: 9px; 
  
   -webkit-border-bottom-right-radius: 9px; 
   -moz-border-radius-bottomright: 9px; 
} 
  
/* clearfix */ 
#nav:after { 
   content: "."; 
   display: block; 
   clear: both; 
   visibility: hidden; 
   line-height: 0; 
   height: 0; 
} 
#nav { 
   display: inline-block; 
} 
html[xmlns] #nav { 
   display: block; 
} 
  
* html #nav { 
   height: 1%; 
} 
</style> 
<ul id="nav"> 
   <li class="current"><a href="http://designs-ics.es.tl">Menu</a></li> 
   <li><a href="http://designs-ics.es.tl">Menu</a> 
  
      <ul> 
   <li><a href="http://designs-ics.es.tl">Menu</a> 
            <ul> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
  
            </ul> 
         </li> 
   <li><a href="http://designs-ics.es.tl">Menu</a> 
            <ul> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
            </ul> 
         </li> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
  
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
      </ul> 
   </li> 
   <li><a href="#">Menu</a> 
      <ul> 
   <li><a href="http://designs-ics.es.tl">Menu</a> 
            <ul> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
   <li><a href="http://designs-ics.es.tl">Menu</a> 
                  <ul> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
  
                  </ul> 
               </li> 
                
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
            </ul> 
         </li>    
<li><a href="http://designs-ics.es.tl">Menu</a></li> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
  
   <li><a href="http://designs-ics.es.tl">Menu</a> 
            <ul> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
            </ul> 
         </li> 
  
      </ul> 
   </li>    
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
   <li><a href="http://designs-ics.es.tl">Menu</a></li> 
</ul> 
  
<div class="main"> 
<div class="content">



Por abajo 
Código:
<!-- www.designs-icses.tl --> 
</div><div class="sidenav"> 
<h2>Titulo 1</h2><ul> 
   <li><a href="URL">Link's 1</a></li> 
   <li><a href="URL">Link's 2</a></li> 
   <li><a href="URL">Link's 3</a></li> 
   <li><a href="URL">Link's 4</a></li> 
</ul><h2>Titulo 2</h2><ul> 
   <li><a href="URL">Link's 1</a></li> 
   <li><a href="URL">Link's 2</a></li> 
   <li><a href="URL">Link's 3</a></li> 
   <li><a href="URL">Link's 4</a></li> 
</ul><h2>Titulo 3</h2><ul> 
   <li><a href="URL">Link's 1</a></li> 
   <li><a href="URL">Link's 2</a></li> 
   <li><a href="URL">Link's 3</a></li> 
   <li><a href="URL">Link's 4</a></li> 
</ul></div> 
<div class="clearer"><span></span></div></div> 
<div class="footer"><div class="left"> 
© 2008 <a href="index.html">Tu web.es.tl</a>. Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> & <a href="http://validator.w3.org/check?uri=referer">XHTML</a>.</div> 
<div class="right"><a href="http://designs-ics.es.tl">Website template</a> adaptación por: <a href="http://designs-ics.es.tl">designs-ics</a></div> 
<div class="clearer"><span></span></div></div></div>


Css Code 
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;} 
html {min-height: 100%;} 
* {margin: 0;padding: 0;} 
a {color: #963;} 
a:hover {color: #C60;} 
body {background: #CCD8E0 url("http://1.bp.blogspot.com/-GsjzD5MkyVw/TYktk4xe5mI/AAAAAAAACig/dbZPxfsjtlA/s1600/fondos_3d_b2b43.jpg") repeat-x left bottom; 
color: #444;font: normal 62.5% Tahoma,sans-serif;} 
p,code,ul {padding-bottom: 1.2em;} 
li {list-style: none;} 
h1 {font: normal 1.8em Tahoma,sans-serif;margin-bottom: 4px;} 
h1,h2,h3 {padding-top: 6px;} 
.clearer {clear: both;} 
.left {float: left;} 
.right {float: right;} 
/* structure */ 
.container {background: #FFF;font-size: 1.2em;margin: 0 auto; 
padding: 0 10px 10px;width: 780px;} 
.top {background: url("https://img.webme.com/pic/c/cssplantillas/beautiful2.gif") repeat-x;padding: 2px 10px 0;} 
.header {background: #FFF;font-size: 1.2em;height: 150px;margin: 0 auto; 
padding: 10px 10px 5px;width: 780px;} 
.header .left, .header .right {background:#A4A4A0;color:#FFF;height:150px;} 
.header .left {background: #B3C2C7 url("http://filegen.webcindario.com/files/b/c/c/f9fd-d232312345jpg.jpg") no-repeat; 
font: normal 2.8em "Trebuchet MS",sans-serif;line-height: 150px;text-align: center;   width: 564px;} 
.header .right {overflow: auto;width: 212px;} 
.header .right p,.header .right h2 {padding: 0 16px;} 
.header .right h2 {padding-top: 16px; font: normal 1.6em "Trebuchet MS",sans-serif;} 
.navigation {background: #D9E1E5 url("https://img.webme.com/pic/c/cssplantillas/beautiful4.gif");border: 1px solid #DFEEF7;
border-color: #DFEEF7 #CFDEE7;height: 41px;} 
.navigation a {background: #D9E1E5 url("https://img.webme.com/pic/c/cssplantillas/beautiful4.gif"); 
border-right: 1px solid #AFBEC7;color: #456;display: block;float: left; 
font: bold 1.1em sans-serif;line-height: 41px;padding: 0 20px;text-decoration: none;} 
.navigation a:hover {background-position: left bottom; color: #234;} 
.main {border-top: 4px solid #FFF;background: url("https://img.webme.com/pic/c/cssplantillas/beautiful5.gif") repeat-y;} 
.sidenav {float: right;width: 210px;} 
.sidenav h2 {color: #5A5A43;font-size: 1em;line-height: 30px; 
margin: 0;padding-left: 12px;} 
.sidenav ul {padding: 0;border-top: 1px solid #EAEADA;} 
.sidenav li {border-bottom: 1px solid #EAEADA;} 
.sidenav li a {font-size: 1.1em;color: #554;display: block; 
padding: 8px 0 8px 5%;text-decoration: none;width: 95%;} 
.sidenav li a:hover {background: #F0F0EB;color: #654;   } 
.content {float: left;margin: 10px 0;padding: 0 16px;width: 531px;} 
.content .descr {color: #664;font-size: 0.9em;margin-bottom: 6px;} 
.content ul {margin-left: 18px;} 
.content ul li {list-style: url(img/li.gif);} 
.content ol li {list-style: decimal;} 
.content p {font-family: "Lucida Sans Unicode",sans-serif;} 
.footer {background: url("https://img.webme.com/pic/c/cssplantillas/beautiful6.gif") repeat-x;color: #FFF;font: bold 1em sans-serif; 
line-height: 39px;padding: 0 12px;text-align: center;} 
.footer .right {color: #DEF;} 
.footer .right a {color: #DEF; text-decoration: none;} 
.footer a, .footer a:hover,.footer .right a:hover {color: #FFF;}
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis