Tutorial. Centrar una web con CSS

Todos aquellos que se dedican al diseño web, una vez que otra se han encontrado con el problema de tener una web de unas dimensiones absolutas concretas (tanto de altura como de anchura) y no tener una manera fácil de poderla centrar vertical y horizontalmente en la ventana del navegador sea cual sea su tamaño.

Vamos a explicar una solución sencilla y la iremos explicando paso por paso para que quede clara y aparte de poder aplicarla sepamos el porque de cada paso.

1. En primer lugar, por el tipo de operaciones que realizaremos, necesitaremos que el posicionamiento de los objetos sea absoluto (ya iremos viendo el porque), así que lo primero será:

div {
position: absolute;
}

2. En segundo lugar, queremos encontrar el centro de la ventana del navegador, pero como las dimensiones del navegador variarán en cada caso dependiendo de la pantalla del usuario, si dicho navegador esta maximizado o no, las barras de estado que tenga el usuario, etc, tenemos que buscar ese centro con medidas relativas, así que lo que haremos sera más o menos:

div {
position: absolute;
top: 50%;
left: 50%;
}

3. Ya tenemos el centro del navegador definido, ahora nos falta centrar en el, nuestro objeto, en este caso, una capa (div) con unas dimensiones de 600 pixels de ancho por 400 pixels de alto, así que lo primero de todo será definir estas medidas en nuestro css.

div {
position: absolute;
top: 50%;
left: 50%;
width: 600 px;
height: 400px;
}

4. Con todo eso definido ya solo nos queda marcar el punto central de la capa (div), y eso lo conseguiremos con la propiedad de capa margin. Como ya dijimos en su día, los valores para margin pueden ser muchos, entre ellos, negativo, así que lo que necesitamos para centrar nuestra capa en el centro del navegador es decirle al css justamente la mitad del ancho y del alto de la capa para que así el punto central que hemos definido en el segundo punto sea donde se acomode el centro de la capa que tenemos y eso quedaría más o menos así:

div {
position: absolute;
top: 50%;
left: 50%;
width: 600 px;
height: 400px;
margin-top: -200px;
margin-left: -300px;
}

Para concluir el tutorial, aquí todo el código comentado, para que sea aún más fácil.

div {
position: absolute;
top: 50%; /* Buscamos el centro horizontal (relativo) del navegador */
left: 50%; /* Buscamos el centro vertical (relativo) del navegador */
width: 600 px; /* Definimos el ancho del objeto a centrar */
height: 400px; /* Definimos el alto del objeto a centrar */
margin-top: -200px; /* Restamos la mitad de la altura del objeto con un margin-top */
margin-left: -300px; /* Restamos la mitad de la anchura del objeto con un margin-left */
}

Fuente: http://www.ateneupopular.com/tutoriales/tutorial-centrar-una-web-con-css/

display:inline-block para todos los navegadores.

La propiedad CSS display dispone de una buena lista de posible valores ( inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit) para indicar que tipo de elemento estamos posicionando. Dos de las más usadas son inline y block .

display:inline
Los elementos inline no generan una nueva línea en el flujo del texto. Los elementos inline son vistos como elementos “internos” subordinados para los hacia arriba elementos de bloque.

Elementos Inline por defecto:
a, abbr, acronym, applet, b, basefont, bdo, big , br, button, cite, code, dfn, em, font, i, img, input, iframe, kbd, label, map, object, q, samp, script, select, small, span, strong, sub, sup, textarea, tt, var.

display:block
Los elementos de bloque generan una nueva línea (renglón) en el flujo del texto

Elementos de bloque por defecto:
address, blockquote, center, dl, dir, div, fieldset, form, h1-6, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul.

display:inline-block
En la especificación de CSS2.1 se añadió este valor que permite integrar las ventajas de ambas propiedades. Con este valor podemos crear bloques en la misma línea de flujo, haciendo que diseños como rejillas sean posibles.

Actualmente, solo los navegadores modernos lo interpretan, por lo que nos vemos obligados a usar un hack para que todos los navegadores lo “emulen”.

display:inline-block
En la especificación de CSS2.1 se añadió este valor que permite integrar las ventajas de ambas propiedades. Con este valor podemos crear bloques en la misma línea de flujo, haciendo que diseños como rejillas sean posibles.

Actualmente, solo los navegadores modernos lo interpretan, por lo que nos vemos obligados a usar un hack para que todos los navegadores lo “emulen”.
En Mozilla Webdev nos muestran un ejemplo de como conseguir que todos los navegadores nos permite obtener diseños como estos sin necesidades usar float en ellos.

Código

li {
    width: 200px;
    min-height: 250px;
    border: 1px solid #000;
    display: -moz-inline-stack; /* FF2*/
    display: inline-block;
    vertical-align: top; /* BASELINE CORRECCIÓN*/
    margin: 5px;
    zoom: 1; /* IE7 (hasLayout)*/
    *display: inline; /* IE */
    _height: 250px; /* IE6 */
}

Fuente: anieto2k.com

Estructuras de páginas web en CSS

