Blacker
Vista previa: http://img380.imageshack.us/img380/8472/blacker.pngTexto por encima de la página:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Blacker</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"><a href="http://www.free-css.com/">Blacker</a> <br/>
your company slogan </div>
<div id="menu">
<ul>
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">Pricing</a></li>
<li><a href="http://www.free-css.com/">Contacts</a></li>
</ul>
</div>
</div>
<div id="main">
<div id="sidebar">
</div>
<div id="text" >
Texto por debajo de la página:
</div>
</div>
<div id="footer">
<div id="left_footer">© Copyright 2009 Your Website</div>
<div id="right_footer">Adaptada por Ayuda para pwg</div>
</div>
</div>
</body>
</html>
CSS-Code sin Style Tags:
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.nav_element{list-style-type: none;}
li.nav_element{display: none;}
body { margin:50px; font-size:0.9em; line-height:20px; font-family: "Myriad Pro", "Trebuchet MS", Arial; background: url(http://img40.xooimage.com/files/4/2/b/bckg-141e994.gif) #000; border:1px solid #666666;}
a { color:#C23B01;}
a:hover { color:#333333;}
#container { background-color:#fff;}
#header { background:url(http://img28.xooimage.com/files/d/5/7/header_bckg_main-141e9ba.jpg) repeat-x #C13B00; }
#logo { background:url(http://img40.xooimage.com/files/1/8/9/header_bckg-141e9d4.jpg) no-repeat; padding:30px 0 0 40px; height:83px; color:#FFFFFF; font-style:italic; }
#logo a{ color:#FFFFFF; text-decoration:none; font-weight:bold; font-size:20px; font-style:italic; text-transform:uppercase;}
#menu { background: url(http://img28.xooimage.com/files/a/d/3/menu_bckg-141e9ef.jpg) #FF6600; height:30px; }
#menu ul { margin:0; padding:0;}
#menu ul li{ display:inline-block; float:left; width:104px; list-style:none; text-align:center; }
#menu a { display:block; float:left; width:104px; color:#fff; font-size:14px; text-transform:uppercase; font-weight:bold; text-decoration:none; padding-top:4px; font-style:italic;}
#menu a:hover{ padding-top:4px; height:22px; background:url(http://img26.xooimage.com/files/5/9/5/menu_bckg_over-141e9fc.jpg) #C23B01;}
#text { margin: 0 270px 0 20px; }
#text p { padding:0 20px 10px 0;}
#text li {list-style:none; padding-left:20px; background:url(http://img28.xooimage.com/files/a/1/5/li-141ea12.gif) no-repeat 0px 7px;}
#sidebar { float:right; width:200px; padding: 0 20px 0 10px; font-size:14px;}
h1 { margin:0; padding:0; text-transform:uppercase; font-size:1.8em; color:#1B1D1E; font-style:italic}
#main { float:left; background:url(http://img44.xooimage.com/files/7/c/c/sidebar_bckg-141ea2c.gif) repeat-y top right #fff; padding:20px 0 0 0;}
#footer { background:url(http://img26.xooimage.com/files/5/9/7/footer_bckg-141ea52.jpg) #424E4F; height:102px; clear:both; font-style:italic }
#left_footer { float:left; padding:40px 0 0 30px; text-transform:uppercase; color:#FFFFFF; font-weight:bold; font-size:12px;}
#left_footer a { color:#FFFFFF;}
#left_footer a:hover { text-decoration:none;}
#right_footer { float:right; padding:40px 30px 0 0; text-transform:uppercase; color:#FFFFFF; font-weight:bold; font-size:12px; text-align:right; width:400px;}
#right_footer a { color:#FFFFFF;}
#right_footer a:hover { text-decoration:none;}