yazın sanal aleminin eğlence sitesi

tasarım

Texto por encima de la pagina

Código:

<body style="background-attachment: fixed;">

<div id="menu">

<ul id="nav">
</div>

<p><img src="http://pixelea.com/s/34fe2e81b8.png" border="0" />
</p>

<div class="sidebar2" id="link">
<img src="http://pixelea.com/s/09913e1195.png" border="0" />
<table background=http://pixelea.com/s/bb34586be3.png height=100 width=221>
<tr>
<td>
<center>
<a href="URL">Nombre</a><br />
<img src="http://pixelea.com/s/094987f9ef.png" border="0" />
<a href="URL">Nombre</a><br />
<img src="http://pixelea.com/s/094987f9ef.png" border="0" />
<a href="URL">Nombre</a><br />
<img src="http://pixelea.com/s/094987f9ef.png" border="0" />
<a href="URL">Nombre</a><br />
<img src="http://pixelea.com/s/094987f9ef.png" border="0" />
<br /></center>
</td>
</tr>
</table>
<img src="http://pixelea.com/s/8f9936edba.png" border="0" />

<img src="http://pixelea.com/s/09913e1195.png" border="0" />
<table background=http://pixelea.com/s/bb34586be3.png height=100 width=221>
<tr>
<td><center>
<a href="URL">Nombre</a><br />
<img src="http://pixelea.com/s/094987f9ef.png" border="0" />
<a href="URL">Nombre</a><br />
<img src="http://pixelea.com/s/094987f9ef.png" border="0" />
<a href="URL">Nombre</a><br />
<img src="http://pixelea.com/s/094987f9ef.png" border="0" />
<a href="URL">Nombre</a><br />
<img src="http://pixelea.com/s/094987f9ef.png" border="0" />
<br /></center>
</td>
</tr>
</table>
<img src="http://pixelea.com/s/8f9936edba.png" border="0" />
</div>
<fieldset>
<img src="http://pixelea.com/s/e1d2c9c39a.png" border="0" />
<table background=http://pixelea.com/s/83cfc3bb21.png height=100 width= 733>
<tr>
<td>

Texto por debajo de la pagina

Código:

</td>
</tr>
</table>
<img src="http://pixelea.com/s/b6f01aa8b1.png" border="0" />
</fieldset>
<style>

</style>

CSS style tag

Código:

lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}

body {
background: #2e7fa9 url(http://appuvista.com/images/windows-vista-large/windows-vista-wallpaper-large-24.jpg)
}

fieldset {
filter: alpha (opacity = 80),-moz-opacity: 0.90; opacity: 0.90;
background-color: ;
border-color : ;
border-style : ;
border-width : 0px;
width: 712px;
left: 230px;
position: absolute;
top: 251px;

}

.sidebar2 {
filter: alpha (opacity = 80),-moz-opacity: 0.85; opacity: 0.85;
width: 215px;
border: 1px ;
background-color: ;
text-align: left;
margin-bottom: 8px;

}

#menu {
position: absolute;
left:685px;
top: 46px;
}

Mar Abr 07, 2009 2:07 am Título del mensaje: [Código CSS] Menu horizontal sencillo

