~D13 - css-cristalclear

css-cristalclear

Perfil de PWG:Link

Texto por encima de la pagina

<div id="wrapper">
<div id="header">
<h1>Titulo de la Web</h1>
<h2>Titulo 2</h2>
</div>
<div id="main">
<div id="top">
<h2 class="menu">[SUBTITLE]</h2>
</div>

Texto por debajo de la pagina

<div id="end">
</div>
</div>
<div id="aside">
<div id="top">
<h2 class="menu">MENU</h2>
</div>
<div id="middle">
<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">
</div>
<div id="top">
<h2 class="menu">MENU</h2>
</div>
<div id="middle">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 <a href="sin tÃtulo.html#">consequat</a>.
</div>
<div id="end"></div>
</div>
<div id="footer">copyright 20xx-2012</div>
</div>
<style type="text/css">
@media only screen and (max-device-width: 480px), handheld {
table[height ="102"] {width:100%;margin-right:0px;margin-left:0px;}
table[height ="102"] tr td iframe {width:100%;}}
</style>

CSS Code sin Style Tags

@media all {
* {margin: 0px;}
a img {border: 0px;}
#header_container {display: none;}
#nav_container {display: none;}
#sidebar_container{display:none;}
h2#title {display: none;}
table[height ="102"] {margin-right:auto;margin-left:auto;}
#counter {display:none;}
}
@media screen  {
* {
  margin: 0px;
}
html, body {
  margin: 0px;
  padding: 0px;
  background-image: url(https://img.webme.com/pic/d/darknet13/cristalclearbg1.jpg);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
#wrapper {
  width: 990px;
  margin-right: auto;
  margin-left: auto;
}
#header {
  height: 80px;
  text-align: center;
  color: #84ccc7;
}
#main {
  float: left;
  width: 600px;
  margin-left: 30px;
}
#main #top {
  background-image: url(https://img.webme.com/pic/d/darknet13/cristalclear1a.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  height: 70px;
}
#main #top h2.menu {
  text-align: center;
  padding-top: 20px;
  font-family: Arial,Helvetica,sans-serif;
  color: white;
  opacity: 0.76;
}
#main #content {
  background-image: url(https://img.webme.com/pic/d/darknet13/cristalclear1b.png);
  min-height: 400px;
  background-repeat: repeat-y;
  background-position: center top;
  padding-right: 22px;
  padding-left: 22px;
}
#main #end {
  background-image: url(https://img.webme.com/pic/d/darknet13/cristalclear1c.png);
  background-repeat: no-repeat;
  background-position: center top;
  height: 32px;
}
#aside {
  width: 300px;
  float: left;
  margin-left: 30px;
  margin-right: 30px;
}
#aside #top {
  background-image: url(https://img.webme.com/pic/d/darknet13/cristalclear2a.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  height: 36px;
}
#aside #top h2.menu {
  text-align: center;
  font-size: 1.5em;
  padding-top: 3px;
  font-family: Arial,Helvetica,sans-serif;
  color: white;
  opacity: 0.76;
}
#aside #middle {
  background-image: url(https://img.webme.com/pic/d/darknet13/cristalclear2b.png);
  background-position: center top;
  padding-right: 11px;
  padding-left: 11px;
}
#aside #end {
  background-image: url(https://img.webme.com/pic/d/darknet13/cristalclear2c.png);
  background-repeat: no-repeat;
  background-position: center top;
  height: 17px;
  margin-bottom: 40px;
}
#aside #middle ul.menu {
  padding: 0px;
  list-style-type: none;
}
#aside #middle ul.menu li a {
  border-bottom: 1px dashed #67a09c;
  text-decoration: none;
  display: list-item;
  list-style-type: none;
  color: #67a09c;
  margin-left: -1px;
  margin-right: -1px;
  padding-left: 11px;
}
#aside #middle ul.menu li a:hover {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
#footer {
  clear: both;
  text-align: center;
  color: #009900;
}}

@media handheld, only screen and (max-width:480px)  {
* {
  margin: 0px;
}
html, body {
  margin: 0px;
  padding: 0px;
  background: #e7ffff url(https://img.webme.com/pic/d/darknet13/cristalclearmbg2.jpg) repeat-x center bottom;
}
#wrapper {
  width: 350px;
  margin-left: auto;
  margin-right: auto;
}
#header {
  height: 40px;
  text-align: center;
  color: #84ccc7;
}
#main {
width:100%;
margin-left:0px;
float:none;
}
#main #top {
  background-image: url(https://img.webme.com/pic/d/darknet13/cristalclearma.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  height: 56px;
}
#main #content {
  background-image: url(https://img.webme.com/pic/d/darknet13/cristalclearmb.png);
  min-height: 200px;
  background-repeat: repeat-y;
  background-position: center top;
  padding-right: 22px;
  padding-left: 22px;
}
#main #end {
  background-image: url(https://img.webme.com/pic/d/darknet13/cristalclearmc.png);
  background-repeat: no-repeat;
  background-position: center top;
  height: 32px;
  margin-bottom: 20px;
}
#aside {
width:100%;
margin-left:auto; margin-right:auto;
float:none;
}
#aside #top {
  background-image: url(https://img.webme.com/pic/d/darknet13/cristalclearma.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  height: 56px;
}
#aside #middle {
  background-image: url(https://img.webme.com/pic/d/darknet13/cristalclearmb.png);
  background-position: center top;
  padding-right: 11px;
  padding-left: 11px;
  background-repeat: repeat-y;
}
#aside #end {
  background-image: url(https://img.webme.com/pic/d/darknet13/cristalclearmc.png);
  background-repeat: no-repeat;
  background-position: center top;
  height: 17px;
  margin-bottom: 20px;
}
#aside #middle ul.menu {
  padding: 0px;
  list-style-type: none;
}
#aside #middle ul.menu li a {
  border-bottom: 1px dashed #67a09c;
  text-decoration: none;
  display: list-item;
  list-style-type: none;
  color: #67a09c;
  margin-left: -1px;
  margin-right: -1px;
  padding-left: 11px;
}
#aside #middle ul.menu li a:hover {
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
#footer {
  text-align: center;
  color: #009900;
}
#top h2.menu {
  display: none;
}}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
<!-- ~D13 --