miércoles, 25 de julio de 2012

Menú Desplegable con CSS

Menú Desplegable

Una forma fácil de hacer un menú desplegable sería utilizar Flash, pero, al momento encontrariamos varios inconvenientes: el tamaño del archivo, la compatibilidad del software utilizado para reproducirlo, la adaptabilidad al resto del diseño (sobre todo si trabaja con html desde un editor de código), entre otros.

Para crear un menú deplegable con CSS y HTML necesitará el siguiente código:

Este primer bloque resetea el padding y el margin a 0px.

* {
    padding:0px;
    margin:0px;
}

Se configura la capa principal que en este caso se llamará capamenu.
#capamenu {
    margin:auto;
    width:800px;
    font-family:arial;
}

Se configuran las etiquetas de html UL y OL para que no tengan estilo.

ul, ol {
    list-style:none;
}

Se crea y configura la capa navegar que contendra cada una de las opciones, y a su vez se configura las etiquetas li para las opciones y a para los hipervinculos.

.navegar li a {
    background-color:#069;
    color:#FFFFFF;
    text-decoration:none;
    padding: 10px 15px;
    display:block;
}

Se configura el estado sobre de los hipervinculos (cuando posicione el mouse sobre la opción el color del fondo cambiará).

.navegar li a:hover {
    background-color:#FF3300;
}

Se configuran las listas que estén inmediatamente después de la capa navegar para que tengan la propiedad de flotar a la izquierda una de la otra.

.navegar > li {
    float:left;
}

Se configuran las etiquetas ul que seguirán a las etiquetas li, esto es las primeras opciones deplegables que tendremos.

.navegar li ul {
    display:none;
    position:absolute;
    min-width:140px;
}

Para que aparezcan las opciones desplegables configuraremos el estado sobre, pero, en esta ocación se modificará el estado sobre de la etiqueta li.

.navegar li:hover > ul {
    display:block;
}

Se configura la posición de las opciones desplegables, en este caso será relativa.

.navegar li ul li {
    position:relative;
}

Por último se configura la posición exacta en la que aparecerán las opciones desplegables de tercer nivel, esto mostrará cada opción de tercer nivel al lado derecho de la opción de segundo nivel.

.navegar li ul li ul {
    right:-140px;
    top:0px;
}

La segunda parte corresponde a HTML y es esta:

Antes de comenzar es importante aclarar que se debe trabajar entre las etiquetas <body> y </body>

Iniciamos la capamenu con este código.

<div id="capamenu">

 Iniciamos la clase navegar dentro de la etiqueta ul que proporcionará las listas.

    <ul class="navegar">


  Aquí iniciamos con las opciones principales del menú

        <li><a href="#">Inicio</a></li>
        <li><a href="#">Videos</a>

  Aquí iniciamos con las opciones de segundo nivel o sea las subopciones de Videos.


            <ul>
                <li><a href="#">Video 1</a></li>
                <li><a href="#">Video 2</a></li>
                <li><a href="#">Otros Videos</a>

  Aquí iniciamos con las opciones de tercer nivel o sea las subopciones de Otros Videos


                    <ul>
                        <li><a href="#">Video 1</a></li>
                        <li><a href="#">Video 2</a></li>
                        <li><a href="#">Video 3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Galeria</a></li>
        <li><a href="#">Contactos</a></li>
        <li><a href="#">Carreras</a>
            <ul>
                <li><a href="#">BASICO</a></li>
                <li><a href="#">PERITO CONTADOR</a></li>
                <li><a href="#">PERITO EN ADMINISTRACION</a></li>
            </ul>
        </li>
        <li><a href="#">Preguntas</a></li>
    </ul>
</div>

Para obtener los mejores resultados debe respetar el orden de tabulación para saber que opciones esta configurando dentro de su menú desplegable.

A continuación del dejo el código sin comentarios, primero el código CSS.

Ahora el código html:



jueves, 19 de julio de 2012

Hoja de estilos CSS

Archivo CSS