Aqui les dejo un menu horizontal desplegable... espero q les guste aunque yo se q hay muchos jejeje Lo primero es la estructura, para ella usaré una lista, asi queda todo bien recogidito: <ul id=”menu-horizontal”> <li><a href=”#” title=”Texto”>Texto</a></li> <li><a href=”#” title=”Texto”>Texto</a></li> <li><a href=”#” title=”Texto”>Texto</a> <ul> <li><a href=”#” title=”Texto”>Texto</a></li> <li><a href=”#” title=”Texto”>Texto</a></li> </ul> </li> <li><a href=”#” title=”Texto”>Texto</a></li> <li><a href=”#” title=”Texto”>Texto</a></li> </ul> La cosa es así: el <ul> es el menú en sí, cada <li> es un botón del menú y el <ul> dentro del <li> es desplegable de ese botón. ¿Me se entiende? xD Vale, ahora voy a aplicarle un poco de estilo para que quede el menu en horizontal, ya que por defecto las listas son verticales. Se consigue fácil, agregandole a los elementos de la lista el atributo de flotante: ul#menu-horizontal li { float: left; display: inline; position: relative; } Y ahora que es horizontal, voy a ocultar el submenú, ya que no quiero que aparezca aún, solo se tiene que mostrar cuando pase el ratón por encima del botón que tiene submenu. El css en cuestión: ul#menu-horizontal ul { display: none; position: absolute relative; top: 24; left:0; margin-left:-40px; margin:0; padding:0; background:#FFFFFF; } ul#menu-horizontal ul li { display: block !important; } ul#menu-horizontal li:hover ul, ul#menu-horizontal li.iehover ul { display: none; } ul#menu-horizontal li:hover ul, ul#menu-horizontal li.iehover ul{ display: block; } Y.. perfecto! Ya funciona nuestro menu desplegable y horizontal, pero nos queda un paso. Hacerlo bonito. Para ello aplicamos un poco de estilo por aquí.. #menu-horizontal { width:500px; margin:0 auto; } #menu-horizontal li { margin:0 1px; width:98px; min-height:19px; text-align:center; background:#BBB; list-style:none; padding:2px 0; } /* y otro poquito por aquí.. */ #menu-horizontal li:hover { background:#C5014F; } #menu-horizontal li a { font:bold 11px Arial, Helvetica, sans-serif; color:#FFF; text-decoration:none; } #menu-horizontal li ul li{ float:none; width:98px; margin:1px 0; }

Mar Mar 31, 2009 2:15 am Título del mensaje: [Diseño para Css-design]Colorus adaptado

Vista previa: Encima de pagina: <title></title> <link href="style.css" rel="stylesheet" type="text/css" /></head> <body> <!-- header --> <div id="header"> <div id="logo"><a href="#">J-mla!</a></div> <div id="menu"> <ul> <li><a href="/home.htm">Home</a></li> <li><a href="http://j-mla.es.tl/Contacto.htm">Contacto</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> </div> </div> <!--end header --> <!-- main --> <div id="main"> <div id="content"> <div id="sidebar"> <div id="sidebar_top"></div> <div id="sidebar_text"> <h2>Menu</h2> <li><a href="######">Nombre Link</a></li> <li><a href="######">Nombre Link</a></li> <li><a href="######">Nombre Link</a></li> <li><a href="######">Nombre Link</a></li> <li><a href="######">Nombre Link</a></li> <li><a href="######">Nombre Link</a></li> <li><a href="######">Nombre Link</a></li> <h2>Noticias</h2> <p><div style="text-align: justify;"><strong>Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto - Texto </div></p> </div> <div id="sidebar_bottom"></div> </div> Debajo de la Pagina <!-- footer --> <div id="footer"> <div id="left_footer">© Copyright 2008 <b>Tu Web</b> <strong> Colorus </strong>design </div> <div id="right_footer"> <!-- Please do not change or delete this link. Read the license! Thanks. :-) --> Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality Software</a> Adapted by: <a href="http://www.j-mla.es.tl" title="J-mla">J-mla!</a> </div> </div> <!-- end footer --> </div> <!-- end main --> <style type="text/css"> <!-- table{margin-left:auto;margin-right:auto} --></style> CSS codes sin styles tags: lli.nav_element{display: none;} li.nav_element a{display: none;} h1#title{display: none;} h2#title span {display: none;} div.header{display: none;} li.nav_element{list-style-type: none;} li.nav_element{display: none;} body { margin:114px 0 0 0; line-height:16px; font-family: Tahoma, Arial; background: url(http://pixelea.com/s/8ed989b912.jpg) no-repeat center top #171c20; color:#bed7e6; font-size:11px;} a { color:#018BC1;} a:hover { text-decoration:none;} #header {} #logo { padding:30px 0 120px 0;color:#fff; text-align:center;} #logo a{ color:#fff; text-decoration:none; font-weight:bold; font-size:24px; text-transform:uppercase; } #menu {color:#fff; text-align:center; margin-bottom:38px;} #menu ul {text-align:center;list-style:none; padding:0;} #menu ul li {display:inline} #menu ul a { font-weight:bold; font-size:14px; text-decoration:none; color:#fff; background-color:#445d6c; padding:0 10px 2px 10px;} #menu ul a:hover { background-color:#f26513;} #main {background: url(http://pixelea.com/s/fe28d8574d.jpg) repeat-y top center;} #content {width:790px; margin:0 auto;} #text { width:540px;} #text p { margin:7px 0 7px 0;} #text li {background:url(http://pixelea.com/s/898c2cd756.jpg) no-repeat 0px 7px;} #sidebar {float:right; width:227px; background-color:#0b0e10; margin:10px 10px 0 0; } #sidebar_top { width:227px; height:40px; background:url(http://pixelea.com/s/010d347c56.jpg) no-repeat;} #sidebar_text { padding: 0 30px;} #sidebar_text p { margin:5px 0 5px 0;} #sidebar_bottom { width:227px; height:57px; background:url(http://pixelea.com/s/494d9d65b2.jpg) no-repeat;} #sidebar h2 { font-size:13px; text-transform:uppercase; color:#fff; margin:20px 0 0 0; padding:0; background:none;} h1 {margin:30px 0 0 0; padding:5px 0 7px 45px; text-transform:uppercase; font-size:24px; color:#fff; background:url(http://pixelea.com/s/83980a8038.jpg) no-repeat;} #footer {background:url(http://pixelea.com/s/898c2cd756.jpg) no-repeat top center; height:102px; clear:both; width:780px; margin:0 auto; } #left_footer { float:left; padding:60px 0 0 30px; color:#fff; font-size:12px;} #left_footer a { color:#fff;} #left_footer a:hover { text-decoration:none;} #right_footer { float:right; padding:60px 30px 0 0; color:#fff; font-size:12px; text-align:right;} #right_footer a { color:#fff;} #right_footer a:hover { text-decoration:none;}

