Just
Por encima de la página- 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>Just Lucid Design</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles/style.css" media="screen" title="style (screen)" />
</head>
<body>
<div id="wrap"> <img class="topleft" src="images/wings.jpg" alt=""/>
<div class="head">JUST LUCID<span>design</span></div>
<div id="nav">
<div class="menu">
<ul class="null">
<li><a href="http://www.free-css.com/">HOME</a></li>
<li><a href="http://www.free-css.com/">ABOUT</a></li>
<li><a href="http://www.free-css.com/">BLOG</a></li>
<li><a href="http://www.free-css.com/">PORTFOLIO</a></li>
<li><a href="http://www.free-css.com/">CONTACT</a></li>
</ul>
</div>
</div>
<div id="main">
<div class="subnav">
<ul>
<li><a href="http://www.free-css.com/">1024</a></li>
<li><a href="index800.html">800</a></li>
<li><a href="header.html">Header Demo</a></li>
<li><a href="styles.html">Styles</a></li>
</ul>
<span class="title">HOME<img src="http://i.imgur.com/kBiQP.gif" alt="" /></span> </div>
Por debajo
- CÓDIGO:
<h2>A New Template <span>from DemusDesign</span></h2>
<div class="sidebar">
<ul>
<li>This is the sidebar and this is what a paragraph looks like in the sidebar. You can put little updates here or something like that.</li>
<li><a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a></li>
<li><a target="_blank" href="http://validator.w3.org/check?uri=referer">XHTML 1.0 Strict</a></li>
<li><a href="http://www.free-css.com/">Templates</a></li>
<li><a href="http://www.free-css.com/">Open Designs</a></li>
</ul>
</div>
<p class="main">Welcome to Just Lucid, another clean template from DemusDesign. The main idea in this template was to have a squeaky-clean layout, with some very intuitive and attractive site navigation. Some more features of this template: </p>
<p class="main"><span class="bold">Main menu expands automatically</span> - The image to the right of the main menu automatically expands to the size of the menu. So you can see what I mean, I've included a <a href="header.html">demo of different header sizes</a>. For the image I have included, it works best to have it centered vertically, if you change the picture you may want to find ".menu" in the css and change the background value to read "no-repeat bottom right" or "no-repeat top right."</p>
<p class="main"><span class="bold">Layouts for 1024px and 800px widths</span> - As you can see the default width is optimized for 1024+ resolutions, but I also included <a href="index800.html">an index page</a> for 800px as well.</p>
<p class="main"><span class="bold">A Robust Footer</span> - If you scroll to the bottom of each page, you'll also find a pretty robust footer that can contain a root navigation, an entire sitemap, links to recent comments/posts/etc., copyright information, or just some more random links.</p>
<p class="main"><span class="bold">Style Tags</span> - I've also included <a href="styles.html">a page</a> full of style tags, including blog posts, headers, ordered and unordered lists, a table and a form.</p>
<p class="main">Maecenas pretium tincidunt mi. Quisque dolor. Aenean interdum condimentum nibh. Fusce ullamcorper, massa et semper malesuada, risus mauris aliquam mi, at sodales tellus nulla vel erat. Nulla ac turpis. Fusce sodales nulla eget nunc. Donec sapien. Duis tincidunt velit sit amet dui. Vivamus purus arcu, viverra ut, consequat et, luctus viverra, pede. Pellentesque nec elit sit amet turpis facilisis ultricies. Ut sit amet purus at arcu viverra vestibulum. Integer sed nunc in lectus tincidunt tincidunt. Quisque suscipit. Duis dapibus mauris sit amet purus. Cras at justo ut nunc tincidunt scelerisque.</p>
<div class="clear50"> </div>
<div class="footer">
<div class="footnav"><a class="first" href="http://www.free-css.com/">JL</a><a href="http://www.free-css.com/">About</a><a href="http://www.free-css.com/">Blog</a><a href="http://www.free-css.com/">Portfolio</a><a href="http://www.free-css.com/">Contact</a></div>
<div class="footnav">
<div class="linksleft">
<h3>Recent Updates</h3>
<ul>
<li><a href="http://www.free-css.com/">A New Template</a></li>
<li><a href="http://www.free-css.com/">CSS Check</a></li>
<li><a href="http://www.free-css.com/">HTML 1.0 Strict</a></li>
<li><a href="http://www.free-css.com/">DemusDesign</a></li>
</ul>
</div>
<div class="linksleft">
<h3>Recent Comments</h3>
<ul>
<li><a href="http://www.free-css.com/">A New Template</a></li>
<li><a href="http://www.free-css.com/">CSS Check</a></li>
<li><a href="http://www.free-css.com/">HTML 1.0 Strict</a></li>
<li><a href="http://www.free-css.com/">DemusDesign</a></li>
</ul>
</div>
<div class="linksleft">
<h3>Recent Posts</h3>
<ul>
<li><a href="http://www.free-css.com/">A New Template</a></li>
<li><a href="http://www.free-css.com/">CSS Check</a></li>
<li><a href="http://www.free-css.com/">HTML 1.0 Strict</a></li>
<li><a href="http://www.free-css.com/">DemusDesign</a></li>
</ul>
</div>
<div class="linksleft">
<h3>Friends and Links</h3>
<ul>
<li><a href="http://www.free-css.com/">A New Template</a></li>
<li><a href="http://www.free-css.com/">CSS Check</a></li>
</ul>
</div>
<div class="clearer"> </div>
</div>
<p>© 2008 Your Site | Template by <a href="http://demusdesign.com">DemusDesign</a></p> | Template adaptado por <a href="http://design-ics.es.tl">design-ics</a></p>
</div>
</div>
Css Code
- CÓDIGO:
table {margin-left:auto;margin-right:auto;}
#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;}
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
body {
background: #ECECEC url("http://i.imgur.com/letfJ.jpg") repeat-y center top;
font: 400 1.0em 'lucida sans','lucida sans unicode','gill sans','verdana',sans-serif;
color: #777;
}
#wrap {
width: 990px;
margin: 0 auto;
padding-top: 40px;
background: #FFF url("http://i.imgur.com/mthi9.jpg") repeat-y left top;
}
a {
text-decoration: underline;
color: #777;
}
a:hover {
text-decoration: none;
color: #000;
}
img.topleft {
float: left;
}
ul {
padding: 0;
margin: 0;
}
.head {
font: 400 1.7em 'lucida sans','lucida sans unicode','verdana',sans-serif;
color: #666;
margin-left: 170px;
padding-top: 15px;
}
.head span {
margin-left: 10px;
color: #AAA;
}
#nav {
width: 970px;
clear: both;
}
.menu {
width: 150px;
background: transparent url("http://i.imgur.com/WcdFF.jpg") no-repeat center right;
margin: 20px 0 10px 0;
padding-right: 820px;
float: left;
clear: both;
}
.menu ul {
list-style: none;
margin: 10px 0 10px 0;
padding: 0;
}
.menu li {
padding: 8px 0 8px 0px;
text-align: center;
}
.menu li a {
padding: 0 0 0 0px;
color: #AAA;
text-decoration: none;
font: 400 1.0em 'lucida sans','lucida sans unicode','verdana',sans-serif;
}
.menu li a:hover {
color: #333;
}
#main {
width: 800px;
margin: 12px 20px 0 170px;
padding-bottom: 50px;
}
.sidebar {
width: 150px;
float: right;
clear: none;
margin-left: 10px;
font-size: 0.7em;
}
.sidebar ul {
list-style-type: none;
}
.sidebar li {
margin-bottom: 5px;
background: #E5E5E5 url("http://i.imgur.com/G8xuJ.gif") no-repeat top right;
border-bottom: 1px solid #DDD; border-left: 1px solid #DDD;
padding: 8px;
}
.sidebar li a {
text-decoration: none;
display: block;
}
.sidebar li:hover {
background-image: none;
background-color: #DDD;
border-bottom: 1px solid #aaa; border-left: 1px solid #aaa;
color: #333;
}
.subnav {
width: 100%;
background: #FFF url("http://i.imgur.com/u4WNR.gif") repeat-x bottom left;
text-align: left;
margin-bottom: 18px;
}
.subnav span.title {
display: block;
clear: none;
text-decoration: none;
color: #666;
padding-bottom: 12px;
}
.subnav ul {
list-style: none;
float: right;
}
.subnav ul li {
float: left;
}
.subnav ul li a {
margin: 0 0 0 20px;
font-size: 0.8em;
padding: 0px 0 12px 0;
line-height: 1.5em;
color: #AAA;
text-decoration: none;
display: block;
}
.subnav ul li a:hover {
color: #000;
background: url("http://i.imgur.com/Ua8VU.gif") no-repeat bottom center;
}
.clear50 {
clear: left;
padding: 25px 0;
font-size: 0;
}
.clearer {
clear: left;
line-height: 0;
height: 0;
font-size: 0;
}
h1 {
font-size: 1.2em;
color: #333;
font-weight: 600;
margin: 15px 0 10px 0;
}
h2 {
font-size: 1.0em;
color: #666;
font-weight: 400;
margin-bottom: 10px;
}
h2 span {
margin-left: 10px;
color: #AAA;
}
h3 {
color: #666;
margin-bottom: 5px;
font-size: 0.9em;
}
h4 {
color: #999;
margin-bottom: 5px;
font-size: 0.9em;
}
p.main {
font-size: 0.8em;
font-family: arial,sans-serif;
line-height: 1.6em;
margin: 5px 160px 15px 0;
}
span.bold {
color: #555;
font-weight: 600;
}
.entry {
padding: 10px 0 2px 0px;
border-top: 1px solid #CCC;
line-height: 1.4em;
margin: 0 170px 25px 0;
}
.entry .title {
font-size: 1.0em;
color: #666;
font-weight: 400;
margin-bottom: 10px;
}
.entry h2 span {
float: right;
font-size: 0.7em;
color: #AAA;
}
.entry p {
font-size: 0.8em;
}
.comment, comment a {
margin-top: 5px;
font-size: 0.7em;
padding: 5px 0;
}
ol {
color: #444;
font: 600 0.8em 'lucida sans','lucida sans unicode','verdana',sans-serif;
margin: 5px 0;
}
ol span {
font: 400 1.0em 'lucida sans','lucida sans unicode','verdana',sans-serif;
color: #666;
font-style: normal;
}
ol li {
margin-left: 30px;
padding: 4px 0
}
ul.content {
font-size: 0.8em;
list-style-type: none;
margin-left: 10px;
}
.content li {
padding: 4px 0 4px 20px;
background: url("http://i.imgur.com/0qDft.gif") no-repeat left center;
}
table {
width: 100%;
margin-bottom: 20px;
font-size: 1em;
border-collapse: collapse;
}
table caption {
margin-top: 15px;
margin-bottom: 5px;
padding: 0 0 0 3px;
font: 400 1.2em 'lucida sans','lucida sans unicode','gill sans','verdana',sans-serif;
text-align: left;
}
table th,
table td {
text-align: left;
vertical-align: top;
padding: 4px 7px !important;
padding: 6px 10px;
}
thead {
border: 1px solid #CCC;
}
thead th {
font-size: 0.9em;
color: #555;
background: #EEE;
}
tbody tr {
font-size: 0.8em;
border-bottom: 1px solid #EEE; border-right: 1px solid #EEE; border-left: 1px solid #EEE;
}
form label{
display:block;
}
form p {
font-size: 0.8em;
margin-bottom: 10px;
}
form input.text, form textarea{
width:95%;
border:1px #CCC solid;
color:#666;
padding: 4px 5px;
font:12px 'lucida sans','lucida sans unicode','gill sans','verdana',sans-serif;
background-color: #F3F3F3;
}
form input.text:hover, form textarea:hover{
border:1px #999 solid;
}
form input.text:focus, form textarea:focus{
border:1px #999 solid;
color:#666;
}
form input.button{
margin-right:8px;
padding:3px 5px;
font:12px Verdana,Arial,san-serif;
}
* html form input.text,
* html form textarea{
border-color:#533a18;
color:#333;
}
.footer {
width: 800px;
border: 1px solid #CCC;
font-size: 0.7em;
clear: both;
}
.footer p {
padding: 10px;
}
.footer .footnav {
border-bottom: 1px solid #CCC;
padding: 10px;
}
.footnav a {
text-decoration: none;
padding-right: 15px;
}
.footnav a.first {
font-size: 1.5em;
font-weight: 800;
}
.linksleft {
float: left;
margin-right: 10px;
width: 170px;
padding: 0 10px 0px 0px;
list-style-type: none;
}
.linksleft ul {
list-style-type: none;
}
.linksleft li {
display: inline;
margin: 0px;
padding: 0px;
list-style-type: none;
}
.linksleft li a {
padding: 4px;
display: block;
margin: 0;
text-decoration:none;
}