~D13 - css-theman

css-theman

Vista Previa:Link

Texto por encima de la pagina

<div id="wrapper">
<div id="header">
<div id="hgroup">
<h1>The Man</h1>
<h3>subtitulo de la pagina</h3>
</div>
<img class="bg" src="https://img.webme.com/pic/d/darknet13/themantheface.png"></div>

Texto por debajo de la pagina

<div id="aside">
<h2 class="menu">Menu</h2>
<ul class="menu">
  <li><a href="#">Link1</a></li>
  <li><a href="#">Link2</a></li>
  <li><a href="#">Link3</a></li>
  <li><a href="#">Link4</a></li>
  <li><a href="#">Link5</a></li>
</ul>
<h2 class="menu">Menu2</h2>
<p class="menu">Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do <a href="#">eiusmod</a> tempor incididunt ut labore et
dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<hr style="border: medium none ; clear: both;">
</div>
<div id="footer">copyright 20xx-2011 tu web
<div id="legal">Diseño por <a href="http://darknet13.es.tl" target="_blank">~D13</a></div>
</div>

CSS Code sin Style Tags

table[height ="102"] {margin-left:auto;margin-right:auto;}
#header_container {display: none;}
#nav_container {display: none;}
#sidebar_container {display: none;}
#extraDiv1, #extraDiv2, #extraDiv3, #extraDiv4, #extraDiv5, #extraDiv6 {display: none;}
#content_container h2#title {display: none;}
#counter {display: none;}
#below_content {display: none;}
#post_content {display: none;}
#pre_content {display: none;}
* {
  margin: 0px;
}
html, body {
  height: 100%;
  background-position: left bottom;
  background-repeat: repeat-x;
  z-index: 0;
}
a {
  color: #993300;
}
a:visited {
  color: #682200;
}
html {
  background-image: url(https://img.webme.com/pic/d/darknet13/themanbg.jpg);
  background-position: center bottom;
  background-color: #0a090e;
}
body {
  background-position: right bottom;
  background-repeat: no-repeat;
  font-family: Arial,Helvetica,sans-serif;
  color: silver;
  background-image: url(https://img.webme.com/pic/d/darknet13/themantheman2.png);
}
#wrapper {
  border: 1px solid black;
  width: 850px;
  margin-right: auto;
  margin-left: auto;
  background-color: #39161a;
  padding-top: 5px;
  z-index: 1;
}
#header {
  height: 110px;
  background-image: url(https://img.webme.com/pic/d/darknet13/themanbg.jpg);
  background-position: left center;
  width: 840px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 10px;
  position: relative;
}
#hgroup {
  position: absolute;
  width: 250px;
  top: 25px;
  left: 15px;
}
#hgroup h1 {
  font-family: Arial,Helvetica,sans-serif;
  color: white;
}
#hgroup h3 {
  font-family: "Times New Roman",Times,serif;
  font-style: italic;
  color: silver;
}
#header img.bg {
  position: absolute;
  bottom: 0px;
  width: 90px;
  right: 50px;
}
#content {
  float: left;
  width: 525px;
  margin-left: 5px;
  padding-right: 5px;
  padding-left: 5px;
}
#aside {
  float: left;
  width: 300px;
  margin-right: 5px;
  margin-left: 5px;
}
#aside h2.menu {
  font-family: "Courier New",Courier,monospace;
  color: #b75b00;
  text-transform: capitalize;
  text-align: center;
}
#aside p.menu {
  text-align: justify;
}
#aside ul {
  padding: 0px;
  list-style-type: none;
}
#aside ul.menu li a {
  color: #e2e2e2;
  text-decoration: none;
  display: list-item;
  list-style-type: circle;
  list-style-position: inside;
}
#aside ul.menu li a:hover {
  text-decoration: underline;
}
#footer {
  width: 850px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 30px;
  text-align: center;
  font-size: 15px;
  position: relative;
}
#legal {
  position: absolute;
  bottom: 0px;
  right: 0px;
  font-family: "Times New Roman",Times,serif;
  font-size: 8px;
}
#legal a {
  color: white;
  text-decoration: none;
}