Aca Les Dejo Un Disenio Que Se Me Ocurrio xD estaba aburrido

Texto Por Encima De La Pagina:

Código:

<div id="wrap">

<div id="header">

<h1 id="logo-text"><a href="index.html"></a></h1>
<p id="slogan"></p>

<div id="header-links">
<p>
<a href="Url">Link</a> |
<a href="Url">Link2</a>
</p>
</div>

</div>


<div id="menu">

<ul>
<li id="current"><a href="Url">Link </a></li>
<li><a href="Url">Link2</a></li>
<li><a href=" Url">Link3</a></li>
<li><a href="Url">Link4</a></li>
<li class="last"><a href="Url">Link5</a></li>
</ul>
</div>


<div id="content-wrap">

<div id="sidebar">

<div class="left-box">
<p class="align-right"></p>
</div>
</div>

Por Debajo De La Pagina:

Código:

</div>

<div id="footer">
</div>

</div>

Texto Sin Extyle Sin Tax:

Código:

bueno puesta plantilla la tenia desde que enpese a modificar la web aunque claro es sencilla pero me gusto mas o menos aqui se las dejo:

colocar esto en texto por encima de la web

Código:

colocar esto en css-style sin code

Código:

lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}

#text{
color: ffffff;
position: absolute;
top: 100px;
margin-left:-300px;
left: 50%;
}