Un archivo CSS es un documento de hoja de estilos en cascada que puede vincularse a un documento web ya sea HTML, PHP u otro, con la finalidad de darle estilo y que este no desordene nuestro código, en otras palabras que tengamos una página web con un código limpio.  A continuación un ejemplo del diseño de una página web con una hoja de estilos CSS.

El siguiente código corresponde a html:



En éste código resaltaremos el uso de la etiqueta link con la cual vinculamos con el archivo css llamado estilos.css, el código empleado es:

<link rel="stylesheet" href="estilos.css" type="text/css" />

Cada una de las capas que se crearan en la hoja de estilos estan insertadas en utilizando la etiqueta div, por ejemplo la capa contenedor tiene el siguiente código:

<div id="contenedor">

Porsupuesto que al final se debe cerrar con </div>


El código del archivo estilos.css es el siguiente:


La página se verá de esta manera:                 abrir ejemplo en otra ventana

lunes, 21 de mayo de 2012

Cambio de Punteros con CSS


Cambiar el Puntero con CSS

Muchas veces necesitará dar un cambio al puntero dentro de sus páginas web, con este ejercicio aprenderá a hacerlo de una menera muy sencilla, les dejo el código completo y además un video-tutorial para que lo vean cuantas veces sea necesario.

<html>
<head>
<title>Cambio de Punteros con CSS</title>

<style type="text/css">
div {
    width:240px;
    height:100px;
    margin:10px;
    background-color:#ff8000;
    float:left;
    text-align:center;
    line-height:90px;
    font-family:arial;
    box-shadow: 1px 1px 15px 0px#999;
}
#default {cursor:default}
#cruz {cursor:crosshair}
#puntero {cursor:pointer}
#nw-resize {cursor:nw-resize}
#ne-resize {cursor:ne-resize}
#n-resize {cursor:n-resize}
#e-resize {cursor:e-resize}
#ayuda {cursor:help}
#texto {cursor:text}
#espera {cursor:wait}
</style>

</head>
<body>

<div id="default">Default</div>
<div id="cruz">Cruz</div>
<div id="puntero">Puntero</div>
<div id="nw-resize">Nw-resize</div>
<div id="ne-resize">Ne-resize</div>
<div id="n-resize">N-resize</div>
<div id="e-resize">E-resize</div>
<div id="ayuda">Ayuda</div>
<div id="texto">Texto</div>
<div id="espera">Espera</div>

</body>
</html>

jueves, 17 de mayo de 2012

Menú Horizontal

¿Cómo crear un menú con CSS?

Crear un menú vistoso y colorido es muy fácil con CSS en este tutorial les dejo el código completo para que lo puedan hacer, además un video-tutorial que explica paso a paso como hacerlo, espero que les guste y sea de mucha utilidad.

<html>
<head>
    <title>Menú Horizontal</title>
    <style type="text/css">
    #menu {
        padding:10px;
    }
    #menu li {
        display:inline;
    }
    #menu li a {
        font-family:arial;
        font-size:15px;
        text-decoration:none;
        float:left;
        padding:5px;
        background:#505050;
        color:#000;
    }
    #menu li a:hover {
        background:#900;
        color:#fff;
        margin-top:-5px;
        padding-bottom:10px;
        margin-left:5px;
        margin-right:5px;
        font-size:17px;
        font-family:"Times New Roman", Times, serif;
    }
   
    </style>
</head>
<body>
    <ul id="menu">
        <li><a href="#">INICIO</a></li>
        <li><a href="#">CONTACTOS</a></li>
        <li><a href="#">GALERIA</a></li>
        <li><a href="#">VIDEOS</a></li>
    </ul>
</body>
</html>

miércoles, 16 de mayo de 2012

Trabajando con Capas


Capas

En la primera entrada de este blog dije que la etiqueta div era una forma de generar una sección o división de la página web, en esta entrada veremos el uso de las capas y algunos de ejemplos sobre como configurarlas.

Es conveniente hacer un pequeño boceto de como debe quedar nuestra página web y las secciones en que diviremos la misma, el código de este trabajo lo escribo a continuación y para mayor facilidad y comprensión les dejo un video-tutorial.

