Tu slogan puede colocarse aqui
creando el desing
| EN TEXTO SOBRE EL DISEÑO: | |
| Texto por debajo de la página | |
| CSS-Code sin Style Tags |
-------------------------------
EDITAR EL MENU:
cada boton seria:
<ul>
<li class="top"><a class="top_link" href="LINK"><span>TEXTO</span></a></li>
</ul>
Para un boton con subpagina:
<ul>
<li class="top"><a class="top_link" href="#"><span class="down">TEXTO PAGINA</span></a>
<ul class="sub">
<li><a class="fly" href="URL de la sub">Subpagina 1</a></li>
</ul>
</li>
</ul>
Si quisieramos subpagina de subpagina, osea el segundo nivel:
<ul>
<li class="top"><a class="top_link" href="#"><span class="down">MENU</span></a>
<ul class="sub">
<li><a class="fly" href="">subpagina 1</a>
<ul>
<li><a href="">subpagina 1.1</a></li>
<li><a href="">subpagina 1.2</a></li>
</ul>
</li>
</li>
</ul>
</li>
</li>
</ul>
Fijate que cada vez que se abre un ul, o se cierra, estan emparejados y tienen una sangria (varios espacios delante) aqui lo he representado por color para identificarlos, es para ordenarlos y saber que estan bien colocados... acostumbrese a tratar los codigos htmls de esta manera para ser mas facil trabajarlos.
------------------------------------------------------
------------------------------------------------------
| a { color: #ff000; a hover: { color:#336699; } |
esto es el color de los links activos, y de pasar el raton por ellos |
| /* fondo */ body { background: #FFFFFF url(https://img.webme.com/pic/s/sweetyandlatina/fondos.jpg); font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; color: #7F7772; } |
Aqui determinamos, el color de fondo o si le pones tu propio fondo. ademas del tipo de letra extandar en fon-familiy.. cuando hay mas de uno, es porque si falla el primero, el navegador del internauta activaria el segundo y sucesivamente. con font-size, tamaño de texto general.. y color preterminado |
| /* cabezal */ #logo { width: 250px; height: 160px; background: url(https://img.webme.com/pic/d/disenyo/logo2.png) no-repeat; } #banner { width: 800px; height: 160px; background: url(https://img.webme.com/pic/d/disenyo/banner2.png) no-repeat; } #head { width: 100%; height: 32px; background: none no-repeat; } |
De aqui solo usamos el "head" que determina la altura que quisimos darle para crear el espacio del menu... tanto el banner, como el logo, auqnue esten aqui preparados para usarse, no estan activados... pero los deje ahy por si quieres usarlos... Truco, si quieres ponerlo en la web, por una pagina por ahy, en lugar de cargarlo como imagen prueba poner en codigo html: img id="logo" o img class="logo" y sale. |
| #container { width: 95%; margin: 0 auto; padding: 0; background: #DDA92F; -moz-border-radius: 20px; /* Firefox */ -webkit-border-radius: 20px; /* Google Chrome y Safari */ border-radius: 20px; /* CSS3 (Opera 10.5, IE 9) */ } |
Este es el contenedor de fabrica de pwg, como veras el ancho esta en porcentage, lo que quiere decir que aunque nuestro monitor sea mas grande, siempre ocuparia el 95% ademas tiene bordes redondeados adaptados a los navegadores principales. su color de fondo es el mostaza. DDA92F |
| /* caja lateral izquierdo */ #sidebar { width: 240px; float: left; margin: 5px 10px; padding-bottom: 30px; } |
Para activar el box, debes ir a "texto sobre la pagina" y ponerlo despues de "content" como div... de todas formas te enviare el codigo con sidebar. |
| /* BLOQUE DE TEXTOS */ h2#title span {color:#ff0000;} #content { float: auto; width: 98%; margin: -10px 5px; padding: 0 0 30px 10px; background: #ffffff; -moz-border-radius: 20px; /* Firefox */ -webkit-border-radius: 20px; /* Google Chrome y Safari */ border-radius: 20px; /* CSS3 (Opera 10.5, IE 9) */ } |
Aqui es donde saldran los textos de la web, toda la informacion o imagenes.. con bordes redondos adaptados. Ademas del tamaño y color de titulo de cada pagina |
| /* textos de copyright y agradecimientos */ #footer { clear: both; height: 30px; padding: 5px; border-top: 3px solid #bbd9ee; background: #DDA92F; } |
Esta es la zona de abajo... border-top seria esa linea horizontal. el fondo general seria background. |
Registrarse gratis