body {
background-image: url(http://i44.tinypic.com/2lc752w.jpg);

*{ padding: 0; margin: 0; }

#Designmystic {
margin: 0 auto;
width: 800px;
height:700px;
background-image:url(http://i44.tinypic.com/2cyr4hj.jpg);}

#content {
position: absolute;
left: 56%;
top: 300px;
margin-left:-226px;
width: 525px;
height: 340px;
padding:10px;
color: #707070;
font-size:12px;
background-color:#transparent;
background-image: none;
border: 0px solid #FFFFFF;
overflow:auto;}

#Uebersicht{
position: absolute;
left: 50%;
top: 204px;
margin-left:-440px;
font-color:#cccccc;}

a{
color:#707070;
text-decoration: none;
font-size:13px;}

a:hover {
color: #7FFF00;
font-size: 13px;
text-decoration: none;}

a:link {
color: #7FFF00;
font-size: 13px;
text-decoration: none;}

a:active {
color: #707070;
font-size: 13px;
text-decoration: none;}

a:visited {
color: #cccccc;
font-size: 13px;
text-decoration: none;}

div.lux
{
position: absolute;
z-index: 3;
top: 58px;
left: 52%;
margin-left: -160px;
width: 100px;
}

.lux a
{
border: 0px solid #xxxxxx;
background-color: #xxxxxx;
background-image: none;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height:21px;
color: #FFF;
font-size: 60px;
}

Texto por encima de la pagina:

Código:

CSS-Code
sin Style Tags:

Código:

#extraDiv1 {display: none;} #extraDiv2 {display: none;} #extraDiv3 {display: none;} #extraDiv4 {display: none;} #extraDiv5 {display: none;} #extraDiv6 {display: none;} #pre_header {display: none;} #post_header {display: none;} #pre_content {display: none;} #nav_heading{display: none;} #sidebar_container {display: none;} div.header{display: none;} h1#title{display: none;} h2#title span {display: none;} a{ color:#000000; text-decoration: none; font-size:13px;} a:hover { color: #000000; font-size: 13px; text-decoration: none;} a:link { color: #4A9AF6; font-size: 13px; text-decoration: none;} a:active { color: #4A9AF6; font-size: 13px; text-decoration: none;} a:visited { color: #000000; font-size: 13px; text-decoration: none;} body { background-color:#2c2c2c;} background-image:url(http://baxaj.com/wp-content/uploads/2007/09/mario-party-dstn_.jpg);} *{ padding: 0; margin: 0; } #Mein_Bild { margin: 0 auto; width: 1024px; height:768px; background-image:url(http://i176.photobucket.com/albums/w192/snesblog/wallpapers/Super_Mario_World.gif);} #header_container { position: absolute; left: 50%; margin-left:-360px; width: 770px; height:108px; background-color:#343434; background-image:url(http://i41.tinypic.com/29lxkxg.png); color:#FFFFFF; font-size:13px; border: 1px solid #000000;} #content { position: absolute; left: 50%; top: 176px; margin-left:-360px; width: 589px; height: auto; padding:10px; color: #000000; font-size:13px; background-color:#e7e7e7; background-image: none; border: 1px solid #000000; overflow:auto;background-repeat:no-repeat;} #nav_container{ position: absolute; left: 50%; top: 176px; margin-left: 250px; background-color:#dbdbdb; width: 160px; height: auto; border:1px solid #000000; overflow:auto;} ul#nav{ width: 160px; padding: 0px; margin: 0px;} li.nav_element{ list-style-type: none; position: relative; padding:0px; width: 160px;} li.nav_element a{ display: block; width: 160px; padding: 0px; font-weight: bold; text-decoration: none; text-align: left; color:#F2F2F2; background-color:#dbdbdb; background-image:url(http://s11b.directupload.net/images/081212/zqab7rop.png); border: 0px solid #000000;overflow:auto;background-repeat:no-repeat;} li.nav_element a:hover{ color: #000000; background-color:#C9C9C9; background-image: none;} #sidebar_container{ position: absolute; left: 50%; top:176px; margin-left: 250px; width: 160px; height: 400px; background-color:#dbdbdb; background-image:url; border:1px solid #000000; color:#000000; overflow:auto;} #side{ position: absolute; left: 50%; top:140px; margin-left: -360px; width: 770px; height: 35px; background-color:#dbdbdb; background-image:url(http://i39.tinypic.com/2gtqhif.png); border:1px solid #000000; color:#000000; overflow:auto;}

Hola aca les traigo un nuevo diseño mio ase ratos no sacaba por q no me encontraba libre aora aca les tengo un nuevo diseño Css

su codigo es

Pega esto por encima de la pagina

Código:

<div id="wrap">

<div id="header">

<h1 id="logo-text"><a href="index.html"></a></h1>
<p id="slogan"></p>

<div id="header-links">
<p>
<a href="Modificar Url"></a>

</p>
</div>

</div>


   <div id="menu">

<ul id="nav">
<li class="top"><a href="URL" class="top_link"><span>Link</span></a></li>

<li class="top"><a id="services" class="top_link"><span class="down">Link <font color="#aad5fd">+</font></span></a>
   <ul class="sub">

<li><b>INTERMEDIARIO</b></li>

      <li><a href="URL">SUB LINK</a></li>

   <li><a href="URL">SUB LINK</a></li>

   </ul>

</li>

<li class="top"><a href="URL" id="privacy" class="top_link"><span>LINK</span></a></li>

<li class="top"><a id="services" class="top_link"><span class="down">Link <font color="#aad5fd">+</font></span></a>
   <ul class="sub">

<li><b>INTERMEDIARIO</b></li>

      <li><a href="URL">SUB LINK</a></li>

   <li><a href="URL">SUB LINK</a></li>

   </ul>

</li>

</div>


<div id="content-wrap">

<div id="sidebar">

<div class="left-box">
<p class="align-right"></p>
</div>
</div>

Pega esto por debajo de la pagina

Código:

</div>

<div id="footer">
</div>

</div>

pega esto en Css code sin Style Tags

Código:

lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}
div.header{display: none;}
li.nav_element{list-style-type: none;}
li.nav_element{display: none;}

/* Top Elements */
* { margin: 0; padding: 0; outline: 0 }

body {
background-image:url(http://www.fileden.com/files/2008/5/22/1925126/Fondowedmasterayuda.gif);background-color:#ffffff;
font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
color: #555;
text-align: center;
}

/* links */
a, a:visited {
text-decoration: none;
color: #2180BC;
background: inherit;
}
a:hover {
color: #88ac0b;
background: inherit;
text-decoration: underline;
}

/* headers */
h1, h2, h3 {
font-family: 'Trebuchet MS', Tahoma, Sans-serif;
}
h1 {
font-size: 150%;
font-weight: normal;
color: #cccccc;
}
h2 {
font-size: 140%;
text-transform: uppercase;
color: #cccccc;
}
h3 {
font-size: 120%;
color: #cccccc;
}

h1, h2, h3, p {
padding: 10px;
margin: 0;
}
ul, ol {
margin: 5px 20px;
padding: 0 20px;
}

/********************************************
Design
********************************************/
#wrap {
width: 838px;
background: url(http://i35.tinypic.com/zlq93m.png) repeat-y center top;
margin: 0 auto;
text-align: left;
}
#content-wrap {
clear: both;
width: 760px;
padding: 0;
margin: 10px auto;
}
#header {
width: 838px;
position: relative;
height: 190px;
background: #fff url(http://www.fileden.com/files/2008/5/22/1925126/wma5643.JPG) no-repeat center top;
padding: 0;

}
#header h1#logo-text a {
position: absolute;
margin: 0; padding: 0;
font: bolder 44px 'Trebuchet MS', Arial, Sans-serif;
letter-spacing: -2px;
color: #FFF;
text-transform: none;
text-decoration: none;
background: transparent;

