~D13 - css-mozdesign

css-mozdesign

Vista Previa:Link

Texto por encima de la pagina

<div id="menutop">
<div id="menutopl">
</div>
<div id="menutopc" style="text-align: center;">
<ul class="topmenu">
<li>opcion 1
<ul>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li style="border-bottom: 1px solid white;"> <br>
</li>
</ul>
</li>
<li>opcion 2
<ul>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li style="border-bottom: 1px solid white;"> <br>
</li>
</ul>
</li>
<li>opcion 3
<ul>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li style="border-bottom: 1px solid white;"> <br>
</li>
</ul>
</li>
<li>opcion 4
<ul>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li style="border-bottom: 1px solid white;"> <br>
</li>
</ul>
</li>
<li>opcion 5
<ul>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li style="border-bottom: 1px solid white;"> <br>
</li>
</ul>
</li>
<li>opcion 6
<ul>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li><a href="#">submenu a</a> <br>
</li>
<li><a href="#">submenu b</a> <br>
</li>
<li style="border-bottom: 1px solid white;"> <br>
</li>
</ul>
</li>
</ul>
</div>
<div id="menutopr">
</div>
</div>
<div id="wrapper">

Texto por debajo de la pagina

<div id="sidebar">
<ul class="sidemenu">
<li>link1</li>
<li>link2</li>
<li>link3</li>
<li>link4</li>
<li>link5</li>
</ul>
<div id="sidetab">Recientes
</div>
<div id="news">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. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>
<div id="wrap2" style="vertical-align: bottom;">
<div id="footermenu">
<div id="footermenu1">Sobre nosotros
<ul>
<li><a href="#">pie 1</a></li>
<li><a href="#">pie 2</a></li>
<li><a href="#">pie 3</a></li>
<li><a href="#">pie 4</a></li>
<li><a href="#">pie 5</a></li>
</ul>
</div>
<div id="footermenu2">Links recomendados
<ul>
<li><a href="#">pie a</a></li>
<li><a href="#">pie b</a></li>
<li><a href="#">pie c</a></li>
<li><a href="#">pie d</a></li>
<li><a href="#">pie e</a></li>
</ul>
</div>
<div id="footermenu3">Portafolio
<ul>
<li><a href="#">pie I</a></li>
<li><a href="#">pie II</a></li>
<li><a href="#">pie III</a></li>
<li><a href="#">pie IV</a></li>
<li><a href="#">pie V</a></li>
</ul></div>
</div>
<div id="footer" style="vertical-align: bottom;">
2010 tu Web
</div>
</div>
<div style="text-align: right;font-size: 10px;text-align:right;background-color: #007cc2;
"id="legal">Por <a style="font-size:10px;" href="http://darknet13.es.tl" target="_blank">D13</a></div>

CSS Code sin Style tags

table[height ="102"] {margin-left:auto;margin-right:auto;}
#header_container {display: none;}
#nav_container {display: none;}
h2#title {display: none}
#sidebar_container{display: none;}
body {
margin: 0px;
background-position: center top;
background-repeat: repeat-x;
background-image: url(https://img.webme.com/pic/p/pruebas-d13/moz-bg1.jpg);
}
#menutop {
width: 990px;
height: 110px;
margin-right: auto;
margin-left: auto;
}
#menutopl {
float: left;
width: 20px;
height: 110px;
background-image: url(https://img.webme.com/pic/p/pruebas-d13/moz-menutopl.png);
background-repeat: no-repeat;
background-position: left center;
}
#menutopc {
width: 950px;
float: left;
height: 110px;
background-image: url(https://img.webme.com/pic/p/pruebas-d13/moz-menutop1.png);
background-position: center center;
background-repeat: repeat-x;
}
#menutopr {
float: left;
width: 20px;
height: 110px;
background-image: url(https://img.webme.com/pic/p/pruebas-d13/moz-menutopr.png);
background-position: right center;
background-repeat: no-repeat;
}
ul.topmenu {
list-style-type: none;
list-style-image: none;
list-style-position: outside;
padding-top: 25px;
}
ul.topmenu li {
border-left: 1px solid white;
border-right: 1px solid white;
padding: 1px 20px;
background: #171776 none repeat scroll 0% 50%;
display: block;
width: 80px;
text-align: center;
font-family: Arial,Helvetica,sans-serif;
position: relative;
height: 20px;
color: white;
font-weight: normal;
}
ul.topmenu ul {
position: absolute;
left: 51px;
top: -1px;
display: none;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
}
ul.topmenu > li > ul {
position: absolute;
left: -41px;
top: 19px;
display: none;
list-style-type: none;
list-style-image: none;
list-style-position: outside;
}
ul.topmenu li:hover {
background: #333399 none repeat scroll 0% 50%;
}
ul.topmenu li:hover a {
color:white;
text-decoration: none;
}
ul.topmenu li:hover > ul {
display: block;
}
ul.topmenu > li {
border-style: none solid;
border-left: 1px solid white;
border-right: 1px solid white;
display: inline;
background-color: transparent;
color: white;
font-weight: bold;
}
ul.topmenu > li:hover {
background-color: transparent;
}
.sidemenu a {
color: #7c7c7c;
text-decoration: none;
}
#content {
padding: 10px;
width: 750px;
float: left;
min-height: 600px;
}
#wrapper {
width: 990px;
margin-right: auto;
margin-left: auto;
}
#sidebar {
width: 220px;
float: left;
}
.sidemenu {
list-style-type: none;
display: inline;
color: #666666;
}
.sidemenu li {
background-image: url(https://img.webme.com/pic/p/pruebas-d13/moz-button1.jpg);
height: 18px;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
width: 180px;
margin-bottom: 5px;
background-position: center top;
background-repeat: no-repeat;
}
.sidemenu li:hover {
background-image: url(https://img.webme.com/pic/p/pruebas-d13/moz-button2.jpg);
background-position: center top;
background-repeat: no-repeat;
}
#wrap2 {
clear: left;
min-height: 100px;
background-position: center top;
background-repeat: repeat-x;
background-color: #007cc2;
background-image: url(https://img.webme.com/pic/p/pruebas-d13/moz-btm.jpg);
}
#wrap2 li a {
color:white;
}
#footermenu1 {
width: 320px;
float: left;
padding-left: 3px;
}
#footermenu2 {
width: 320px;
float: left;
margin-right: 10px;
margin-left: 10px;
padding-left: 4px;
}
#footermenu3 {
width: 320px;
float: left;
padding-left: 3px;
}
#footermenu {
width: 990px;
margin-left: auto;
padding-top: 100px;
margin-right: auto;
color: white;
}
#footer {
clear: left;
width: 990px;
margin-right: auto;
margin-left: auto;
color: white;
text-align: center;
}
#sidetab {
background-image: url(https://img.webme.com/pic/p/pruebas-d13/moz-sidebar1.jpg);
background-position: center top;
background-repeat: no-repeat;
height: 21px;
padding-top: 5px;
padding-bottom: 5px;
color: white;
text-align: center;
font-size: 20px;
font-family: Arial,Helvetica,sans-serif;
margin-top: 40px;
}
#news {
padding-right: 5px;
padding-left: 5px;
font-size: 14px;
}
#separador {
height: 30px;
}