[Css-design] City Night

Ir abajo

[Css-design] City Night

Mensaje por Deryan el Dom Oct 14, 2012 11:35 am

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;}




Hola Invitado, si eres nuevo por aqui te recomiendo leerte las Normas generales de MundoCodigos

Mi nombre es Deryan soy:
Like a Star @ heaven Fundador y Administrador de MundoCodigos Like a Star @ heaven
para cualquier duda,sugerencia,queja,denuncia,se contacta con migo o crea un tema en este foro.
avatar
Deryan
Administrador
Administrador

Mensajes Mensajes : 134
MCoins MCoins : 1042725
Gracias Gracias : 8
Advertencia Advertencia : 100%


Ver perfil de usuario http://mundocodigos.foroactivo.mx

Volver arriba Ir abajo

Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.