parte 1
1- Crearemos un fondo que será el design (asegurensé que el alto sea menor al alto de la resolución de la pantalla). Es decir, todo lo que sea imagen y no texto. En mi página web, sería esta:
Colocaremos el código en texto por encima de la página:
| Cita: |
| <style> body {background-image:url(URL de la imagen de fondo);font-size:00px;} </style> |
Dejen así lo de font-size, si no se les verá el menú encima
2- Luego, de esto. Debemos colocar todo lo que NO es el contenido con el código de pirro, (que les enseñaré a usarlo mejor) en Advertencia referente al campo de contenido. No se si entienden. Es decir, lo que va en box, menú, contadores, calendarios, publicidades, etc.
Para eso, vamos a tomar como ejemplo, el menú.
Primero, debemos tener nuestro html de nuestro menú ya listo. (sea desplegable, horizontal, vertical, etc). Yo, les recomiendo que el diseño de menú, lo hagan junto a la imagen del fondo, es decir, solo en una imagen. Luego agregarle solamente el título de las páginas, sin fondo.
Este es el code de pirro.
| Cita: |
| <div style="position:absolute;left:398px;top:87px;"> Código html de nuestro menú </div> |
Lo único que debemos modificar son los números left (398) y el top (87).
[Horizontal] El número left, es la distancia, en pixeles, desde el borde izquierdo de la pantalla hasta donde comienza el menú.
[Vertical] Y El número top, es la distancia, en pixeles, desde el borde superior de la pantalla hasta donde comienza el menú.
Y hacemos lo mismo con cualquier cosa que tengamos que agregar, a parte del contenido.
En todos los que van dentro del código de pirro, recomiendo antes, crearla en Una página nueva en Controlar páginas. Así asegurarnos del html. Es decir, creamos lo que va en la página, luego apretar Fuente HTML, copiarlo y pegarlo allí entremedio.
3- Ahora, vamos al contenido.
Lo bueno, es que no hay que modificar ninguna página (me refiero a Controlar páginas)
Solo debemos usar este código, que lo debemos colocar en CSS-Code Sin tags Style:
| Cita: |
| #content { position: absolute; left: 37%; top: 154px; margin-left:-283px; width: 800px; height: 318px; padding:10px; color: #transparent; font-size:11px; font-family:tahoma; background-color:#transparent; background-image: none; border: 0px solid #FFFFFF; overflow:auto;} |
modifiquen lo verde del código.
En el LEFT, pongan un valor entre 20% y 70%. No se porque es así xD
En el TOP, la distancia, en pixeles, desde el borde superior de la pantalla hasta donde comienza el contenido.
En el width, el ancho del contenido.
En el Height, el alto del contenido.
Luego, pueden modificar el borde, el fondo, el color de la letra, etc.
Recuerden especificar un tamaño de la letra en el font-size (no pongan 0px), si no, no se les verá el texto.