CSS Layout es un repositorio de 224 estructuras de páginas web en CSS, listas para personalizar y utilizar. Funcionan en la mayoría de navegadores web y está optimizadas para que el contenido sea accesible y visible por los buscadores. Se puede utilizar directamente y también son fáciles de incorporar en sistemas de publicación.

Fuente: http://i.microsiervos.com/diseno/estructuras-paginas-css.html

Conceptos básicos para CSS

Vía Vecindad Gráfica he llegado a este impecable trabajo realizado por la gente de Ateneu Popular.

En el se explican de manera concreta las propiedades básicas que se pueden utilizar en una hoja de estilos, se muestran sus valores y se refleja un ejemplo de aplicación. Como bien lo dicen en Ateneu Popular, esta puede ser una herramienta muy útil para tener impresa en el escritorio a la hora de diseñar webs y es por eso que han puesto manos a la obra para ponerla a disposición de todos!

Este es un ejemplo de lo que podemos encontrar en el informe:

Descarga original
Mirror

Gracias y felicitaciones por este excelente trabajo!

Fuente: Ateneu Popular

Cualquier fuente por css

Se acabaron los tiempos en los que el diseñador no muy versado en los medios de internet le encargaban una página... y luego no sabía como colocar las fuentes.

En teoría, sólo se pueden poner las fuentes que el usuario tenga instalada con su sistema operativo. Por eso, no se suelen utilizar tipografías raras. Pero claro, siempre hay algún diseñador que al final no hace código html sino que cuelga directamente una imagen como aquí

Con este trocito de código que han publicado los chicos de a list apart:


@font-face {
font-family: "Kimberley";
src: url(http://www.princexml.com/fonts/larabie/ »
kimberle.ttf) format("truetype");
}
h1 { font-family: "Kimberley", sans-serif }


Podemos hacer lo que queramos...

Sólo falta que sea compatible con todos los navegadores... y que la peña no se pase y comience a poner fuentes muy tochas...

Hay múltitud de fuentes disponibles para descarga... a buscarlas...

1001freefonts.com

todofuentes
....

Fuente: http://avanzaweb.net/2007/11/cualquier-fuente-por-css.html

Resetear CSS: Cómo (Tripoli) y Para qué

Antes que nada, ¿qué es una hoja de estilos en cascada (CSS)? Un concepto, supongo, rápido y acertado sería: un documento de texto, con un formato determinado, que especifica el modo en que se mostrará cada uno de los elementos de una página web. De esto se podría desprender “desde el archivo CSS podríamos modificar el modo en que se ve toda nuestra página”; y de hecho, esto és asi.
Las sorpresas que nos llevamos al utilizar CSS

Seguramente si han trabajado con CSS, o al menos escucharon a alguien que trabajó con esto, saben que es algo complejo y complicado lograr que la página se vea igual en todos los navegadores. Algo que muchos no saben es el motivo de ésto, idea que intentaré explicar a continuación.

Cada navegador trae por defecto una hoja de estilos CSS. Como difieren entre una y otra -son diferentes- “saltan” los problemas. Si no usásemos ninguna hoja de estilos, y por ejemplo, hacemos un documento HTML sin formato, y abrimos este documento en varios navegadores; notaremos que se ven diferentes en cada uno. ¡Imagínense lo dificil que se pone la situación cuando hablamos de algo más complejo!
¿Cómo solucionar ésto?

Se han intentado varias cosas, pero una de las que mas me gusta -y que mejores funciona- es la de resetear los estilos que trae el navegador por defecto. De ese modo dejaríamos de partir de la base del navegador, es como que eliminamos la hoja que trae, y comenzamos “de cero” con nuestra hoja. Claro está, deberemos ser más detallistas en ésta última.

Para dejar de hablar tan abstractamente, veremos algunos ejemplos:

• Estilo predeterminado: como se dijo, las hojas de estilo predeterminadas de los navegadores son distintas entre uno y otro. Para comprobarlo, invito a abrir ésta URL en diferentes navegadores; que no tiene hoja de estilos aplicada, solo la predeterminada del navegador.
• Ahora, aplicando una hoja de estilo extra a la misma página, se produce el reseteo CSS, miren como se ve: link.
• Por último, ya logrando que la página se vea igual en todos los navegadores, aplicamos una segunda hoja de estilos: link.
  

Como ya deducieron, la última página que les pasé tiene 3+ hojas de estilo en juego:
1. La del navegador.
2. La encargada de “eliminar” la anterior (la que hace el reset).
3. Y por último, las que definen nuestros estilos; que pueden ser 1 o más.

Ahora adentrándonos a la puesta en práctica de esto, existen muchos reseteadores de CSS, pero en este apartado les dejaré los links de Tripoli, una buena solución para este tema. A continuación, las hojas de estilos que nos competen:

• reset.css
• generic.css
• ie.css
• print.css

Fuente: daniBlog vía Carlos Leopoldo

Cómo resetear el CSS predeterminado del navegador

Cada navegador tiene un CSS distinto por defecto, lo que muchas veces nos causa problemas al crear un CSS que funciona bien en un navegador y en otros es totalmente diferente.

