.centradoabsuluto {

/*
Ponemos unos margenes negativos de la mitad de las dimensiones de la caja ,
puesto que el centrado se basa en la esquina superior izquierda de la caja, y asi
queda centrado respecto al centro de la caja.
*/
margin-top: -200px; /* Restamos la mitad del alto de la caja*/
margin-left: -250px; /* Restamos la mitad del ancho*/
}


Espero que os sea util

Después de haber dejado claras las bases de una maquetación con estilos, ahora vamos a aprender a hacer un menú solo con XHTML y CSS. La idea es obtener un menú que sin mucha carga de funcionalidad a la página, y sobre todo que sea fácil generarlo vía PHP, utilizando plantillas (que será otra de las cosas que veremos próximamente).

Comenzamos como siempre con el XHTML. Definiremos una capa contenedora y dentro una lista sin ordenar. En los elementos <li> introduciremos elementos <a> para las opciones de menú y un elemento <h4> para el titulo del menú.

 <div class="contenedor">
     <ul>
         <li class="titulo">
             <h4>Titulo</h4>
         </li>
         <li><a href="http://www.melkorcete.com">Elemento 1</a></li>
         <li><a href="http://www.melkorcete.com">Elemento 2</a></li>
         <li><a href="http://www.melkorcete.com">Elemento 3</a></li>
         <li><a href="http://www.melkorcete.com">Elemento 4</a></li>
         <li><a href="http://www.melkorcete.com">Elemento 5</a></li>
     </ul>
 </div>

La etiqueta <h4> nos va a permitir varias cosas: generalizar los estilos a nivel de fuente, ya que declararemos uno solo para el y así el titulo quedara diferenciado. Además para que los estilos de tipo li:hover no afecten al titulo, crearemos uno que tenga los li:hover igual que el titulo. Eso dará un efecto distinto a los li pero no cambiara el titulo.

Además, para ver aun mas posibilidades añadiremos una imagen transparente de viñeta y en el li:hover pondremos otra del mismo tamaño que si se vera, lo que creara una mayor sensación al usuario (aunque sea demasiado sobrecargado, luego no hay por que usarlo todo, eso como siempre a gusto del consumidor ). Ahora el CSS.

// Reiniciamos los Margenes para partir de cero
 * {
     margin: 0px;
     padding: 0px;
     font-family: Verdana;
     text-decoration: none;
     color: #000000;
 }

 // Declaramos el contenedor
 .contenedor {
     display: block;
     position: absolute;
     width: 150px;
     top: 150px;
     left: 150px;
 }

 // Aquí empiezan los estilos en cascada.
 // Lista
 .contenedor li {
     list-style: none;
     list-style-image: url(blank.gif);
     list-style-position: inside;
     padding-left: 0px;
     font-size: 11pt;
     background-color: #ADD8E6;
 }

 // Lista con efecto rollover
 .contenedor li:hover {
     background-color: #32CD32;
     list-style-image: url(arrow.gif);
 }

 // Titulo del Menu
 .contenedor h4 {
     font-size: 12pt;
     font-weight: bold;
     color: #ffffff;
 }

 // Porpiedades para el titulo
 .contenedor .titulo {
     background-color: #1E90FF;
     list-style-image: none;
     padding-left: 5px;
 }

 // Evitamos el :hover en el titulo
 .contenedor .titulo:hover {
     background-color: #1E90FF;
     list-style-image: none;
 }

 // Estilos de los enlaces
 // links, visitados y activos
 .contenedor a:link a:visited a:active {
     color: #000000;
     text-decoration: none;
 }

 // Enlace Seleccionado
 .contenedor a:hover {
     color: #ffffff;
     text-decoration: none;
     font-weight: bold;
 }

Ahora que ya esta el CSS, es el momento de dejarlo a vuestro gusto: Sin fondos y solo enlaces, solo las imágenes, con otras viñetas… como os plazca, pero con una base como esta.

Os dejo un enlace a un .ZIP con los archivos (.HTML, .CSS y los .GIF).

Hablando con un compañero del trabajo que me pregunto como usar capas para un determinado diseño, se me ocurrió escribir sobre unas cuantas propiedades de CSS que se usan habitualmente en los diseños y que hay que tener bastante claras.

• float: [left|right|none]; Permite que el elemento afectado flote literalmente hacia donde se le indique. Equivaldría al align=[left|right] de HTML pero, a diferencia de este, afecta a cualquier elemento, no solo texto o imágenes.
• clear: [none|left|right|both]; Especifica si un elemento permite tener otros elementos flotando a su alrededor. Si utilizas por ejemplo el clear: left; si encuentra algún elemento flotando a su izquierda se situara justo debajo de el. Equivale al <br clear=[left|right|all|none]> de HTML.

Tras esto, vamos a hacer un pequeño ejercicio de práctica. La idea será crear el clásico esquema de header, menú izquierdo, contenido y footer a base de XHTML y CSS. El resultado será el de la imagen que os pongo a continuación.

Comenzamos con el código XHTML de las capas.


