css6
Andate sul sito it.gg-->la tua scatola delle costruzioni-->impostare design-->selezionare CSS-Design
impostazioni avanzate-->incollare i codici dove richiesto dopo di che cliccare su salva!
<div id="logo">
<h1>Nombre de tu web</h1></div>
<div id="menu"><ul id="main">
<li class="current_page_item"><a href="URL">NOMBRE DEL LINK'S</a></li>
<li><a href="URL">NOMBRE DEL LINK'S</a></li>
<li><a href="URL">NOMBRE DEL LINK'S</a></li>
<li><a href="URL">NOMBRE DEL LINK'S</a></li>
<li><a href="URL">NOMBRE DEL LINK'S</a></li>
<li><a href="URL">NOMBRE DEL LINK'S</a></li>
</ul></div>
<div id="wrapper">
<div id="page">
<div id="sidebar1" class="sidebar">
ul><li>
<h2>Box 1!</h2><ul>
Contenido que tu quieras!
</ul></li>
<li><h2>Box 2!</h2>
Contenido que tu quieras!
</li>
<li><h2>Link's</h2><ul>
<li><a href="URL">NOMBRE DEL LINK'S</a></li>
<li><a href="URL">NOMBRE DEL LINK'S</a></li>
<li><a href="URL">NOMBRE DEL LINK'S</a></li>
<li><a href="URL">NOMBRE DEL LINK'S</a></li>
<li><a href="URL">NOMBRE DEL LINK'S</a></li>
<li><a href="URL">NOMBRE DEL LINK'S</a></li>
<li><a href="URL">NOMBRE DEL LINK'S</a></li>
</ul></li>
<li><h2>Lo más visto...</h2> <ul>
<li><a href="URL">NOMBRE DE LA PAGINA</a></li>
<li><a href="URL">NOMBRE DE LA PAGINA</a></li>
</ul></li></ul></div>
<div id="sidebar2" class="sidebar"><ul><li>
<h2>Buscador</h2>
<center><form id="searchform" method="get" action="#"><div>
<input type="text" name="s" size="15" value="" /><br />
<input type="submit" value="Busca!"/>
</div></form></center></li>
<!--- Fin buscador --->
<li><h2>Box 3!</h2>
Contenido que tu quieras! <li>
<h2>Web Recomendadas</h2><ul>
<li><a href="URL">Link's</a></li>
<li><a href="URL">Link's</a></li>
<li><a href="URL">Link's</a></li>
<li><a href="URL">Link's</a></li>
<li><a href="URL">Link's</a></li>
<li><a href="URL">Link's</a></li>
<li><a href="URL">Link's</a></li>
<li><a href="URL">Link's</a></li>
<li><a href="URL">Link's</a></li>
<li><a href="URL">Link's</a></li>
</ul></li></ul></div>
<div style="clear: both;"></div>
</div> </div>
<div id="footer"><p>
©2008-2009 <a href="URL DE TU WEB">Nombre de tu web</a>. Todos los derechos reservados.
</p></div>
#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;}
#title {display: none;}
#nav_container {display:none;}
table {margin-left:auto;margin-right:auto;}
body {margin:0;padding: 0;
background: #424242 url("https://img.webme.com/pic/c/cssplantillas/blogstyle1.jpg") repeat-x;
font-family:Arial, verdana;font-size: 12px;color:white;}
a {color: #ff9933;}
a:hover {color: yellow}
#logo {width:880px;height: 88px;margin: 0 auto;padding: 0 10px; }
#logo h1, #logo p {float: left;margin: 0;color: #FFFFFF;}
#logo h1 {padding: 30px 0 0 0;text-transform: none;font-weight: normal;font-size: 3em;}
#logo p {text-transform:none;padding: 52px 0 0 3px;font-size: 10px;color: #616161;}
#logo a {border: none;text-decoration: none;color: #FFFFFF; }
#menu {width: 880px;height: 42px;margin: 0 auto;padding-top: 10px; }
#menu ul {margin: 0;padding: 0;list-style: none; }
#menu li {display: inline;}
#menu a {display: block;float: left;margin: 0 3px 0 0;padding: 8px 15px 10px 15px;border: none;text-decoration: none;text-transform: uppercase;font-family: Arial, Helvetica, sans-serif;font-size:10px;color: #CCCCCC;}
#menu a:hover {background: url("https://img.webme.com/pic/c/cssplantillas/blogstyle2.jpg") repeat-x;
margin: 0 3px 0 0;padding: 8px 15px 10px 15px;color: #FFFFFF; }
#menu .current_page_item a {background: url("https://img.webme.com/pic/c/cssplantillas/blogstyle2.jpg") repeat-x;
margin: 0 3px 0 0;padding: 8px 15px 10px 15px;color: #FFFFFF;}
#wrapper {background: #000000;}
#page {width: 880px;margin: 0 auto;padding: 30px 0; }
#page-bg {padding: 11px 24px;background: url("https://img.webme.com/pic/c/cssplantillas/blogstyle3.gif") no-repeat;}
#content {float: left;width: 438px;}
.sidebar {float: left;width: 200px;padding: 0 0 0 21px;}
.sidebar ul {margin: 0;padding: 0;list-style: none;}
.sidebar li {padding: 0 0 20px 0;}
.sidebar li ul { } .sidebar li li {padding: 5px 0 5px 25px;
background: url("https://img.webme.com/pic/c/cssplantillas/blogstyle4.gif") no-repeat 10px 9px; }
.sidebar li h2 {margin: 0 0 10px 0;padding: 5px 10px;border: 1px solid #4A4A4A;color: #CCCCCC;
background: url("https://img.webme.com/pic/c/cssplantillas/blogstyle5.jpg") repeat-x;font-size: 12px;}
#footer {background: #000000 url("https://img.webme.com/pic/c/cssplantillas/blogstyle5.jpg") repeat-x left top;
text-align:center;height:50px;}
<div id="head"> <div id="logo">
<h1><a href="/home.htm">Nombre de tu web</a></h1>
<h2>Sub titulo</h2> </div> <div id="menu"> <ul>
<li><a href="/home.htm">Home</a></li>
<li><a href="URL">Link's</a></li>
<li><a href="URL">Link's</a></li>
<li><a href="URL">Link's</a></li>
<li><a href="URL">Link's</a></li>
</ul></div></div> <div id="page">
<div id="sidebar"><ul><li id="search">
<h2><b class="text1">Buscar</b></h2>
<form method="get" action=""> <fieldset>
<input type="text" id="s" name="s" value="" />
<input type="submit" id="x" value="Search" />
</fieldset></form></li> <li>
<h2>Link's</h2><ul>
<li><a href="URL LINK'S">Link's</a></li>
<li><a href="URL LINK'S">Link's</a></li>
<li><a href="URL LINK'S">Link's</a></li>
<li><a href="URL LINK'S">Link's</a></li>
<li><a href="URL LINK'S">Link's</a></li>
<li><a href="URL LINK'S">Link's</a></li>
<li><a href="URL LINK'S">Link's</a></li>
</ul></li><li>
<h2>Favoritos</h2> <ul>
<li><a href="URL LINK'S">Link's</a></li>
<li><a href="URL LINK'S">Link's</a></li>
<li><a href="URL LINK'S">Link's</a></li>
<li><a href="URL LINK'S">Link's</a></li>
<li><a href="URL LINK'S">Link's</a></li>
<li><a href="URL LINK'S">Link's</a></li>
<li><a href="URL LINK'S">Link's</a></li>
</ul></li><li>
<h2>Contenido</h2>
<center>Pone aqui lo que tu quieras!!<br> <center>Pone aqui lo que tu quieras!!<br> <center>Pone aqui lo que tu quieras!!<br> <center>Pone aqui lo que tu quieras!!<br> <center>Pone aqui lo que tu quieras!!<br>
</li></ul></div>
<div style="clear: both;"></div></div>
<div id="footer"><div id="footer-menu"> <ul>
<li><a href="URL">Inicio</a></li>
<li><a href="URL">Link's</a></li>
<li><a href="URL">Link's</a></li>
<li><a href="URL">Link's</a></li>
<li><a href="URL">Link's</a></li>
</ul></div><p id="legal">
(c) 2009 <a href="http://tuweb.es.tl">Nombre de tu web</a>. Diseño por: <a href="http://freecsstemplates.org/">Free CSS Templates</a> Adaptada por <a href="http://cssplantillas.es.tl">CssPlantillas.es.tl</a></p></div><!--- Por favor no borres esto sino estarias violando los derechos del autor --->
#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;}
body {background: url("https://img.webme.com/pic/c/cssplantillas/excess1.gif") repeat-x left top;
font-family: Arial;font-size: 12px;color: #6D6D6D;margin-top: 20px;padding: 0;}
h1, h2, h3 {margin: 0;text-transform: lowercase;font-family:Georgia;font-weight: normal;color: #006EA6; }
h1 {letter-spacing: -1px;font-size: 35px; }
h2 {font-size: 26px; }
p, ul, ol {margin: 0 0 2em 0;text-align: justify;line-height: 26px; }
a:link {color: #0094E0; } a:hover, a:active {text-decoration: none;color: #0094E0;}
a:visited {color: #0094E0; } img {border: none; } img.left {float: left;margin: 7px 15px 0 0;}
img.right {float: right;margin: 7px 0 0 15px; }
form {margin: 0;padding: 0; }
fieldset {margin: 0;padding: 0;border: none;}
legend {display: none; }
input, textarea, select {font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;font-size: 13px;color: #333333;}
#wrapper { }
#head {width: 900px;height: 130px;margin: 0 auto 10px auto;padding-top: 10px; }
#logo {float: left;height: 90px;background: url("https://img.webme.com/pic/c/cssplantillas/excess2.gif") no-repeat left top; }
#logo h1 {margin: 0;padding: 5px 0 0 100px;font-size: 40px;color: #0099E8;}
#logo h1 sup {vertical-align: text-top;font-size: 24px; }
#logo h1 a {color: #5F9D10;}
#logo h2 {margin: 0;padding: 0 0 0 100px;text-transform: uppercase;font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #6D6D6D; }
#logo a { text-decoration: none; color: #FFFFFF; }
#menu {float: right;padding-top: 30px; }
#menu ul {margin: 0;padding: 0;list-style: none; }
#menu li {display: inline;}
#menu a {display: block;float: left;margin-left:5px;
background: url("https://img.webme.com/pic/c/cssplantillas/excess3.gif") repeat-x left top;
padding: 1px 10px;text-decoration: none;font-size: 12px;color: #FFFFFF; }
#menu a:hover {text-decoration: underline;}
#menu .active a { }
#page {width: 900px;margin: 0 auto;background: url("https://img.webme.com/pic/c/cssplantillas/excess4.jpg") no-repeat left top;}
#content {float: left;width: 570px;padding: 30px 0 0 30px; }
#sidebar {float: right;width: 230px;padding-right: 30px;padding-top: 20px; }
#sidebar ul {margin: 0;padding: 10px 0 0 0;list-style: none;}
#sidebar li {margin-bottom: 40px; }
#sidebar li ul {}
#sidebar li li {margin: 0;padding: 3px 0;border-bottom: 1px dashed #D1D1D1;}
#sidebar li li a {margin: 0;padding-left: 15px;}
#sidebar h2 {padding-bottom: 5px;font-size: 18px;font-weight: normal;color: #0094E0;}
#sidebar strong, #sidebar b {color: #8BCB2F;}
#sidebar a {text-decoration: none;color: #6D6D6D;}
#search { }
#search h2 { }
#s {width: 150px;margin-right: 5px;padding: 3px;border: 1px solid #F0F0F0; }
#x {padding: 3px;border: none;text-transform: lowercase;font-size: 11px;color: #4F4F4F; }
.box1 {padding: 20px; }
.box2 {color: #BABABA;}
.box2 h2 {margin-bottom: 15px;font-size: 16px;color: #FFFFFF; }
.box2 ul {margin: 0;padding: 0;list-style: none; }
.box2 a:link, .box2 a:hover, .box2 a:active, .box2 a:visited {color: #EDEDED;}
#footer {background: url("https://img.webme.com/pic/c/cssplantillas/excess4.jpg") no-repeat left top;
margin: 0 auto;padding: 10px 0 0 60px;color: #353535;width: 900px;}
html>body #footer {height: auto;}
#footer-menu {}
#legal {clear:both;font-size: 11px;color: #6D6D6D;}
#legal a {color: #0094E0;}
#footer-menu {float: left;color: #353535;text-transform: capitalize;}
#footer-menu ul {margin: 0;padding: 0;list-style: none; }
#footer-menu li {display: inline; }
#footer-menu a {display: block;float: left;padding: 1px 15px 1px 15px;text-decoration: none;font-size: 11px;color: #6D6D6D;}
#footer-menu a:hover {text-decoration: underline;}
#footer-menu .active a {padding-left: 0;}
<!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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://img40.xooimage.com/files/6/e/e/jquery-1.1.3.1.min-e3f843.js"></script>
<script type="text/javascript" src="http://img44.xooimage.com/files/8/c/3/jquery.easing.min-e3f849.js"></script>
<script type="text/javascript" src="http://img22.xooimage.com/files/5/1/1/jquery.lavalamp.min-e3f873.js"></script>
<script type="text/javascript">
$(function() {
$("#1, #2, #3").lavaLamp({
fx: "backout",
speed: 700,
click: function(event, menuItem) {
return true;
}
});
});
</script>
<link href="http://img20.xooimage.com/files/a/b/8/lavalamp-e9085b.css" rel="stylesheet" type="text/css" />
<div id="wrap">
<div id="topbg"> </div>
<div id="wrap2">
<div id="topbar">
<h1 id="sitename"><a href="http://www.free-css.com/">Tu web </a> <span class="description">Just another free CSS Template</span></h1>
<div id="searchbar">
<form href="http://www.free-css.com/" class="searchform">
<p>
<input name="s" type="text" class="textbox" value="Keyword .... " />
</p>
</form>
</div>
</div>
<div id="header">
<div id="headercontent"> </div>
<div id="topnav">
<ul class="lavaLampWithImage" id="1">
<li class="current"><a href="http://www.free-css.com/">Home</a></li>
<li><a href="styles.html">Styles</a></li>
<li><a href="notes.html">Notes</a></li>
<li><a href="credits.html">Credits</a></li>
<li><a href="http://www.free-css.com/">Dummy Link</a></li>
<li><a href="http://www.free-css.com/">Nogo Link</a></li>
</ul>
</div>
</div>
<div id="content2">
<div id="left">
<div class="post">
</div>
</div>
<div id="sidebar" style="position:absolute;left:45px;top:300px;">
<h3>Categories</h3>
<ul>
<li class="cat-item"><a href="http://www.free-css.com/">Lorem Ipsum </a></li>
<li class="cat-item"><a href="http://www.free-css.com/">Apple Macintosh </a></li>
<li class="cat-item"><a href="http://www.free-css.com/">Linux Ubuntu </a></li>
<li class="cat-item"><a href="http://www.free-css.com/">Wordpress Themes</a></li>
<li class="cat-item"><a href="http://www.free-css.com/">XHTML Themes</a></li>
<li class="cat-item"><a href="http://www.free-css.com/">Free Releases </a></li>
</ul>
<h3>Archives</h3>
<ul>
<li><a href="http://www.free-css.com/">March 2008</a></li>
<li><a href="http://www.free-css.com/">February 2008</a></li>
<li><a href="http://www.free-css.com/">January 2008</a></li>
<li><a href="http://www.free-css.com/">December 2007</a></li>
</ul>
<h3>Links</h3>
<ul>
<li><a href="http://www.free-css.com/">Development Blog</a></li>
<li><a href="http://www.free-css.com/">Documentation</a></li>
<li><a href="http://www.free-css.com/">Plugins</a></li>
<li><a href="http://www.free-css.com/">Suggest Ideas</a></li>
<li><a href="http://www.free-css.com/">Support Forum</a></li>
<li><a href="http://www.free-css.com/">Themes</a></li>
</ul>
<h3>Meta</h3>
<ul>
<li><a href="http://www.free-css.com/">Log in</a></li>
<li><a href="http://www.free-css.com/">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
<li><a href="http://www.free-css.com/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://www.free-css.com/">WordPress</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="footer"> Copyright © El nombre de tu web | <a href="http://www.free-css.com/">Put</a> | <a href="http://www.free-css.com/">Some</a> | <a href="http://www.free-css.com/">Links</a> | <a href="http://www.free-css.com/">Here</a>
<div class="credit"><a href="http://ramblingsoul.com">CSS Template</a> by ramblingsoul adaptado por WarioTeAyuda</div>
</div>
</div>
<div id="btmbg"> </div>
</div>
#content {
clear: both;
width: 530px;
}
lli.nav_element{display: none;}
li.nav_element a{display: none;}
#extraDiv1 {display: none;}
#extraDiv2 {display: none;}
#extraDiv3 {display: none;}
#extraDiv4 {display: none;}
#extraDiv5 {display: none;}
#extraDiv6 {display: none;}
#pre_header {display: none;}
#post_header {display: none;}
#pre_content {display: none;}
#nav_heading{display: none;}
div.header{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
#counter {
position: absolute;
left: 23%;
top:52px;
margin-left: 300px;
width: 450px;
height:20px;
}
* { padding:0; margin:0;}
#footer .credit {
padding: 5px;
font: 10px Georgia, "Times New Roman", Times, serif;
}
ul { list-style:none;}
body {background: #036 url(http://www.fileden.com/files/2008/12/9/2217600/bg.jpg) fixed center center repeat-y; font: .75em Verdana, Arial, Helvetica, sans-serif; color:#333;}
#wrap {width:973px; margin:auto;}
h1, h2, h3, .subhead, .heading {font-family:Georgia, "Times New Roman", Times, serif;}
h1 { font-size: 2em; font-weight:normal;}
h2 { font-size: 1.5em; font-weight:normal;}
h3 {font-size: 1.2em; font-weight:normal;}
.clear {clear:both;}
.leftalign {float:left;}
.rightalign {float:right;}
.centeralign { margin:5px auto 5px auto;}
img.leftalign, img.rightalign, img.centeralign {display:block; padding:5px; background:#fff; border:solid 1px #ddd; margin:5px; }
a {color:#000; text-decoration:none;}
a:visited { color:#333; text-decoration:none;}
a:hover {color:#036; text-decoration:none;}
#wrap2 {background:url(http://www.fileden.com/files/2008/12/9/2217600/pagebg.png) repeat-y; padding:0 7px 0 7px;}
#topbar {background: url(http://www.fileden.com/files/2008/12/9/2217600/topbar.jpg) no-repeat; height:59px; padding:10px;}
#header {background:url(http://www.fileden.com/files/2008/12/9/2217600/header.jpg) no-repeat; height:169px;}
#footer {background: url(http://www.fileden.com/files/2008/12/9/2217600/footer.jpg) no-repeat; height:44px; width:937px; padding:10px; margin:auto; text-align:center;}
#content2 { background: url(http://www.fileden.com/files/2008/12/9/2217600/contengbg.jpg) 666px 0 repeat-y; padding:10px;}
#topbg {background:url(http://www.fileden.com/files/2008/12/9/2217600/topbg.png) no-repeat; height:14px;}
#btmbg {background:url(http://www.fileden.com/files/2008/12/9/2217600/btmbg.png) no-repeat; height:13px;}
#headercontent {height:120px;}
#topnav {background:url(http://www.fileden.com/files/2008/12/9/2217600/menubar.png) no-repeat; height:29px; width:916px; margin:auto;}
#searchbar {background:url(http://www.fileden.com/files/2008/12/9/2217600/searchbar.png) no-repeat; width:431px; height:34px; float:right; margin:16px 10px 0 0;}
.searchform {
padding-left: 80px;
padding-top: 4px;
}
.textbox {
display: block;
height: 22px;
padding: 5px 8px 0 5px;
width: 298px;
background: transparent;
border-style: none;
border-width: 0px;
}
.textbox:focus {border:none;}
#sitename {
font: bold 24px "Trebuchet MS", Arial, Halvetica, sans-serif;
display: block;
float: left;
padding-top: 10px;
color: #2E2E2E;
}
#sitename .description {
display: block;
font: normal 12px Georgia, "Times New Roman", Times, serif;
color: #333;
}
#sitename a { color:#000; background:none; }
#sitename a:hover {color:#999; background:none;}
#left {width:650px; float:left;}#content2 #sidebar {
margin-left: 658px;
}
#left .post {width:641px; margin: 0 auto 15px auto;}
#left .post p {line-height:18px; margin-bottom:18px;}
#left .post .postheader {background: url(http://www.fileden.com/files/2008/12/9/2217600/postheader.jpg) no-repeat; height:27px;}
#left .post .postcontent {background:url(http://www.fileden.com/files/2008/12/9/2217600/postbg.jpg) repeat-y; padding:10px 25px 10px 25px;}
#left .post .postbottom {background: url(http://www.fileden.com/files/2008/12/9/2217600/postbottom.jpg) no-repeat; height:86px;}
#sidebar ul { display:block; padding: 5px 5px 5px 8px;}
#sidebar ul li {display:block; padding:3px; }
#sidebar li a { background:url(http://www.fileden.com/files/2008/12/9/2217600/sidemenunrml.jpg) 2px 2px no-repeat; padding: 0 10px 0 25px;}
#sidebar li a:hover {background:url(http://www.fileden.com/files/2008/12/9/2217600/sidemenuhover2.jpg) 2px 2px no-repeat; color:#000;}
#sidebar h3 {display:block; font: 1.5em "Trebuchet MS", Arial, Halvetica, sans-serif ; color:#333; padding:5px 5px 0 8px;}
#sidebar .cat-item { height:26px; padding:0!important;}
#sidebar .cat-item a {display:block; height:20px; padding:5px 10px 0 20px; border-bottom: solid 1px #A4BBDD; background:url(http://www.fileden.com/files/2008/12/9/2217600/sidemenunrml.jpg) 2px 5px no-repeat; color:#333; }
#sidebar .cat-item a:visited, #sidebar .cat-item a:active {color:#333;}
#sidebar .cat-item a:hover {background:url(http://www.fileden.com/files/2008/12/9/2217600/sidemenuhover.jpg) no-repeat; color:#fff;}
.post h2 {color:#000; display:block; padding-bottom:18px;}
.postmeta {display:block; padding:15px 10px 0 25px;}
.postbottom .postmeta li {display: block; float:left; height:15px; padding:5px 8px 1px 25px; margin-right:10px; }
.permalink {background:url(http://www.fileden.com/files/2008/12/9/2217600/ico_permalink.jpg) no-repeat; }
.category_link { background:url(http://www.fileden.com/files/2008/12/9/2217600/ico_category.jpg) no-repeat;}
.comments_link{ background:url(http://www.fileden.com/files/2008/12/9/2217600/ico_comments.jpg) no-repeat;}
#left a, #left a:visited, #left a:active {background:#ffc;}
#left a:hover { background:#ffd;}
.post .date {display:block; padding:3px 5px 3px 18px; font-size:10px; color:#666; background:url(images/icodate.jpg) no-repeat;}
.postcontent ul {margin:15px;}
.postcontent ul li {background:url(http://www.fileden.com/files/2008/12/9/2217600/bullet.png) 2px 10px no-repeat; padding:5px 5px 5px 15px ; display:block; }
.postcontent ol {list-style-position:outside; list-style:decimal; margin-left:35px;}
.postcontent ol li {padding:5px;}
blockquote {display:block; padding:5px; margin:15px; font: 1.2em Georgia, "Times New Roman", Times, serif; color:#036; border-bottom: dashed 1px #ddd; border-top: dashed 1px #ddd; text-align:center;}
blockquote.leftalign {float:left; width:300px; text-align:right; margin:10px;}
blockquote.rightalign {float:right; width:300px; text-align:left; margin:10px;}#comments #commentcontent label {
display: block;
padding: 3px;
}
#wrap #wrap2 #content2 #left .post .postcontent #comments #commentcontent li {
display: block;
padding: 5px;
margin-bottom: 5px;
background: #fff;
list-style: none;
}
#wrap #wrap2 #content2 #left .post .postcontent #comments #commentcontent .odd {
background: #D3DEED;
}
<div id="wrapper"><div id="head-wrapper">
<div id="head"><div id="logo">
<h1><a href="/home.htm">Css Plantillas</a></h1>
<p>Recursos web!</p>
</div>
<div id="search">
<form method="get" action=""><fieldset>
<input type="text" name="s" id="search-text" size="15" value="Escribe lo que buscas" />
<input type="submit" id="search-submit" value="GO" />
</fieldset></form></div>
</div></div>
<div id="menu"><ul>
<li><a href="http://tuweb.es.tl/inicio.htm">Inicio</a></li>
<li><a href="http://tuweb.es.tl/Link's2.htm">Blog</a></li>
<li><a href="http://tuweb.es.tl/Link's2.htm">Foro</a></li>
<li><a href="http://tuweb.es.tl/Link's2.htm">Videos</a></li>
<li><a href="http://tuweb.es.tl/Link's2.htm">Imagenes</a></li>
<li><a href="http://tuweb.es.tl/Link's2.htm">Contacto</a></li>
</ul></div><!-- end #menu -->
<div id="page">
<div id="page-bgtop">
<div id="page-bgbtm">
<div id="sidebar"><ul><li>
<h2>Css Plantillas!</h2>
<p>Te ofrece los mejores recursos para tu web, </p>
</li><li>
<h2>Categorias</h2><ul>
<li><a href="URL">Recursos web</a></li>
<li><a href="URL">Descargas gratis</a></li>
<li><a href="URL">Juegos de autos</a></li>
<li><a href="URL">Suspendisse iaculis mauris</a></li>
<li><a href="URL">Urnanet non molestie semper</a></li>
<li><a href="URL">Proin gravida orci porttitor</a></li>
</ul></li><li>
<h2>Paginas amigas</h2><ul>
<li><a href="http://cssplantillas.es.tl">Css Plantillas</a></li>
<li><a href="URL">Pagina amiga 2</a></li>
<li><a href="URL">Pagina amiga 3</a></li>
<li><a href="URL">Pagina amiga 4</a></li>
<li><a href="URL">Pagina amiga 5</a></li>
<li><a href="URL">Pagina amiga 6</a></li>
</ul></li><li>
<h2>Archives</h2><ul>
<li><a href="URL">Aliquam libero</a></li>
<li><a href="URL">Consectetuer adipiscing elit</a></li>
<li><a href="URL">Metus aliquam pellentesque</a></li>
<li><a href="URL">Suspendisse iaculis mauris</a></li>
<li><a href="URL">Urnanet non molestie semper</a></li>
<li><a href="URL">Proin gravida orci porttitor</a></li>
</ul></li></ul>
</div>
<div style="clear: both;"></div>
</div></div></div></div>
<div id="footer-wrapper">
<div id="footer">
<p>Copyright (c) 2009 Tusitioweb.es.tl. Todos los derechos reservados. Design by <a href="http://www.freecsstemplates.org">Free CSS Templates</a>. Gracias a <a href="http://cssplantillas.es.tl">Css Plantillas</p>
</div></div>
#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;}
body {margin: 0;padding: 0;background: #1B120B;
font-family: Arial, Helvetica, sans-serif;font-size: 12px;color: #787878;}
h1, h2, h3 {margin: 0;padding: 0;font-family: Georgia, "Times New Roman";
font-weight: normal;color: #181818;}
h1 {font-size: 2em;}
h2 {font-size: 1.8em;}
h3 {font-size: 1.6em;}
p, ul, ol {margin-top: 0;line-height: 180%;}
ul, ol {}
a {text-decoration: none;color: #B94E0E;}
a:hover {}
#wrapper {margin: 0 auto;padding: 0;
background: url("https://img.webme.com/pic/c/cssplantillas/bamboo5.jpg") repeat-x left top;}
#head-wrapper {}
#head {width: 960px;height: 240px;margin: 0 auto;
background: url("https://img.webme.com/pic/c/cssplantillas/bamboo2.jpg") no-repeat left top;}
/* Logo */
#logo {float: left;height: 240px;margin: 0;
padding: 0px;color: #FFFFFF;}
#logo h1, #logo p {margin: 0;padding: 0;}
#logo h1 {float: left;padding-left: 25px;
letter-spacing: -1px;font-size: 2.6em;}
#logo p {float: left;margin: 0;padding: 12px 0 0 10px;
font: normal 14px Georgia, "Times New Roman", Times, serif;font-style: italic;}
#logo a {border: none;background: none;text-decoration: none;color: #FFFFFF;}
#search {float: right;width: 279px;height: 110px;padding: 0;}
#search form {height: 41px;margin: 0;padding: 10px 0 0 30px;}
#search fieldset {margin: 0;padding: 0;border: none;}
#search-text {width: 195px;padding: 6px 10px;border: 1px #4C4842 solid;
background: none;text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;color: #808080;}
#search-submit {display: none;}
/* Menu */
#menu {width: 960px;height: 40px;margin: 0 auto;padding: 0;
background: url("https://img.webme.com/pic/c/cssplantillas/bamboo3.jpg") repeat-x left top;}
#menu ul {margin: 0;padding: 0px 0px 0px 25px;list-style: none;line-height: normal;}
#menu li {float: left;}
#menu a {display: block;height: 18px;margin-right: 3px;padding: 12px 40px 0px 40px;
background: url("https://img.webme.com/pic/c/cssplantillas/bamboo6.jpg") no-repeat right 10px;
text-decoration: none;font-family: Arial, Helvetica, sans-serif;
font-size: 12px;font-weight: normal;color: #FFFFFF;border: none;}
#menu a:hover, #menu .current_page_item a {}
#menu .current_page_item a {padding-left: 0;}
#menu a:hover {text-decoration: underline;}
#page {width: 960px;margin: 0 auto;padding: 0;
background: url("https://img.webme.com/pic/c/cssplantillas/bamboo4.jpg") repeat-y left top;}
#page-bgtop {}
#page-bgbtm {padding: 0px 20px 0px 20px;}
/* Content */
#content {float: left;width: 640px;padding: 0;color:#333;padding-top:10px;}
/* Sidebar */
#sidebar {float: right;width: 250px;padding: 10px 0px 0px 0px;color: #787878;}
#sidebar ul {margin: 0;padding: 0;list-style: none;}
#sidebar li {margin: 0;padding: 0;}
#sidebar li ul {margin: 0px 15px;padding-bottom: 30px;}
#sidebar li li {line-height: 35px;border-bottom: 1px dashed #D1D1D1;padding-left: 15px;}
#sidebar li li span {display: block;margin-top: -20px;padding: 0;
font-size: 11px;font-style: italic;}
#sidebar h2 {height: 38px;padding: 12px 0 0 15px;
letter-spacing: -.5px;color: #181818;}
#sidebar p {margin: 0 0px;padding: 0px 20px 20px 20px;text-align: justify;}
#sidebar a {border: none;color: #B94E0E;}
#sidebar a:hover {text-decoration: underline;}
/* Footer */
#footer-wrapper {width: 100%;background: #231202;}
#footer {width: 960px;height: 100px;margin: 0 auto;padding: 0px 0 15px 0;
background: url("https://img.webme.com/pic/c/cssplantillas/bamboo1.jpg") repeat-x left top;
font-family: Arial, Helvetica, sans-serif;}
#footer p {margin: 0;padding-top: 40px;line-height: normal;
font-size: 9px;text-align: center;color: #D78983;}
#footer a {color: #FFDBD9;}
<style type="text/css">
#header-in {background-image: url("URL DE TU CABEZAL");/* Aqui pon tu cabezal 900px x 119px */}
</style>
<div id="wrapper"><div id="head">
<div id="header-in"></div><a href="" class="hidden"></a>
<ul id="menu">
<li><a href="/" class="active">Portada</a></li>
<li><a href="#">Quienes somos</a></li>
<li><a href="#">Sevicios</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Contacto</a></li>
</ul></div>
<div class="bar"></div>
<hr class="noscreen" />
<div id="skip-menu"></div>
<div class="content"><div class="column-left">
<div class="column-left-in">
<div class="box1"><div class="box1-in">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce quis leo. Nunc est lacus…<br>
<a href="#">Leer mas..</a>
</div></div>
<div class="box2"><div class="box2-in">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce quis leo. Nunc est lacus…<br>
<a href="#">Leer mas..</a>
</div></div>
</div></div>
<hr class="noscreen" />
<div class="column-right">
<div class="column-right-in"><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>
<li><a href="URL">Link's 5</a></li>
<li><a href="URL">Link's 6</a></li>
</ul>
<div class="address"><!-- Box debajo del menu -->
Pon aqui el contenido que quieras
</div></div>
</div>
<div class="cleaner"></div>
</div>
<hr class="noscreen" />
<div id="footer"><ul>
<li><a href="/" class="active">Portada</a>|</li>
<li><a href="#">Quienes somos</a>|</li>
<li><a href="#">Servicios</a>|</li>
<li><a href="#">Videos</a>|</li>
<li><a href="#">Contacto</a>|</li>
</ul>
<p class="cop">Copyright © 2009 <a href="URL">Tu web</a>. Todos los derechos reservados.</p>
</div>
<!-- Por favor NO BORRAR esto -->
<div style="color:#ccc;text-align:center;">Diseño por: <a href="http://cssplantillas.es.tl" target="url">
<font color="#cccccc">Css Plantillas</font></div>
#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%; font-size: 62.5% }
body {height: 100%;background:#454545;
text-align: center;font: 1.2em Verdana, Arial, Helvetica, sans-serif;}
a:link, a:visited {color: #005890;text-decoration: none;font-weight: bolder;}
a:hover{text-decoration: none;}
div.address {background: #eaeaea;border: 1px solid #ccc;margin: 40px 10px 0 20px;}
.noscreen {display: none;}
.cleaner {clear: both;height: 0;font-size: 0;visibility: hidden;}
.hidden {position: absolute;top: -10000px;left: 0;width: 1px;
height: 1px;overflow: hidden;}
#wrapper {width: 900px;margin: 0px auto 0 auto;padding-bottom: 10px;}
h1 {font-size: 1.8em;color: #8DE0FF;position: relative;z-index: 2;}
h1 a:link, h1 a:visited {text-decoration: none;color: #8DE0FF;}
h2 {font: 1.4em Georgia, "Times New Roman", Times, serif;
color: #1473B0;letter-spacing: 1px;margin-bottom: 5px;
border-bottom: 1px dotted #1473B0;padding-bottom: 3px;}
p {line-height: 1.7;}
#head {width: 900px;height: 173px;
margin: 0 auto;position: relative;text-align: left;}
#head p.title {color: white;line-height: 1.8;position: relative;z-index: 2;}
#header-in {position: absolute;
width: 900px;height: 119px;bottom: 0;left: 0;}
#header-in p {font: 2.1em Georgia, "Times New Roman", Times, serif;color: white;
position: absolute;top: 34px;left: 175px;letter-spacing: 1px;}
.bar {width: 900px;height: 12px;background:#2B2B2B;}
#menu {position: absolute;top: 20px;right: 8px;z-index: 3;}
#menu li {float: left;display: inline;list-style-type: none;}
#menu li a {float: left;display: inline;list-style-type: none;text-align: center;
color: #FFFFFF;font-weight: normal;text-decoration: none;
background-color: #202020;padding: 0 0.8em;height: 31px;
line-height: 30px;margin-left: 4px;border-top: 3px solid black;}
#menu li a:hover, #menu li a.active {background-color: #0D0D0D;
color: #FFFFFF;border-top: 3px solid #00A7ED;text-decoration: none;}
.content {width: 900px;background-color: white;}
.column-left {float: left;width: 66%;text-align: left;}
.column-right {float: right;width: 33%;text-align: center;}
.column-left-in {margin: 1.3em 1em 3em 1.5em;}
.column-right-in {margin: 1.3em 2.8em 3em 2em;}
.column-right ul {margin: 10px 10px 0 20px;list-style-type: none;}
.column-right ul li {display: block;}
.column-right ul li a, .column-right ul li a:visited {
color: #3A3A3A;font-weight: normal;text-decoration: none;background:#fafafa;
display: block;padding: 10px 0;border-bottom: 1px solid #ccc;}
.column-right ul li a:hover, .column-right ul li a.active {
color:#333;border-bottom: 1px solid #999;background:#eaeaea;}
.box1 {float: left;background-color: #eaeaea;
border: 1px solid #ccc;width: 270px;margin: 20px 13px 0 0;}
.box2 {float: left;background-color: #eaeaea;
border: 1px solid #ccc;width: 270px;margin: 20px 0 0 0;}
.box1-in, .box2-in {margin: 0.4em 0.8em 1.3em 0.8em;}
#footer {width: 900px;height: 92px;background:#2B2B2B;border-bottom: 3px solid #101010;}
#footer a:link, #footer a:visited {color: #FFFFFF;
font-weight: normal;}
#footer ul {list-style-type: none;color: #FFFFFF;padding: 13px 0 0 10px;
text-align: left;font-size: 0.9em;float: left;width: 430px;}
#footer ul li {float: left;display: inline;white-space: nowrap;}
#footer ul li a, #footer ul li a:visited {margin: 0 6px;}
#footer p.cop {font-size: 0.9em;color: #FFFFFF;float: right;padding: 12px 16px 0 0;
margin: 0;line-height: 1.6;}
p.mantis-a {color: #C0C0C0;font-size: 0.9em;
margin: 7px 8px 10px 0;line-height: 1;text-align: right;}
p.mantis-a a, p.mantis-a a:visited {color: #C0C0C0;font-weight: normal;}
p.mantis-a a:hover {color: #FFFFFF;}
<div id="container"><div id="nav"><ul>
<li><a href="URL">Portada</a></li>
<li><a href="URL">Quienes somos</a></li>
<li><a href="URL">Nuestro servicios</a></li>
<li><a href="URL">Videos</a></li>
<li class="lastnav"><a href="URL">Contactos</a></li>
</ul></div>
<div id="body"><div id="left">
<div id="menu">
<span class="tab">Miembros</span>
<span class="tag">Login</span><ul>
<li><a href="URL">Iniciar sesión</a></li>
<li><a href="URL">Carrar sesión</a></li>
<li><a href="URL">Registrarse</a></li>
</ul>
<span class="tab">Paginas amigas!</span><ul>
<li><a href="http://cssplantillas.es.tl">Css Plantillas</a></li>
<li><a href="URL">Pagina amiga 2</a></li>
<li><a href="URL">Pagina amiga 3</a></li>
<li><a href="URL">Pagina amiga 4</a></li>
</ul>
<ul>
<li><a href="URL">Template Beauty</a></li>
<li><a href="URL">View all link partners</a></li>
<li><a href="URL">Become a link partner!</a></li>
</ul>
<span class="tab">Archivos</span>
<span class="tag">Listado</span><ul>
<li><a href="URL">Mayo</a></li>
<li><a href="URL">Junio</a></li>
<li><a href="URL">Julio</a></li>
<li><a href="URL">Agosto</a></li>
</ul></div><br /></div>
<div id="right"><div id="head"></div>
<div class="textboxtop"></div>
<div class="textboxbottom"></div>
<div id="copyright">
Copyright © 2009 Tuweb.es.tl - Diseño por: <a href="http://cssplantillas.es.tl" target="url">Css Plantillas</a>
</div></div>
</div></div>
#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;}
body {background: #C0617F url("https://img.webme.com/pic/c/cssplantillas/ping2.gif") repeat-x;
color: #2D2D2D;font-family: tahoma, arial, verdana;
font-size: 11px;margin: 0px;padding: 0px;text-align: center;}
img {border: 0px;}
a:link { color: #FDBDD2;font-weight: bold;text-decoration: none;}
a:visited { color: #FDBDD2;font-weight: bold;text-decoration: none; }
a:hover, a:active { color: #FFFFFF;font-weight: bold;text-decoration: underline;}
#head {height:337px;display:block;width:570px;margin-right:0px;
background-image: url("https://img.webme.com/pic/c/cssplantillas/ping1.jpg"); /* Cambia esta imagen para cambiar de cabezal*/
background-repeat: no-repeat;background-position: right top;z-index:2;
overflow:hidden;}
#head a {position:absolute;top:322px;right:48px;width:50px;
height:20px;z-index:3;display:inline;}
#container {margin: 0px auto;text-align: left;width: 780px;position:relative;}
#copyright {clear: both;color: #FFFFFF;font-size: 10px;
margin-bottom: 10px;padding-right: 15px;text-align: center; }
.photo {float: right;margin-left: 10px;margin-right: 10px;
padding:5px;border: 1px solid #ca738f; }
.photo img{border: 1px solid #df8fa9;}
#left {float: left;padding-top: 110px;width: 210px;}
#menu {background: url("https://img.webme.com/pic/c/cssplantillas/ping3.gif") no-repeat;
clear: both;display: block;height: 551px;padding-top: 10px;width: 190px;}
#menu ul {list-style: none;margin: 0px;margin-left: 4px;
margin-bottom: 10px;margin-top: 8px;padding: 0px;}
#menu li {background: url("https://img.webme.com/pic/c/cssplantillas/ping4.gif") no-repeat;
display: block;font-size: 10px;height: 17px;list-style: none;
margin: 0px;padding: 0px;padding-left: 25px;padding-top: 1px;width: 157px;}
#nav {clear: both;height: 50px;width: 700px;position:absolute;margin-left:40px;}
#nav ul {list-style: none;margin: 20px 0px 0px 0px;padding: 0px;width:700px;
z-index:15;position:absolute;text-align:center;}
#nav li {list-style: none;float:left;margin: 0px;padding: 0px;
display:inline;border-right: 1px solid #c0617f;}
#nav a {font-family: Arial, Helvetica, sans-serif;font-size: 14px;font-weight: bold;
font-variant: normal;color: #FFFFFF;text-decoration: none;display:inline;text-transform: uppercase;
padding: 20px 20px 10px 20px;}
#nav a:hover {color:#df8fa9;text-decoration:underline;}
#right {float: left;width: 560px;}
#right a{text-decoration:underline;}
.tab {background: url("https://img.webme.com/pic/c/cssplantillas/ping5.gif") no-repeat;color: #F2BCCE;display: block;
font-family: arial;font-size: 15px;font-weight: bold;height: 18px;letter-spacing: -1px;
padding-left: 10px;padding-top: 3px;margin-bottom: 8px;margin-left: 7px;width: 166px;}
.tab2 {background: url("https://img.webme.com/pic/c/cssplantillas/ping6.gif") no-repeat;
display: block;font-size: 10px;
height: 17px;padding-top: 4px;padding-left: 10px;width: 179px;}
.tag {color: #F5E6EB;font-size: 12px;font-weight: bold;margin-left: 25px; }
.textboxtop,.textboxtop2{color: #F2BCCE;display: block;font-size: 19px;
font-weight: bold;height: 33px;letter-spacing: -1px;margin-left: 8px;
padding-left: 20px;padding-top: 11px;width: 526px;text-transform: uppercase;}
.textboxtop{background: url("https://img.webme.com/pic/c/cssplantillas/ping7.gif") no-repeat;}
.textboxtop2 {background: url("https://img.webme.com/pic/c/cssplantillas/ping8.gif") no-repeat;}
#content {background: #C0617F url("https://img.webme.com/pic/c/cssplantillas/ping9.gif") no-repeat;
border-left: 1px solid #DF8FA9;border-right: 1px solid #DF8FA9;color: #F0C5D2;
margin-left: 8px;padding-left: 20px;padding-right: 10px;padding-top: 20px;
width: 514px;padding-bottom:10px;}
.textboxbottom {background: url("https://img.webme.com/pic/c/cssplantillas/ping10.gif") no-repeat;
color: #FFFFFF;display: block;font-weight: bold;height: 23px;
margin-bottom: 10px;margin-left: 8px;padding-right: 15px;
padding-top: 5px;text-align: right;width: 531px;}
.lastnav{border-right: 0px none #c0617f !important;}
Inserire un commento su questa pagina: