Espero que disfruteis este recopilatorio, si llegais a usar alguno de ellos de forma personal o profesional, siempre mantener la información sobre el autor que viene en el código. Recopilatorio: MENUS-CSS Espero que los podáis usar alguna vez. Suerte a todos.
Así es como lo hicimos en clase, auqnue tambien se pueed hacer mas fácil poniendo de color azul el background del div contenedor. ... CSS usando el borde izquierdo ...
Lo primero que necesitamos para hacer el menu, es una lista con dos niveles. Nombramos el primero como "nav" y los demás con "off" excepto el que esta activo con "on". Después lo que vamos a hacer es flotar los elementos primarios para que se vean horizontalmente.Y esconder "hidden" todos los submenus o elementos secundarios. Aprovechamos tambien para dar color, grosor y borde a los links. A continuación posicionaremos nuestros elementos secundarios "#nav li.off ul, #nav li.on ul" debajo de los elementos principales de la lista, de talmanera que cuandolos mostremos nos queden en la situación correcta. Finalmente mostramos la barra de del submenu para el area activa, con un selector de todo el submenu de la clase "Modern" Por ahora deberíamos llevar algo asi: Ahora vamos activar el rollover (imagen de sustitución) . Usamos CSS para quitar el borde de los"nav" en el segundo nivel. Hay que obligar a mostra...
Para quien le interesa estas son las soluciones que he encontrado. Os podéis bajar la imagen que cambia de color a ByN aquí y los bordes redondeados con tres div aquí. El pirata patapalo.
Usando estilos (o lo que consideréis), intentar crear página lo más parecida posible a la de la foto de abajo. Os dejo el código HTML básico y todas las imágenes que utiliza. ->Aquí podéis descargar todo lo necesario.
La solución del ejercicio que vimos ayer. Os he puesto los bordes de las cajas de distintos estilos y colores para que los diferencieis. Si lo quereis ver bonito le quitais el borde o se lo poneis a 0. La descarga aqui.....
Editar el codigo del archivo html, comprobar y entender el comportamiento de los span. Editar uno de los gifs con el Photoshop y cambiar los colores y el grado de curva. Archivo de ejemplo
A partir del código HTML y CSS proporcionados, determinar las reglas CSS necesarias para añadir las siguientes propiedades a la tipografía de la página: La fuente base de la página debe ser: color negro, tipo Arial, tamaño 0.9em , interlineado 1.4em . Los elementos de .articulo se muestran en color #CC6600 , con un tamaño de letra de 1.6em , un interlineado de 1.2em y un margen inferior de 0.3em . Los elementos del #menu deben mostrar un margen a su derecha de 1em y los enlaces deben ser de color blanco y tamaño de letra 1.3em . El tamaño del texto de todos los contenidos de #lateral debe ser de 0.9em . La fecha de cada noticia debe ocupar el espacio de toda su línea y mostrarse en color gris claro #999 . El elemento de #noticias debe mostrarse de color #003366 . El texto del elemento #publicidad es de color gris oscuro #555 y todos los enlaces de color #CC6600 . Los enlaces contenidos dentro de .articulo son de color #CC6600 y todos los párrafos muestran un margen s...
Aqui os dejo como se usa la opacidad en las imagenes para que valga en todos los browsers. filter: alpha(opacity=25); -moz-opacity:.25; opacity:.25; Para Explorer, Firefox y Opera.
A partir del código HTML y CSS proporcionados, determinar las reglas CSS necesarias para añadir los siguientes colores e imágenes de fondo: os elementos #noticias y #pie tiene un color de fondo gris claro ( #F8F8F8 ). El elemento #publicidad muestra un color de fondo amarillo claro ( #FFF6CD ). Los elementos del lateral #secundario muestran un color de fondo #DB905C y un pequeño padding de .2em . El fondo del elemento #menu se construye mediante una pequeña imagen llamada fondo_menu.gif . El logotipo del sitio se muestra mediante una imagen de fondo del elementocontenido en el elemento #cabecera (la imagen se llama logo.gif ). El logo lo podeis hacer vosotros si quereis, el tamaño del que usa es de 162 x 63 px, si no lo podeis descargar aqui. El background lo haceis vosotros con el photoshop, es un cuadrado azul, podeis innovar y hacer vuestras pruebas.
Un regalito para todos los compis: CSS: Guia de referencia rápida Pinchar en el titulo de arriba para bajarosla, se imprime facilmente en dos páginas. Que lo disfuteis. El pirata pata-palo.
A partir del código HTML y CSS proporcionados, determinar las reglas CSS necesarias para añadir los siguientes bordes: Eliminar el borde gris que muestran por defecto todos los elementos. El elemento #menu debe tener un borde inferior de 1 píxel y azul ( #004C99 ). El elemento #noticias muestra un borde de 1 píxel y gris claro ( #C5C5C5 ). El elemento #publicidad debe mostrar un borde discontinuo de 1 píxel y de color #CC6600 . El lateral formado por el elemento #secundario muestra un borde de 1 píxel y de color #CC6600 . El elemento #pie debe mostrar un borde superior y otro inferior de 1 píxel y color gris claro #C5C5C5 .
A partir del código HTML y CSS proporcionados, determinar las reglas CSS necesarias para añadir los siguientes márgenes y rellenos: El elemento #cabecera debe tener un relleno de 1em en todos los lados. El elemento #menu debe tener un relleno de 0.5em en todos los lados y un margen inferior de 0.5em . El resto de elementos debe tener 0.5em de relleno en todos sus lados, salvo el elemento #pie , que solo debe tener relleno en la zona superior e inferior. Los elementos .articulo deben mostrar una separación entre ellos de 1em . Las imágenes de los artículos muestran un margen de 0.5em en todos sus lados. El elemento #publicidad está separado 1em de su elemento superior. El elemento #pie debe tener un margen superior de 1em Imagen de ejemplo final
A partir del código HTML y CSS que esta aqui : Añadir un margen superior de 30 píxel a todos los div Añadir un margen inferior de 30 píxel a todos los div
A partir del código HTML y CSS que se muestra, añadir los selectores CSS que faltan para aplicar los estilos deseados. Cada regla CSS incluye un comentario en el que se explica los elementos a los que debe aplicarse: Descargar el codigo HTML aqui