Aca les traigo otro diseño de la web muy original
Descarga aqui
pega esto por encima de la pagina
pega esto por debajo de la pagina
pega esto en css code sin style tags
Descarga aqui
pega esto por encima de la pagina
- Código:
<head>
<title>Website Traffic</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen" />
<script type="text/javascript">
// toggle dynamic divs
function toggle(div) {
var elem = document.getElementById(div);
if (elem.style.display=='') {elem.style.display='none'; return;}
elem.style.display='';
}
</script>
</head>
<body>
<div id="content">
<div id="header">
<div id="logo">
<h1>Logo<sup> texto</sup></h1>
<p>Tu texto texto texto</p>
</div>
<div id="search">
<a onclick="toggle('searchform');">+ URL</a>
<div id="searchform" style="display: none;">
<form method="post" action="">
<p></p>
</form>
</div>
</div>
</div>
<ul id="menu">
<li><a class="current" href="#">Lick</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link </a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a id="last" href="#">Link</a></li>
</ul>
pega esto por debajo de la pagina
- Código:
<div style="clear: both;"></div>
<div style="clear: both;"></div>
</div>
<div id="prefooter">
<p>Diseño por <a href="http://www.wedmasterayua.es.tl" title="http://www.wedmasterayua.es.tl">compañia wma</a>tu texto</p>
</div>
<div id="footer">
<p class="right"><a href="#">Link</a><a href="#">Link</a></p>
<p>tu corporacion <a href="#">texto</a>, Design: <a href="URL">texto</a></p>
</div>
</body>
</html>
pega esto en 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
*{ margin: 0; padding: 0; }*
body { font: .74em Verdana, Arial, "Trebuchet MS", Tahoma, sans-serif; line-height: 1.6em; background: #D0D4D4; color: #444; }
a { color: #B60D0A; background: inherit; text-decoration: none; }
a:hover { color: #808080; background: inherit; }
p { margin: 0 0 15px 0; }
h1 { font: normal 3.7em "Trebuchet MS", Arial, Sans-Serif; color: #fff; }
h1 a { color: #fff; background: inherit; }
h1 a:hover { color: #E4FFD3; background: inherit; }
sup { font-size: .3em; color: #DFCDA2; }
h2 { color: #B60D0A; font: bold 1.6em "Trebuchet MS", Arial, Sans-Serif; margin: 0 0 12px; border-bottom: 1px solid #ccc; }
h3 { color: #808080; background: #D0D4D4; padding: 3px 10px; margin: 0 0 15px; }
#content { width: 960px; margin: 10px auto; background: #fff; padding: 10px; }
#header { background: #fff url('http://www.fileden.com/files/2008/5/22/1925126/cabezalwma646.jpg') no-repeat; height: 252px }
#header p { margin: 30px 0 0; color: #D6E5EA; }
#logo { padding: 40px 0 0 20px; float: left; width: 400px; }
#search { float: right; width: 240px; text-align: right; margin: 10px 15px 0 0; }
#search a, #watch a { color: #fff; font-size: .8em; cursor: pointer; }
#searchform { padding: 10px; background: #A1BDD2; }
#searchform p { margin: 0; }
#menu { margin: 0 0 50px; }
#menu li { list-style: none; float: left; }
#menu li a { cursor: pointer; padding: 5px 39px; line-height: 25px; background: #000000; margin: 0 1px 0 0; color: #808080; }
#menu li a:hover { background: #B2B6B6; color: #000; }
#menu li a.current { background: #66A3CF; color: #fff; }
#menu li a#last { margin: 0; padding: 5px 41px 5px 40px; }
.third { font-size: .9em; float: left; width: 280px; margin: 0 30px 10px 10px; }
.last { float: right; margin: 0 10px 10px 0; }
.more { border-top: 1px solid #eee; padding: 5px 0 0 0; }
#prefooter { width: 944px; margin: 0 auto; background: #fff; padding: 15px 18px 1px; font-size: .9em; }
#footer { width: 960px; margin: 15px auto; color: #808080; font-size: .9em; }
#footer a { color: #444; }
.right { float: right; text-align: right; font-size: 1em; }
#footer .right a { margin: 0 0 0 2px; padding: 3px 10px; }
#footer .right a:hover { background: #fff; color: #444; text-decoration: underline; }