<html>
<head>
    <title>Capas</title>
    <style type="text/css">
    #general {
        width:900px;
        height:500px;
        background:#CCC;
        margin:auto;
    }
    #capa1 {
        width:300px;
        height:500px;
        background:#FF6600;
        position:absolute;
    }
    #capa2 {
        width:300px;
        height:500px;
        background:#36F;
        position:absolute;
        margin-left:300px;
    }
    #capa3 {
        width:300px;
        height:250px;
        background:#390;
        position:absolute;
        margin-left:600px;
    }
    #capa4 {
        width:300px;
        height:250px;
        background:#996699;
        position:absolute;
        margin-left:600px;
        margin-top:250px;
    }
   
    </style>
</head>
<body>
    <div id="general">
        <div id="capa1">
       
        </div>
        <div id="capa2">
       
        </div>
        <div id="capa3">
       
        </div>
        <div id="capa4">
       
        </div>
    </div>
</body>
</html>



sábado, 12 de mayo de 2012

Definición de estilos CSS en la cabecera del documento

Podemos definir en la cabecera del documento, estilos que serán aplicados a toda la página.  Es una forma muy comoda de darle formato a todo el documento ya que los estilos serán seguidos en toda la página y nos ahorraremos mucho código aplicado a etiquetas individuales.

Para cumplir con este fin haremos uso de la etiqueta <style> y </style> colocada en la cabecera de la página para definir los distintos estilos del documento.

Vamos a ver un ejemplo de su uso:

<html>
<head>
    <title>Primer Ejemplo CSS</title>
    <style type="text/css">
        #cuadro {
           width:400px;
           height:200px;
           margin:auto;
           padding:10px;
           background:#F60;
           box-shadow:10px 10px 10px #999;
           border-radius:20px 0 20px 0;
        }
        #cuadro h1 {
            font-family:Arial;
            font-size:24px;
            color:#FFF;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="cuadro">
        <h1>Ejemplo de uso de la etiqueta <style> </h1>
    </div>
</body>
</html>

Resultado:


Ejemplo de uso de la etiqueta <style>


Explicación:

  • Bien, primero vamos que la etique <style> se utiliza entre la etique <head> (cabecera) y </head> (fin de la etiqueta de cabecera)
  • Se definió la propiedad type="text/css" y esta indica al navegador que el código que sigue debe ser interpretado como estilo CSS
  • Se finalizan los estilos solamente cuando se cierra la etique con </style>
  • Cuando se define un nuevo estilo y se usa # se indica que se hará una división en la página web, tambien conocido como CAPA, en este caso la capa se llama cuadro1
  • Cada una de las propiedades modificadas en este código tienen su función y a continuación se detalla cada una:
  1. width:400px;   define el ancho de la capa en 400 pixeles
  2. height:200px;  define el alto de la capa en 200 pixeles
  3. margin:auto;  centra la capa en la página o dentro del elemento donde aplique
  4. padding:10px; define la separación del texto a 10 pixeles del margen superior
  5. background:#F60; define el fondo con color anaranjado
  6. box-shadow:10px 10px 10px #999; esta propiedad define una sombra para la capa una sombra en la parte derecha e inferior de 10 pixeles con color gris
  7. border-radius:20px 0 20px 0; esta propiedad es algo especial, porque permite redondear las esquinas de la capa, en este ejemplo se redondea la esquina superior izquierda y la inferior derecha con 20 pixeles
Los estilos definidos simpre se inician con { y se terminan con } y cada línea se finaliza con (;) punto y coma.

En el segundo estilo utilizamos el código #cuadro1 h1 { esto porque lo que queremos es que la modificación de la etiqueta de encabezado h1 solo tenga efecto dentro de la capa cuadro1, sus propiedades se explican a continuación:
  1. font-family:Arial; define la fuente Arial
  2. font-size:24px;  establece el tamaño de fuente en 24 pixeles
  3. color:#FFF;  define el color blanco para el texto
  4. text-align:center;  centra el texto en la capa
