Comenzemos !!
En este tutorial vamos a saber las extructuras y los componentes que se relacióna para armar un diseño conociendo sus extructuras, al saber de las estructuras se logran hacer diseños perfectos.
Para páginas del servicio de webme primero copiamos el siguiente código, lo pegamos en Advertencia referente al campo de contenido (p.ej. Copyright): para borra todo haci comenzamos de 0.
Una vez agregado el código, tendran una plantilla blanca, si tienes ya un diseño en blanco, eso es lo que queremos.
Primero necesitamos fondo (body), Encabezado (header), Contenido (main & wrap o content), menu (menu o nav), Box (Sidebar), Pie de página (footer)
Vamos a usar estas 6 opciónes muy utiles para comenzar un diseño css desing desde 0.
Paso 1 - Fondo (Body - Background)
Como sabemos el fondo nunca tiene que faltar, vamos a usar el siguiente códe.
Cita:
body {
Codigo para agregar al fondo.
}
Esta parte ya tenemos incorporado el fondo (body) ahora lo que hace falta es agregar algo al fondo, por ejemplo imagen de fondo que usaremos background-image: (fondo con imagen) o background-color: (color de fondo) + color:#000; color de los textos, pero atención si usamos este codigo de color, se cambiara todos los colores del encabezado box todo, el uso es grupal, Tambien le podemos agregar margin:0; padding:0; todo que venga para poder cambiar el fondo para hacerlo con mas estilo.
Cita:
body {
background-image: url(http://img.webme.com/pic/m/master-nemesis/cuadriculado.jpg); background-repeat: repeat;
}
Yo en mi caso le agrege un fondo mosaico. Listo ya terminamos con el fondo.
Paso 2 - Contenido Afuera (Wrap)
Ahora vamos a modificar el contenido del diseño de la parte afuera juntado con el contenido de adentro para eso vamos a usar wrap el código es
Cita:
#wrap {
Codigo para modificar el contenido.
}
Usaremos wrap para modificar el ancho del diseño width:Numeropx; para centrar el contenido margin:0 auto; y para agregarle color o imagen de fondo background:#ccc;
En el contenido hemos agregado, ancho - centralizado y color de fondo.
Paso 3 - Encabezado (header)
En el encabezado tiene muchas personalizaciónes al igual que contenido y el fondo, vamos a usar la siguiente regla que lo representa al encabezado; para css #header para div <div id="header">
Cita:
#header {
CONTENIDO ENCABEZADO
}
Si usamos la regla header podemos personalizar al encabezado, para eso le agregaremos fondo color o imagen + alto + relleno.
Al encabezado ya le hemos agregado una serie de cambio de estilo, pero falta algo muy importante, el componente.
<div id="header">HEADER</div>
Seguimos con el componente div que menciona al header.
En contenido podemos poner texto de encabezado de esta manera <div id="header"><h1>HEADER</h1></div> Con esto se podra visualizar el encabezado con texto, si no queremos texto sacamos <h1>HEADER</h1>
Tambien podemos personalizar el texto de encabezado usando el código margen en css
Cita:
h1 {
margin:0;
}
Asi vamos personalizando el encabezado con mucho mas codigos que lo relacionen.
Paso 4 - Menu (nav)
Para usar menu debajo del encabezado, existe un metodo de hacerlo simple o despegable, usaremos el simple, el código que lo relaciona con el menu es nav pero necesita de 2 compositores fundamentales que es el ul que encierra al li, en css usaremos #nav #nav ul #li y para div <div id="nav"><ul><li>.
Cita:
#nav {
CÓDIGO PARA PERSONALIZAR EL MENU
}
#nav ul {
ALINEACIÓN
}
#nav li {
ALINEACIÓN
}
nav || Podemos agregar color de fondo al menu como ejemplo.
nav ul & nav ul || Vamos a alinear el menu para que quede fijo en su posición para eso usamos display:inline; margin:0; y lo podemos separar usando padding:0;
Cita:
#nav {
background:#eee;
}
#nav ul {
margin:0;
padding:0;
}
#nav li {
margin:0;
padding:0;
display:inline;
}
Cuando son menu de esto tipo siempre se recomienda usar nav ul y nav li porque son la extructura del menu como lo vemos, si le falta alguno de eso, el menu no funcióna.
Paso 5 - Sidebar
Para agregar un box alado del contenido de adentro (#main), primero debemos que el main tiene que ser chico de ancho asi entra el sidebar, si el ancho del contenido de afuera (wrap) es 1000px debemos dividir la mitad para que entre el sidebar por ejemplo el main #main {width:650px;} y #sidebar {width:310px;} si sobre pasa los 1000 ambas estructura se defigurá la página.
Comenzamos usando el código del sidebar.
Cita:
#sidebar {
CONTENIDO
}
Dentro del contenido, vamos agregar posición derecha (float:right;) ancho (width:) relleno (padding:) y fondo (background:)
Vamos con el div usando <div id="sidebar"> y para agregarla algo al nuestro sidebar podemos agregarle lista de menu simple en el que usamos anteriormente con texto <h1></h1>,
Es un ejemplo de que le podamos poner al sidebar, le podemos poner un calendario, relojes, Caja de facebook, boton twitter, mientras que tenga las medidas correspondiente.
Paso 6 - Contenido adentro (main)
Ahora vamos a modificar el contenido del diseño de la parte de adentro que seria el box principal del contenido, para eso usamos en css #main y para div <div id="main">
Cita:
#main {
CONTENIDO DEL BOX PRINCIPAL
}
Lo que usaremos para el contenido del box principa del contenido, vamos a darle ancho (width) alto (height) relleno (padding) y fondo (background).
Se puede tener una mejor personalización mientras se agrege mas código en la parte del css, les haré otro ejemplo de una parte.
Por ejemplo en css:
#sidebar {
CONTENIDO
}
El sidebar se puede tener mas contenido en css mientras se relacióne las estructuras por ejemplo: #sidebar { Código } #sidebar ul.sidemenu { Código } #sidebar ul.sidemenu li { Código } #sidebar ul.sidemenu li a { Código } #sidebar ul.sidemenu li a:hover { Código } #sidebar ul.sidemenu li a:hover, #sidebar ul li.current a { Código }#sidebar h1 { Código }
En la parte donde esta encerrado con código=contenido se pueden poner clases de html: margin padding background border width color text-decoration // colores de bordes, fondo, decoración del texto, rellenos, ancho etc.. y muchos códigos de utilidades mas que sirvan para personalizar esa parte, sirve para cada estructura con su respectiva div.
Con un diseño creado a base css y html se pueden logran un gran avance de optimización de la página.
background-image: url(http://Enlace de la página.jpg);
http://Enlace de la página.jpg || la remplazaremos por el link directo de la imagen subida, tiene que ser el link directo, por ejemplo este: http://img.webme.com/pic/m/master-nemesis/cuadriculado.jpg
body {
background-image: url(http://img.webme.com/pic/m/master-nemesis/cuadriculado.jpg);
}
El fondo en este caso es de una imagen de 70x71px de alto y ancho, es una imagen pequeta, cuando se agrega el fondo en una imagen chica, no ocupará toda la pantalla, en ese caso la podemos repetir.
Cita:
background-repeat: repeat;
repeat || repetir imagen.
no-repeat || no repetir imagen.
El resultado seria.
Código:
body {
background-image: url(http://img.webme.com/pic/m/master-nemesis/cuadriculado.jpg); background-repeat: repeat;
}
El fondo se repite en mosaico, si lo queremos estaticos le ponemos no-repeat.
El fondo le agrege un color masomenos blanco, para distinguirlo.
El código del fondo puede ser en palabras por ejemplo (red) o en hexadecimales numeros (#FFFFFF).
Con esto ya tendriamos un contenido fijo & centrado, ahora lo que nos haria falta es el aspecto, vamos agregar algunos estilos de bordes, usaremos el código border.
Cita:
border: Xpx;
Al borde le podemos agregar unas clases de estilo, por ejemplo color de bordes y grosor.
Usaremos border + px + grosor + color = border:Xpx solid orange;
Cita:
border:1px solid #000000;
1px || El grosor del border.
Solid || Estilo de borde, otros estilos (dashed - dotted)
#000 || Color del borde, otros colores (orange - #000)
A estos estilos de bordas tambien le podes hacer un cambio, le podemos hacer estilo redondeados, usando Border-radius + px.
Cita:
border-radius: Xpx;
Lo que hará esta clase de código es redondear las partes superiores e inferiores, que seria 4 partes.
border-radius: 1px1px1px1px;
Vamos a ir por parte.
1px || Es la parte superior izquierda.
1px || Es la parte superio derecha.
1px || Es la parte inferior derecha.
1px || Es la parte inferior izquierda.
Como vemos son 4 partes modificables. Mientras mas valor de px sea, mas redondeado estará.
Ahora para darle un efecto mas especializado el diseño para que se vea bien, usaremos el estilo de sombra en el contenido wrap, usamos box + sombra + grosores + color.
box-shadow: 0px0px5px5pxorange;
0px || Grosor de sombra del lado izquierdo.
0px || Grosor de sombra de la parte arriba.
5px || Ancho de la sub-sombra.
5px || Ancho de la sombra.
orange || Color de la sombra, otros colores (orange - #000)
Este código lo tendremos que remplazar por border:5px solid #000000;
Hola,
Efectivamente, pero el div no lo puse porque es un tema aparte ya que no solo podemos usar div id para llamar, hay otras manera de llamarlo, por eso lo separé, no habra confusión porque esta en el primero tema que puse, vamos paso a paso
El encabezado es algo muy importante en hacer cambios, por defecto se pone la imagen y ya esta, pero este tutorial vamos hacer algo mas avanzado.
Como sabemos el encabezado vamos a ponerle Header o encabezado y siguiendo con el campo de código.
Cita:
Header{Código}
Por defecto en cada encabezado habra una imagen o color, para ponerle ambos de los dos vamos a poner background como fondo, y seguido el color o la imagen que queremos ponerle.
#EN COLOR
background-color: #Código;
#EN IMAGEN.
background-image: ("URL DE LA IMAGEN");
Usamos la que queremos, en mi caso pondre una imagen, y asi comenzaremos armar el código.
Cita:
Header{
background-image: ("URL DE LA IMAGEN");
}
URL DE LA IMAGEN || En esta parte que dice "url de la imagen" vamos a subir una imagen de encabezado, las medidas son 999x250 px seria esta.
Pero como el fondo del encabezado es la medida justa, no hace falta agregar el código, lo podemos sacar.
Ahora vamos a ver los posicionamientos del encabezado.
Existes formas de repetir el fondo, vertical y horizontal.
Para repetir el fondo en vertical, usaremos repeat-y
Código:
background-repeat: repeat-y;
y para repetir el fondo en horizontal, usaremos repeat-x
Código:
background-repeat: repeat-x;
Eso si la imagen no esta ajustada del todo.
Para posicionar el fondo, vamos a usar el metodo position.
El metodo background-position nos da la posibilidad de que la imagen de fondo la podamos posicionar, las imagenes que no se repiten siendo una imagen chica.
Código:
background-position:center;
El fondo lo podemos centrar - moverlo a la derecha (right) o izquierda (left) Arriba (top) abajo (buttom)
Es una forma para posiciónarlo correctamente, si la imagen de fondo esta bien, solo vamos agregar.
Los menus que se puede poner en el encabezado es algo muy detallado ya que entra en 2 elementos, tenemos que usar el menu (nav - ul - li) y el campo masthead.
Código:
#masthead {Code}
Vamos a comenzar armando el masthead.
Le vamos a poner solo el ancho, lo que le vamos hacer horizontal esta barra.
Agregamos width + los pixeles o los porcentajes.
width:980px;
o
width:100%;
Quedaria así el masthead
Código:
#masthead {width:100%;}
Ya tenemos el ancho ajustado, ahora vamos con los menus.
Como sabemos los menu comienza con nav para eso comenzaremos asi.
Código:
.nav_masthead{Code}
lo que le agregaremos el code, este es el campo del texto, como debemos agregarle algo al texto vamos a agregarle por ejemplo: fuentes, color etc..
► Tamaño de de la fuente.
font:Xpx
► Fuente:
elegimos alguna fuente, por ejemplo: verdana o arial.
Para agregarla algunos puntos de enlaces que estará en el menu, podemos poner imagenes o no dejar nada.
Imagen en puntos.
list-style: url("url de la imagen de 9x9 ");
Sin puntos.
list-style:none;
Una vez terminado con la edición, vamos a ponerlo en el nav_masthead
Ahora vamos con el segundo paso que son las li seguido del código anterior.
Código:
.nav_masthead li {code}
En este caso seria el posicionamiento, vamos usar el metodo float y position.
Código:
.nav_masthead li {float:left;position:relative;}
Tercer paso. los links.
Para llamar a un enlace que usamos (a)
Código:
.nav_masthead li a {code}
De color a los enlaces, vamos a darle un color blanco ya que el fondo del encabezado es negro, por eso le doy el color blanco.
Cita:
{color:#FFF}
Seguido le vamos a dar un bloqueo para que este estatico el menu.
Cita:
{color:#FFF;display:block}
Ahora la parte mas importante, es el relleno, el padding con sus 4 partes.
Cita:
{color:#FFF;display:block;padding:6px 15px 7px;}
Ahora para darle un hover a los links ponemos. li a:hover {color}le agregamos un color y ya estaria casi terminado esta estructura css.
Cita:
.nav_masthead li a:hover {color:#FF5E00;}
Ahora ya estaria terminado el menu, pero si le queremos poner una imagen para distinguirlo, seguiremos armando el código.
Cita:
.nav_masthead li a.nombre del div
seguiremos con el nav ya que forma parte de lo que vamos hacer, donde dice nombre del div es el lugar donde se va almacenar la imagen que tiene que ser las medidas de un favicon.
Cita:
.nav_masthead li a.face{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_mn.png") no-repeat 3px center;padding-left:23px;}
Usamos transparent para que se vea el fondo de atras y la url de la imagen es para que este alado de los enlaces.
Las medidas de la imagen tiene que ser 16x16
no-repeat || Para que no se repita la imagen.
3px || Para separar el espacio de la imagen con el primer enlace.
center || Posición.
padding-left:23px || El espacio del primer enlace.
Lo mismo tenemos que hacer con el hover si lo ponemos.
Será el mismo código solo agregando a:hover.
Cita:
.nav_masthead li a:hover.face{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_mn.png") no-repeat 3px center;}
Vamos agregar 4 mismo link con diferentes imagenes que pongamos.
El resultado quedaria asi.
Cita:
.nav_masthead li a.rss{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_mn.png") no-repeat 3px center;padding-left:23px;}
.nav_masthead li a:hover.rss{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_mn.png") no-repeat 3px center;}
.nav_masthead li a.youtube{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_you.png") no-repeat left center;padding-left:20px;}
.nav_masthead li a:hover.youtube{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_you.png") no-repeat left center;}
.nav_masthead li a.facebook{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_face.png") no-repeat left center;padding-left:20px;}
.nav_masthead li a:hover.facebook{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_face.png") no-repeat left center;}
.nav_masthead li a.twitter{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_twi.png") no-repeat left center;padding-left:20px;}
.nav_masthead li a:hover.twitter{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_twi.png") no-repeat left center;}
y armando todo el códe.
Cita:
#masthead {width:100%;}
.nav_masthead {font:13px verdana,arial,helvetica,sans-serif;list-style:none;}
.nav_masthead li {float:left;position:relative;}
.nav_masthead li a {color:#FFF;display:block;padding:6px 15px 7px;}
.nav_masthead li a:hover {color:#FF5E00;}
.nav_masthead li a.gab_rss{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_mn.png") no-repeat 3px center;padding-left:23px;}
.nav_masthead li a:hover.gab_rss{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_mn.png") no-repeat 3px center;}
.nav_masthead li a.gab_youtube{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_you.png") no-repeat left center;padding-left:20px;}
.nav_masthead li a:hover.gab_youtube{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_you.png") no-repeat left center;}
.nav_masthead li a.gab_facebook{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_face.png") no-repeat left center;padding-left:20px;}
.nav_masthead li a:hover.gab_facebook{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_face.png") no-repeat left center;}
.nav_masthead li a.gab_twitter{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_twi.png") no-repeat left center;padding-left:20px;}
.nav_masthead li a:hover.gab_twitter{background: transparent url("http://img.webme.com/pic/m/master-nemesis/gab_twi.png") no-repeat left center;}
Sus divs son.
Comenzando con
Cita:
<div id="masthead">
Seguido con el nav que seria en la barra masthead (nav_masthead)
Cita:
<ul class="nav_masthead">
Cada menu se tiene que nombrar para eso usamos
Cita:
<li>Code</li>
En code tenemos que hacer referencia al css que usamos, que seria "gab_rss" gab_facebook" "gab_twitter" "gab_youtube", luego de nombrarlo ponemos seguido el código de enlace.
El sidebar que son las partes laterales donde vendria siendo el lugar donde estan los boxs, son bastantes modificables y facil de agregar, no hay contenido obligatorio que puede llegar haber en esa parte, comenzemos
Código:
#sidebar {code}
Usamos sidebar para componer, como todo sidebar, necesitaremos ubicar en donde estará, para eso usamos el siguiente código.
Cita:
float:right;
El sidebar posicionado en el lado derecho del contenido. usamos right para que sea del lado derecho, ahora vamos con su ancho, si el contenido que quieres agregar por ejemplo la caja like de facebook, en 300px se puede incrustar, para eso le damos un ancho de 310 para sobre algun espacio.
Cita:
width:310px;
Para poder separar el contenido que agreges para que no este muy ajustado con el diseño, le podemos dar un padding de 5 a 10 px para que se pueda separarlo.
Cita:
padding:10px;
Ya una vez ajustado con el ancho + la posición y la separación, comenzaremos agregarle un fondo.
Cita:
background:#FFF;
Ya el fondo le agrege un fondo de color blanco #FFF se puede cambiar el color o poniendo una imagen agregando background-image: url ("url de la imagen");
Ahora vamos a darle un estilo de caja al sidebar, para eso usaremos los bordes izquierdo (left) + derecho (right) + arriba (top) + abajo (buttom).
Cita:
border-bottom: 1px solid #CFCFCF;
El borde será en linea solida con 1px de grosor y el color gris claro #CFCFCF en la parte baja.
Cita:
border-left: 1px solid #CFCFCF;
El borde será en linea solida con 1px de grosor y el color gris claro #CFCFCF en la parte izquierda.
Cita:
border-right: 1px solid #CFCFCF;
El borde será en linea solida con 1px de grosor y el color gris claro #CFCFCF en la parte derecha.
Cita:
border-top: 1px solid #CFCFCF;
El borde será en linea solida con 1px de grosor y el color gris claro #CFCFCF en la paarte de arriba.
Ya una vez terminado con la edición, vamos a juntar los código y lo cerramos.
Este seria el css, Ahora pasamos a los titulos del sidebar.
#TITULOS SIDEBAR.
Para nombrar un estilo al sidebar, tendremos que usar el código #sidebar + el nombre del titulo h1
Código:
#sidebar h1 {code}
Este campo del códe vamos agregarle todas las fuentes de estilo de texto que queremos que lleve en el titulo del box, comenzemos con la edicion, comenzamos agregandole un estilo de fuente.
Cita:
font:1.5em Arial;
Ponemos el 1.5 del tamaño y la fuente del texto que es arial.
Cita:
font-weight:bold;
Fuente negrita en la fuente arial.
Ahora pasemos agregarle un fondo al campo.
Cita:
background: rgb(242, 242, 242);
Como tiene fondo, le agregaremos color de texto.
Cita:
color:rgb(252, 144, 3);
Ahora para hacer espacio en el titulo sobre el contenido, vamos agregar un relleno y margen al texto.
Cita:
margin:5px 0px 0px 0px;
Cita:
padding:3px 15px;
Mientras mas valor le demos mas espacio se hará.
Cuando terminemos con la edición, vamos a cerrar el código completo.
Para nombrar este efecto, dentro del div del sidebar, tendremos que llamarlo usando <h1>Texto </h1>
#CONTENIDO EN EL SIDEBAR.
Ahora vamos lo que contendra dentro del contenido, si le agregamos links vamos hacer lo siguiente.
Como contendra un nuevo div en el sidebar vamos a ubicar esa parte poniendo div. punto y seguido pondremos div.sidebarlinks {code}
Código:
div.sidebarlinks {code}
sidebarlinks será el campo del sidebar donde contendran menu links, vamos con la estructura que seria en texto, pero antes un fondo a ese campo div le pondremos.
Cita:
background-color: #FFF4C8;
Le damos un color o imagen de fondo al div.
Ahora pasamos a los estilos de fuente de letras que llevará en los links.
Cita:
font-family: "arial", "helvetica", sans-serif;
Las fuentes selecionadas: arial helvetica sans-serif.
Vamos con el tamaño.
Cita:
font-size: 11px;
Si queremos agregarle un color le podemos agregar, pero ahora vamos a hacer lo mismo los espacios anteriores, vamos ajustar los espacios usando los mismos códigos margin y padding.
Cita:
margin: 3px;
Cita:
padding: 7px;
Una vez terminada, vamos a juntar y cerrar los códigos en el css.
Para hacer un menu simple y avanzado requiere de usos especificos de códigos padding y margin.
En la plantilla esta usando un menu simple.
CSS.
#nav {background:#eee;}
#nav ul {margin:0;padding:0;}
#nav li {margin:0;padding:0;display:inline;}
Ahora el css lo vamos hacer mas avanzado.
Vamos a crear un nuevo menu que no se relacionen con todos los nav que se ha puesto anterior en el encabezado.
Vamos a utilizar.
PASO #1 ARMAR MENU
Cita:
ul#menu {Code}
Comenzamos armando el inicio del menu ul.
Iniciamos el código poniendo un fondo.
Cita:
ul#menu {
background-color: #EEE;
}
Pondré un fondo gris claro.
Ahora vamos a poner el menu fijo utilizando padding y margin.
El fijo esta en 0 si modificamos este valor hará un desposiciónamiento alfinal, por eso lo dejaremos asi.
Para centrar un poco el padding, tendremos que usar el código bottom para darle un centro en pixeles.
Seguimos ahora poniendo el ancho que ocupe todo el ancho que se inscrupta en el diseño, para que sea ajustado al 100% el ancho lo agregamos width:100%;
Como le pusimos un ancho, tambien le pondremos un alto. Usaremos el código height en px, ya que si ponemos en % se hará muy alto y no quedaria muy bien en la página.
Usaremos los mismos valores, ahora le agregaremos 2 código extra para posiciónarlo mejor, si tiene un menu despegable, es necesario agregar float izquiedo y position relativo.
Este menu será despegable, si lo hacemos despegable le podemos agregar un hover, para hacerlo hover tendremos que llamarlo usando alado del menu li : hover
Cita:
ul#menu li:hover{code}
Pondremos un código simple ya que la ajustación, esta perfecta en el paso anterior, le podemos agregar color de fondo.
Cita:
ul#menu li:hover{
background:#eee;
}
Este efecto solo hará un hover a los menu no despegable.
PASO #3 MENU UL
Como usaremos un menu despegable, tendremos que configurar esa parte que seria ul#menu ul
Cita:
ul#menu ul {CODE}
Como siempre le agregamos un estilo de fondo al menu,
Cita:
ul#menu ul {
background: #CCC;
}
Viene siendo el menu despegable, en códe vamos a ajustar el padding y margin en 0 y desaparecer los puntos de los textos.
Esta parte del ancho viene siendo algo estilo al menu despegable. Usamo width pero atención, el valor que le demos si es 160px será un menu despegable en vertical, si le damos un valor de 560px será un menu despegable en horizontal, usaremos cualquiera de las 2 versiónes.
Para que el menu sea despegable, tendremos que poner el display para bloquear esa parte para que se mantenga oculta al pasar el mouse sobre el link despegable.
Si cambiamos la posición absolute, el menu despegable se verá por otras partes y no por el link, asique lo dejamos asi.
PASO #4 Posicionar del mismo paso el li del despegable.
Agregaremos un solo valor, que es el mismo ancho del menu ul
Cita:
ul#menu ul li {
width: 160px;
}
PASO #5 MENUS ENLAZADOS.
Ahora pasaremos a personalizar el menu con estilos de fuentes, textos, ancho de la fuente, color etc..
Primero vamos a justar bien el espacio y bloquear esa parte para que no se modifique, usaremos padding y display, no vamos a usar el margin por ahora.
Cita:
ul#menu a {
padding: 5px 15px 5px;
display: block;
}
Una vez ajustado, ahora ponemos el estilo de fuente y demas.
PASO #6 PERSONALIZAR LOS LINKS HOVER DEL DESPEGABLE.
Una vez puesto la fuente, ya lo dejaremos asi para que sea en todo el menu el estilo que le pusimos, ahora vamos con el hover.
Usaremos el paso #2 antes de cerrar el código ponemos .hover a que seria en los enlaces despegables, le damos un color azul.
Cita:
ul#menu li.hover a {
color: #0703FF
}
PASO #7 PERSONALIZAR LOS CAMPOS LINKS HOVER DEL DESPEGABLE.
Para personalizarlo usaremos los siguiente campos y compatibles con el navegador.
Cita:
ul#menu li:hover li a:hover,
ul#menu li:hover li:hover a,
Compatibilidad:
Código:
ul#menu li.iehover li a:hover,
ul#menu li.iehover li.iehover a
Juntamos y ponemos el {CODE}
Quedaria de esta menera.
Cita:
ul#menu li:hover li a:hover,
ul#menu li:hover li:hover a,
ul#menu li.iehover li a:hover,
ul#menu li.iehover li.iehover a {CODE}
En código podemos cambiar el fondo y el color de link, por ejemplo.
Cita:
ul#menu li:hover li a:hover,
ul#menu li:hover li:hover a,
ul#menu li.iehover li a:hover,
ul#menu li.iehover li.iehover a {
background:#0703FF;
color: #FFF;
}
Los hover se cambiara al pasar el mause sobre el enlace del menu despegable.
PASO #8 PONER A FUNCIÓNAR EL MENU DESPEGABLE.
Ahora vamos a poner a funciónar el menu despegable que pusimos anteriormente para que el cambio se efectue normalmente, para eso, juntamos todos los campo del menu hasta el hover ul y li {esta parte ponemos diplay:block para que quede estatico en su posición}
Cita:
ul#menu li:hover ul,
ul#menu ul li:hover ul,
ul#menu ul ul li:hover ul,
ul#menu li.iehover ul,
ul#menu ul li.iehover ul,
ul#menu ul ul li.iehover ul {
display: block;
}
Y listo, ya una vez puesto a funciónar el css, solo nos falta la estructura en div.
PASO #9 CSS COMPLETO.
Código:
ul#menu {
background-color: #EEE;
margin: 0;
padding: 0;
padding-bottom:5px;
width:100%;
height: 20px;
list-style: none;
border:1px solid #ccc;
}
ul#menu li {
margin: 0;
padding: 0;
padding-bottom:5px;
height: 20px;
list-style: none;
float: left;
position: relative;
}
ul#menu li:hover{
background:#EEE;
}
ul#menu ul {
background: #CCC;
margin: 0;
padding: 0;
list-style: none;
width: 160px;
display: none;
position: absolute;
}
ul#menu ul li {
width: 160px;
}
ul#menu a {
padding: 5px 15px 5px;
display: block;
color: #000;
text-decoration: none;
font-weight: bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
}
ul#menu li:hover a {
color: #0703FF
}
ul#menu li:hover li a:hover,
ul#menu li:hover li:hover a,
ul#menu li.iehover li a:hover,
ul#menu li.iehover li.iehover a {
background:#0703FF;
color: #FFF;
}
ul#menu li:hover ul,
ul#menu ul li:hover ul,
ul#menu ul ul li:hover ul,
ul#menu li.iehover ul,
ul#menu ul li.iehover ul,
ul#menu ul ul li.iehover ul {
display: block;
}
PASO #10 DIV MENU
Como mucho sabemos, el div del menu es muy simple de agregar, no es muchos cambios, son lo mismo div de un simple menu, ¿pero como se puede hacer resultados como estos? es solo el css que hace el cambio, lo que el menu css es #menu {code css} y solo nos hace falta llamar al css que se incorporé en el div id.
Cita:
<ul id="menu">
Lo remarcado en azul, viene siendo lo mas importante de esta estructura.
# || Es el enlace html que llevará los textos en el menu
*1 || Es el menu despegable de la ultima página de arriba, por ejemplo tutoriales o indice
Los texto de cada menu se encuentra antes de cada </a>
Como vemos es una simple estructura css y div de un menu despegable, solo hace falta trabajar en cada parte que compone un menu horizontal despegable y darle un estilo y donde bloquear esa parte para que no halla fallas en el div, se trabaja mas con padding - margin - display || estilos - font - background.
ul#menu || Comienzo del menu. || id="nombre en el css"
ul#menu ul || Composición y posiciónamiento del menu. || <ul id="nombre en el css">
ul#menu li || Composición y posiciónamiento del submenu. <li>enlace</li>
ul#menu a || Enlaces de menu. || <a href='#'>texto</a>
ul#menu ul li || ajustar el menu cambinado. || <ul id="nombre en el css"><li><a href='enlace'>texto</a></li><ul>
No solo en el (li) se puede agregar enlace sino otro metodos de ajustar el html que le podamos poner, por ejemplo un buscador o solo texto.
El css se agrega despues del #header y el div se agrega despues de <div id="header"></div> ______________
Las cookies son pequeños fragmentos de información de texto que nosotros o nuestros socios, almacenamos sobre usted de forma local por medio de su navegador.
Puede evitar el uso de cookies en cualquier momento a través de la configuración de su navegador.
Usamos las siguientes cookies que cumplen con el GDPR:
- Cookies esenciales: son absolutamente necesarias para que el sitio web sea completamente funcional.
- Cookies opcionales: son opcionales y nos ayudan a mejorar el sitio web, por ej. analizando el comportamiento de uso del sitio web sin identificarle personalmente.
Puede encontrar más información en nuestra sección de protección de datos/privacidad.
