[Css-design] City Night

Creador:darknet13
Fuente:http://www.paginawebgratis.es/forum/viewtopic.php?t=70856

Nunca he sido muy fan de este tipo de diseño pero aqui esta

Vista previa: http://pruebas-d13.es.tl/citynight.htm


texto por encima de la pagina

Código:

<div id="top">
<div id="menu">
<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>
</div>
</div>
<div id="wrapper">
<div id="up">
<h1 class="menu">Titulo de la Web</h1>
<h3 class="menu">Subtitulo de la Web</h3>
</div>
<div id="main">

Texto por debajo de la pagina

Código:

</div>
<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 eiusmod 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>
<br style="clear: left;">
</div>
<div id="endwrap">
<div id="foot">
<div id="up">
<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>
</div>
<div id="mid">
<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>
</div>
<div id="end">
<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>
</div>
<div id="footer">Copyright:20xx-2012 Tuweb<div id="legal">Diseño por <a href="http://darknet13.es.tl" target="_blank">D13</a></div>
</div>
</div>

CSS Code sin Styletags

Código:

table[height ="102"] {margin-left:auto;margin-right:auto;position:relative;z-index:1;left:130px;top:20px;}
#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;}
html {
  height: 100%;
  width: 100%;
}
body {
  position:relative;
  background-color: #e8e8e8;
  font-family: Arial,Helvetica,sans-serif;
  color: #333333;
}
html > body {
  height: auto;
  min-height: 100%;
}
#top {
  height: 220px;
  background-color: #333333;
  position: relative;
  top:-100px;
}
#wrapper {
  border: 1px solid #999999;
  width: 990px;
  margin-right: auto;
  margin-left: auto;
  background-color: white;
  position: relative;
  top: -200px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-radius:10px;
}
#wrapper #up {
  border: 1px solid #666666;
  margin-right: 10px;
  margin-left: 10px;
  height: 150px;
  margin-bottom: 10px;
  background-image: url(http://img.webme.com/pic/d/darknet13/nightlighthdr.png);
  background-position:  center center;
  border-radius:10px;
  background-color: #333333;
}
#wrapper #main {
  padding: 2px;
  float: left;
  width: 660px;
  margin-left: 10px;
}
#wrapper #aside {
  float: left;
  width: 300px;
  margin-left: 10px;
}
#endwrap {
  background-color: #333333;
  color: silver;
  width: 100%;
  bottom: 0px;
  position: absolute;
}
#footer {
  width: 990px;
  margin-right: auto;
  margin-left: auto;
}
#foot {
  width: 990px;
  margin-right: auto;
  margin-left: auto;

}
#foot #up {
  width: 325px;
  float: left;
  margin-left: 5px;
}
#foot #mid {
  float: left;
  width: 330px;
}
#foot #end {
  float: left;
  width: 325px;
  margin-right: 5px;
}
#foot #footer {
  position:relative
  clear: left;
  text-align: center;
}
#footer #legal {
position:absolute;
bottom:0px;
right:0px;
}
* {
  margin: 0px;
}
#aside h2.menu {
  background-color: #333333;
  color: #999999;
  margin-right: 4px;
  padding-left: 10px;
  text-transform: capitalize;
  border-radius:10px;
}
#aside ul.menu {
  padding: 0px;
  list-style-type: none;
}
#aside ul.menu li a {
  color: #666666;
  text-decoration: none;
  list-style-type: none;
  display: block;
  margin-right: 5px;
}
#aside ul.menu li a:hover {
  background-color: #f3f3f3;
}
#aside p.menu {
  background-color: #f3f3f3;
  margin-right: 5px;
  text-align: justify;
}
#foot h2.menu {
  text-align: center;
  font-family: "Courier New",Courier,monospace;
}
#foot ul.menu {
  padding-left: 0px;
  list-style-type: none;
}
#foot ul.menu li a {
  color: #adadad;
  text-decoration: none;
  display: block;
  border-bottom-style: outset;
  margin-left: 5px;
  margin-right: 5px;
  padding-left: 20px;
}
#top #menu ul.menu {

  display: inline;
  list-style-type: none;
  padding-left: 0px;
}
#top #menu ul.menu li {
  display: inline;
}
#top #menu ul.menu li a {
  color: #adadad;
  text-decoration: none;
  border-left-style: inset;
  font-size: 10px;
  margin-right: -1px;
  margin-left: -1px;
  border-right-style: inset;
  padding-right: 5px;
  padding-left: 5px;
  border-left-width: 1px;
  border-right-width: 1px;
}
#top #menu {
  margin-left:auto;
  margin-right:auto;
  width:990px;
}
#top #menu ul.menu li a:hover {
  color: #d4d4d4;
}
#up h3.menu {
  color: silver;
  font-style: italic;
  font-family: "Times New Roman",Times,serif;
}
#up h1.menu {
  color: silver;
  font-family: "Courier New",Courier,monospace;
  padding-top: 25px;
}
#legal, #legal a {color:white;}
#legal {font-size:10px;}