Desde hace unos días me encuentro totalmente ocupado en varios proyectos, entre ellos el rediseño de mi web.

Estan siendo batallas días de dura pelea con el CSS, optimización de carga y por supuesto con mi querido IE. Es por ello que hay secciones que aún no tienen ningún contenido, algún enlace roto y lo más importante es que estoy teniendo menos tiempo de publicar entradas.

En cuanto estén todos los detalles pulidos, prometo dedicar una entrada a todos los datos relacionados con el nuevo diseño.

Lista de detalles que pulir:

• Completar barra lateral
• Arreglar enlaces rotos
• Formulario de contacto
• Pie del blog
• Páginas de la cabecera
• Publicar mi primer freebie
• Decidir fuentes utilizadas
• Diseño del portafolio

Además, gracias a todo el curro que me estoy dando estos días, tengo bastantes entradas preparadas y algún regalo que otro

Muchas veces al maquetar una web una vez hemos creado la hoja de estilo y la abrimos con diferentes navegadores aparecen algunas cosas descuadradas, en un navegador se ve bien pero en otro tiene saltos raros, los float no funcionan como era de esperar…

Este código CSS desarrollado por Eric Meyer resetea las principales propiedades de los elementos HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

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: "" "";
}

Incorporar esta hoja de estilos en la maquetación de la web puede ahorrarnos algunos quebraderos de cabeza y ayudarnos a conseguir una web cross-browser, aunque hay que tener en cuenta que algunas veces usamos los estilos por defecto del navegador con lo que al resetearlos, los perdemos y es necesario definirlos de nuevo.

Por cierto, es recomendable incluir el código CSS que se encuentra en la parte superior en un archivo diferente del que hemos creado para la web, haciendo la llamada primero al reset y luego al general del sitio.

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

¿Quieres alinear verticalmente un elemento contenido en una capa?

Pues con tan solo tienes que añadir estas 2 propiedades en las declaraciones de CSS de dicha capa

1
2
3
4

    #capa {
        display: table-cell;
        vertical-align: middle;
    }

A veces, esto no funciona bien en nuestro queridísimo Internet Explorer… Pero para este mal, también hay un remedio

1
2
3
4
5

    #capa {
        height: 313px;
        display: block; 
        font-size: 313px;
    }

Es decir, el mismo tamaño de letra que alto que tenga la capa. En el ejemplo 313 pixeles.