Este CSS creado por Eric A. nos deja todos los CSS iguales en todos los navegadores el código es el siguiente:

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, font, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

vertical-align: baseline;

}

/* remember to define focus styles! */

:focus {

outline: 0;

}

body {

line-height: 1;

color: black;

background: white;

}

ol, ul {

list-style: none;

}

/* tables still need 'cellspacing="0"' in the markup */

table {

border-collapse: separate;

border-spacing: 0;

}

caption, th, td {

text-align: left;

font-weight: normal;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: "";

}

blockquote, q {

quotes: "" "";

}

Más información sobre Reset CSS

Fuente: http://www.carlosleopoldo.com/2007/05/21/como-resetear-el-css-predeterminado-del-navegador/

Selección avanzada de elementos en CSS 2 y CSS 3

Generalmente, cuando queremos seleccionar un elemento 'especial' de nuestro HTML con CSS, llenamos este con id, class, span, que muchas veces son completamente inútiles, y casi siempre, para nada semánticos.

Este tip, que se complementa con el de pseudoclases y pseudoelementos, nos ayudará en la tarea de tener un HTML limpio y sin mucho class="" o .

Ver articulo completo en Cristalab.

Cómo reducir el peso de los archivos de estilos CSS

En proyectos enormes, nos encontramos con que nuestros archivos CSS no son 100 lineas, sino 1000 y su peso no es 3KB sino 100KB.

Cada segundo de carga es vital, así que voy a dar unos tips de como arreglar esto. ¿Cual es la base de todo esto? Legibilidad a cambio de tamaño y/o segundos al cargar la página. Es decir, cambiaremos la facilidad de lectura e identación de los archivos .css (algo innecesario con un .css en producción) por un ahorro considerable en el peso de nuestros estilos.

El selector * selecciona todos los elementos.

Este es mi favorito, solo vean:

* {
margin:0;
padding:0;
font-family:Verdana, Helvetica, Arial, sans-serif;
font-size:12px;
text-decoration:none;
}

Al principio defines las propiedades que la mayoría de las veces pones, y te ahorras ponerlas en el resto del código. ¿Quien no ha definido en millos de etiquetas margin:0 y padding:0?, ¿Quien o ha puesto text-decoration:none, a cada una de las pseudoclases de < size="3">Se pueden resumir las etiquetas en una sola.Background-image, background-position, border-style, border-color... todas esas etiquetas se pueden resumir en una sola.

#menu {
position:absolute;
background-color:#889900;
background-image:url(menu.jpg);
background-position:top;
background-repeat:repeat-x;
border-color:#000000
border-style:dashed;
font-family:Arial;
font-size:12px;
float:left;
}

Pasa a ser.
#menu {
position:absolute;
background:#889900 url(menu.jpg) top repeat-x;
border:#000000 1px dashed;
font:12px Arial;
float:left;
}

Las etiquetas coinciden sin importar la clase o id.

li.headmenu {
list-style:none;
display:block;
color:#FF9900;
background:#666666;
}
li.menuizq {
list-style:none;
display:block;
color:#FF9900;
background:#666666;
float:left;
}
li.menuder {
list-style:none;
display:block;
color:#FF9900;
background:#666666;
float:right;
}

Pasa a ser:

li {
list-style:none;
display:block;
color:#FF9900;
background:#666666;
}
li.menuizq {
float:left;
}
li.menuder {
float:rigth;
}

Se pueden seleccionar diversos elementos separados por comas.

#bg1 {
position:absolute;
width:150px;
height:80px;
border:#454545 1px solid;
color:#222222;
}
#bg2 {
position:absolute;
width:150px;
height:80px;
border:#454545 1px solid;
color:#333333;
}
#bg3 {
position:absolute;
width:150px;
height:80px;
border:#454545 1px solid;
color:#FF9900;
}

Se puede convertir a:
#bg1, #bg2, #bg3 {

position:absolute;
width:150px;
height:80px;
border:#454545 1px solid;
}
#bg1 {
color:#222222;
}
#bg2 {
color:#333333;
}
#bg3 {
color:#FF9900;
}

CSS no lee los espacios en blanco.

¿Tengo que explicarlo? Usemos el mismo código anterior.

#bg1, #bg2, #bg3 {position:absolute;width:150px;height:80px;border:#454545 1px solid;}
#bg1 {color:#222222;}
#bg2 {color:#333333;}
#bg3 {color:#FF9900;}

Ahora, aplicamos dos puntos mas:

• Se pueden obviar las comillas en la última propiedad de una etiqueta.
  
• Se pueden reducir algunos colores a 3 dígitos.

#bg1, #bg2, #bg3 {position:absolute;width:150px;height:80px;border:#454545 1px solid}
#bg1 {color:#222}
#bg2 {color:#333}
#bg3 {color:#F90}

Ahora nuestra tarea es elegir y poner en una balanza cuanto queremos cambiar a cambio del otro. Si aplicamos todos, nuestro código va a ser una masa sin sentido. Hay que ser sensatos.


Fuente: http://www.cristalab.com/tips/51134/como-reducir-el-peso-de-los-archivos-de-estilos-css