/* change the values of top and left to adjust the position of the logo*/
top: 25px; left: 47px;
}
#header p#slogan {
position: absolute;
margin: 0; padding: 0;
font: normal 12px 'Trebuchet MS', Arial, Sans-serif;
text-transform: none;
color: #FFF;

/* change the values of top and left to adjust the position of the slogan*/
top: 70px; left: 55px;
}

/* header links */
#header #header-links {
position: absolute;
top: 20px; right: 30px;
color: #ffffff;
font-size: 10px;
}
#header #header-links a {
color: #FFF;
text-decoration: none;
}
#header #header-links a:hover {
color: #cccccc;
}

/* Menu */
#menu {
clear: both;
margin: 0 auto; padding: 0;
background: url(http://i37.tinypic.com/xpnh1z.png) repeat-x 0 0;
font: bold 12px/37px Verdana, Arial, Tahoma, Sans-serif;
height: 28px;
width: 838px;
}
#menu ul {
float: right;
list-style: none;
margin:0; padding: 0;
}
#menu ul li {
display: inline;
}
#menu ul li a {
display: block;
float: left;
padding: 0 12px;
color: #FFF;
text-decoration: none;
}
#menu ul li.last a {
padding-right: 20px;
}
#menu ul li a:hover {
color: #cccccc;
}
#menu ul li#current a {
color: #bc0303;
}

/* Main Column */
#main {
float: left;
width: 70%;
padding: 0; margin: 5px 0 0 5px;
display: inline;
}
#main h2 {
margin-top: 10px;
font: Bold 140% 'Trebuchet MS', Tahoma, Sans-serif;
color: #88ac0b;
padding: 5px 0 5px 25px;
border-bottom: 1px solid #EFF0F1;
background: #FFF none no-repeat 3px 50%;
text-transform: none;
}
#main h2 a {
background: none;
color: #88ac0b;
text-decoration: none;
}

#main ul li {
list-style-image: none;
}

.post-footer {
background-color: #FAFAFA;
padding: 5px; margin: 20px 10px 10px 10px;
border: 1px solid #f2f2f2;
font-size: 95%;
}
.post-footer .date {
background: none no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
background: none no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
background: none no-repeat left center;
padding-left: 20px; margin: 0 10px 0 5px;
}