Hazta aquí con esta lección,  en la proxima estudiaremos como crear una capa principal y dentro de ella crearemos tres capas más colocadas en una posición exacta.

Espero que escriban sus dudas o comentarios.

¿Qué es CSS? y ¿Para qué sirve?

CSS

En terminos técnicos es un lenguaje de estilo que es usado para definir como seran presentados los elementos de HTML.

El lenguaje HTML está limitado al momento de darle forma a un documento, esto es porque no fue concebido para este fin, sino principalmente científico, distinto al actual.

Para solucionar este problema se han presentado diferentes opciones, como tablas, imagenes transparentes, entre otras que no son estándares de HTML y por tal razón las paginas presentan problemas a la hora de la visualización en diferentes plataformas.

El modo de funcionamiento de CSS consiste en definir, mediante una sintaxis especial, la forma de presentación que aplicaremos a:
  • Una web entera, de modo que se pueda definir la forma de toda la web de una sola vez.
  • Un documento HTML o página, se puede definir la forma, en un pequeño trozo de código en la cabecera, o a toda la página.
  • Una porción del documento, aplicando estilos visibles en un trozo de la página.
  • Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola etiqueta.
La sintaxis CSS permite aplicar al documento un formato de modo mucho más exacto.  HTML se nos quedaba corto al momento de maquetar las páginas, con CSS tenemos herramientas que nos permiten definir:
  • La distancia entre líneas del documento
  • Aplicar identado a las primeras líneas del párrafo
  • Colocar elementos en la página con mayor precisión y sin lugar a errores
  • Definir la visivilidad de los elementos, margenes, subrayados, tachados, entre otros
Para mayor comprensión del potencial que ofrece CSS al diseño de páginas web, haremos una división para estudiar las diferentes formas en las que podemos utilizar esta herrmienta.

Estilos definidos en una etiqueta (una parte del documento)

Bien, para que podamos entender mejor este punto haremos uso de algunas etiquetas que siempre se utilizan en HTML y las modificaremos, tambien mostrarmos el resultado en este blog.

Con la etiqueta Div podemos definir secciones de una página y aplicarle estilos con el atributo style.

Ejemplo:

<div style="background:#F60; color:#FFF; font-family:Arial; font-size:16px">
        Este texto esta formateado con css dentre de una etiqueta "div"
</div>

Resultado:

Este texto esta formateado con css dentre de una etiqueta "div"

Otra etiqueta que podemos usar es la etiqueta <p>, que se usa para la escritura de párrafos, en este ejemplo definiremos un fondo gris, color de letra negro, fuente tahoma, tamaño de fuente 18.

 <p style="background:#CCC; color:#000; font-family:Tahoma; font-size:18px">
        Este texto esta formateado con CSS dentro de una etiqueta "P"
</p>

Este texto esta formateado con CSS dentro de una etiqueta "P"

El resultado no es muy diferente al anterior, pero vamos otro ejemplo con div.

<div style="border:1px; border-radius:10px; width: 300px; height:75px; background:#0099FF;
        font-size:18px; color: #FFF; padding:30px; text-align:center; margin:auto;">
        Es texto esta formateado con CSS dentro de una etiqueta "div"
</div>

Es texto esta formateado con CSS dentro de una etiqueta "div"

Tambien podemos aplicar estilos a nuestros hipervinculos empleando la etiqueta <a>, vamos a ver un ejemplo:

Ejemplo - Hipervinculo a google con color rojo, fuente verdana y tamaño 16 sin decoración (sin subrayado)

<a style="color:#CC0000; font-family:Verdana; font-size:16px; text-decoration:none" href="http://www.google.com">
        google.com
 </a>

google.com

La ventaja con esta forma de aplicar estilos es que podemos aplicarlos a la sección y en el momento que necesitemos, pero es complicado al momento de querer hacer modificaciones mayores, en la siguiente entrada veremos como utilizar la etique <style></style> para hacer un mejor trabajo.

Pueden hacer sus comentarios o consultas en la sección comentarios.