<div id="contenedor" class="contenedor">
<div id="header" class="header">header</div>
<div id="izquierda" class="izquierda">izq</div>
<div id="contenido" class="contenido">contenido</div>
<div id="footer" class="footer">footer</div>
</div>


Nada fuera de lo común. Declaramos un contenedor y anidamos dentro cuatro capas, que harán la función de header, menú, contenido y footer. Después, comenzaremos con los estilos uno a uno, explicando para que es cada uno de ellos (Haremos el contenedor con unas mediadas pequeñas al principio por comodidad, luego si agrandas el contenedor al 100% todo se moverá en proporción. Ventajas del CSS >:] ).

// Reiniciamos los Margenes para partir de cero
* {
margin: 0px;
padding: 0px;
}

// Declaramos el contenedor
.contenedor {
display: block;
position: absolute;
width: 450px; // Si ponéis 100% funcionara perfecto
height: 200px; // Si ponéis 100% funcionara perfecto
top: 10%; // Le añadimos un posicionamiento por comodidad
left: 10%; // Le añadimos un posicionamiento por comodidad
border: 2px solid #000000;
text-align: center;
vertical-align: middle;
}

// Aquí empiezan los estilos en cascada.
// Header o Cabecera
.contenedor .header {
display: inline;
width: 100%;
height: 20%;
background-color: #68DBFF;
float: left; // Hacemos que flote a la Izquierda de cara al resto de estilos
}

// Men&úacute; de la Izquierda
.contenedor .izquierda {
display: inline;
width: 20%;
height: 70%;
background-color: #2152DE;
float: left; // float a la izquierda
}

// Contenido Principal
.contenedor .contenido {
display: inline;
width: 80%;
height: 70%;
background-color: #9BB0EA;
float: left; // float a la izquierda para que se pegue a la anterior
}

// Footer o Pie
.contenedor .footer {
display: inline;
width: 100%;
height: 10%;
background-color: #72A3CC;
float: left; // float a la izquierda
clear: both; // el clear hará que baje a donde esté libre por ambos lados
}

A partir de aquí solo quedaría ir llenando con más elementos las capas que hemos creado. Es una forma absolutamente dinámica de maquetar, puedes usar además márgenes a tu gusto para separarlas, imágenes de fondo, lo que sea ya de cara a estética. Y al igual que este modelo, se pueden hacer mas jugando con los porcentajes para usar tres columnas en vez de dos. Eso ya queda a gusto del consumidor.

No solo de IDE’s vive el diseñador web, y toda ayuda es poca de cara a optimizar el trabajo que realizamos. Firefox es un navegador altamente prolífico en cuanto a extensiones se refiere, y muchas de ellas nos ayudaran en nuestra labor. Si se dedican al diseño tomen buena nota de ellas. Son mis recomendaciones del día.

Empezamos con la Web Developer. Esta extensión crea una barra con una serie de opciones de men&úacute;. Pone a disposición del usuario la posibilidad de desactivar popups, cookies, CSS, JavaScript, editar el CSS al vuelo viendo los cambios a tiempo real, probar distintas resoluciones, validar, XHTML, CSS, feeds y un largo etc. de funciones adicionales. Sin duda alguna imprescindible para cualquier tipo de diseñadores web.

Anteriormente se habló de utilizar un grid como fondo del body para ayudar al posicionamiento de los elementos de la página. Si a esto le añadimos el uso de la extensión MeasureIt, podremos medir cualquier elemento creando un rectángulo que indicara ancho y alto. Una ampliación significativa del truco anterior, y sin dificultad de uso.

Si queremos ver que estilos están afectando a un elemento en concreto, necesitamos CSS Viewer. Una vez activada permite situarse con el cursor en cualquier elemento de la página y mostrara de una manera clara y elegante los estilos del mismo. Incluidos los de la propia hoja de estilos de Firefox si se diera el caso.

Descargar Web Developer : enlace.

Descargar MeasureIt : enlace.

Descargar CSS Viewer : enlace.

Uno de los "trucos" que me ha ayudado muchísimo en la maquetación de mi web ha sido la utilización de esta clase en CSS.


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


¿Cual es la explicación de esto? Muy sencillo. Cada navegador trae una hoja de estilos propia para interpretar la de las páginas que va a mostrar. Por desgracia, unos exploradores (por ejemplo IE) dan un margen inicial con la propiedad margin y otros (como Firefox) lo hacen con la propiedad padding. ¿Qué problema encontramos en esto? Que los usuarios que usan uno u otro explorador verán nuestra página de forma diferente. Con este reinicio de márgenes y paddings podremos empezar de cero con la maquetación, lo que nos evitará mucho trabajo innecesario.

Otro truco muy útil es la utilización de un grid como fondo de la propiedad body. Al tenerlo de fondo, cada vez que queramos posicionar un elemento, tendremos una clara referencia en píxeles con ejes coordenados. Sin duda mucho mas sencillo que hacerlo a ojo. Para hacer esto, solo necesitáis tener esta clase temporal, que no interferirá en vuestra hoja de estilos.


body {
background: url(layout_grid.gif) top left no-repeat;
}



Grid

Vía: anieto2k y Sigt.net