/* Sidebar */
#sidebar {
float: right;
width: 26.5%;
padding: 0; margin: 0;
color: #000;

}
#sidebar h3 {
margin-top: 10px;
padding: 20px 20px;
font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
color: #bc0303;
}
#sidebar ul.sidemenu {
list-style: none;
text-align: left;
margin: 7px 4px 8px 0; padding: 0;
text-decoration: none;
background: none repeat-x left top;
}
#sidebar ul.sidemenu li {
list-style: none;
background: none repeat-x left bottom;
padding: 4px 0 4px 5px;
margin: 0 20px;
color: #bc0303;
}
* html body #sidebar ul.sidemenu li {
height: 1%;
}
#sidebar ul.sidemenu li a {
text-decoration: none;
background-image: none;
color: #666666;
}
#sidebar ul.sidemenu li a:hover {
color: #1773BC;
}
#sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.sidemenu ul li { background: none; }

/* Footer */
#footer {
color: #C6DDEE;
background: url(http://www.fileden.com/files/2008/5/22/1925126/cabelza6wedmasterayuda.PNG) no-repeat center top;
clear: both;
width: 838px;
height: 76px;
text-align: center;
font-size: 92%;
}
#footer a {
color: #FFF;
text-decoration: none;
}

/* alignment classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }

.preload1
.preload2

#nav {padding:0; margin:0; list-style:none; height:38px; background:#fff url(six_0.gif) repeat-x; position:relative; z-index:200; font-family:arial, verdana, sans-serif;}
#nav li.top {display:block; float:left;}
#nav li a.top_link {display:block; float:left; height:35px; line-height:33px; color:#FFF; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;background: url(six_0.gif);}
#nav li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0.gif) right top no-repeat;}
#nav li a.top_link span.down {float:left; display:block; padding:0 24px 0 12px; height:35px; background: url(six_0a.gif) no-repeat right top;}

#nav li:hover a.top_link,
#nav a.top_link:hover
{color:#CCC; background: url(six_1.gif) no-repeat;}
#nav li:hover a.top_link span,
#nav a.top_link:hover span
{background:url(six_1.gif) no-repeat right top;}
#nav li:hover a.top_link span.down,
#nav a.top_link:hover span.down
{background:url(six_1a.gif) no-repeat right top; padding-bottom:3px;}

#nav table {border-collapse:collapse; padding:0; margin:0; position:absolute; left:0; top:0;}

#nav li:hover {position:relative; z-index:200;}
#nav a:hover {position:relative; white-space:normal; z-index:200;}

#nav :hover ul.sub
{left:1px; top:38px; background: #FFF; padding:3px; border:1px solid #cccccc; white-space:nowrap; width:130px; height:auto; z-index:300;}
#nav :hover ul.sub li
{display:block; height:20px; position:relative; float:left; width:90px; font-weight:normal;}
#nav :hover ul.sub li a
{display:block; font-size:11px; height:18px; width:100px; line-height:18px; text-indent:5px; color:#000; text-decoration:none;border:1px solid #FFF;}
#nav li ul.sub li a.fly
{background:#FFF url(arrow.gif) 80px 6px no-repeat;}
#nav :hover ul.sub li a:hover
{background:#FFF; color:#CCC; border-color:#fff;}
#nav :hover ul.sub li a.fly:hover
{background:#FFF url(arrow_over.gif) 80px 6px no-repeat; color:#CCC;}

#nav li b {display:block; font-size:11px; height:18px; width:88px; line-height:18px; margin-bottom:3px; text-indent:6px; color:#65a7e5; border-bottom:1px solid #000000; cursor:default;}

#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:89px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #cccccc; white-space:nowrap; width:90px; z-index:400; height:auto;}

#nav ul,

#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}

#nav li:hover li:hover > ul
{left:90px; top:-4px; background: #50b5d0; padding:3px; border:1px solid #0b4d97; white-space:nowrap; width:90px; z-index:400; height:auto;}
#nav li:hover > ul ul
{position:absolute; left:-9999px; top:-9999px; width:0; height:0; margin:0; padding:0; list-style:none;}
#nav li:hover li:hover > a.fly
{background:#3f96a9 url(arrow_over.gif) 80px 6px no-repeat; color:#fff; border-color:#fff;}
#nav li:hover li:hover > li a.fly
{background:#50b5d0 url(arrow.gif) 80px 6px no-repeat; color:#000; border-color:#50b5d0;}

Texto por encima de la pagina:

Código:

Css code sin stile tags:

Código:

lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}

#text{
color: ffffff;
position: absolute;
top: 100px;
margin-left:-300px;
left: 50%;
}

body {
background-color:#323334}

*{ padding: 0; margin: 0; }

#Designmystic {
margin: 0 auto;
width: 921px;
height:567px;
background-image:url(http://i36.tinypic.com/2ela7u0.png);}

#content {
position: absolute;
left: 50%;
top: 224px;
margin-left:-470px;
width: 900px;
height: 360px;
padding:10px;
color: #0d0d0d;
font-size:13px;
background-color:#transparent;
background-image: none;
border: 0px solid #FFFFFF;
overflow:auto;}

#Uebersicht{
position: absolute;
left: 50%;
top: 204px;
margin-left:-440px;
font-color:#cccccc;}

a{
color:#0d0d0d;
text-decoration: none;
font-size:13px;}

a:hover {
color: #0d0d0d;
font-size: 13px;
text-decoration: none;}

a:link {
color: #0d0d0d;
font-size: 13px;
text-decoration: none;}

a:active {
color: #0d0d0d;
font-size: 13px;
text-decoration: none;}

a:visited {
color: #0d0d0d;
font-size: 13px;
text-decoration: none;}

Vista previa:

Texto por encima de la pagina:

Código:

Style sin tags:

Código:

lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}

#text{
color: ffffff;
position: absolute;
top: 100px;
margin-left:-300px;
left: 50%;
}

body {
background-color:#ffffff;}

*{ padding: 0; margin: 0; }

#Designmystic {
margin: 0 auto;
width: 800px;
height:700px;
background-image:url(http://img43.xooimage.com/files/e/e/b/sin-t-tulo-1-8e3174.png);}

#content {
position: absolute;
left:60%;
top: 230px;
margin-left:-226px;
width: 500px;
height: 460px;
padding:10px;
color: #707070;
font-size:12px;
background-color:#transparent;
background-image: none;
border: 0px solid #FFFFFF;
overflow:auto;}

#Uebersicht{
position: absolute;
left: 50%;
top: 204px;
margin-left:-440px;
font-color:#cccccc;}

a{
color:#707070;
text-decoration: none;
font-size:13px;}

a:hover {
color: #4A9AF6;
font-size: 13px;
text-decoration: none;}

a:link {
color: #000000;
font-size: 13px;
text-decoration: none;}

a:active {
color: #707070;
font-size: 13px;
text-decoration: none;}

a:visited {
color: #cccccc;
font-size: 13px;
text-decoration: none;}

div.lux
{
position: absolute;
z-index: 3;
top: 58px;
left: 52%;
margin-left: -160px;
width: 100px;
}

.lux a
{
border: 0px solid #xxxxxx;
background-color: #xxxxxx;
background-image: none;
text-decoration: none;
text-align: center;
font-weight: bold;
cursor: pointer;
margin: 0px;
display: block;
height:21px;
color: #FFF;
font-size: 60px;
}

imagen:

Codigo por arriba de la pagina

Código:

Codigo en: codes sin styles ni tags

Código:

lli.nav_element{display: none;}
li.nav_element a{display: none;}
h1#title{display: none;}
h2#title span {display: none;}

#text{
color: ffffff;
position: absolute;
top: 100px;
margin-left:-300px;
left: 50%;
}

body {
background-color:#000000;}

*{ padding: 0; margin: 0; }

#Designmystic {
margin: 0 auto;
width: 800px;
height:700px;
background-image:url(http://pixelea.com/s/e4d126581e.png);}

#content {
position: absolute;
left: 50%;
top: 275px;
margin-left:-325px;
width: 680px;
height: 390px;
padding:10px;
color: #000000;
font-size:12px;
background-color:#transparent;
background-image: none;
border: 0px solid #FFFFFF;
overflow:auto;}

#Uebersicht{
position: absolute;
left: 50%;
top: 204px;
margin-left:-440px;
font-color:#cccccc;}

a{
color:#ffffff;
text-decoration: none;
font-size:13px;}

a:hover {
color: #69c7fd;
font-size: 13px;
text-decoration: none;}

a:link {
color: #d50005;
font-size: 13px;
text-decoration: none;}

a:active {
color: #69c7fd;
font-size: 13px;
text-decoration: none;}

a:visited {
color: #69c7fd;
font-size: 13px;
text-decoration: none;}