Qué mejor excusa para volver a escribir que contaros el fin de semana en Subflash que este año ha sido en Torrelavega.
Leer el resto de esta entrada
Hay otras formas para centrar un objeto en pantalla, pero esta me resulta la más cómoda.
position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: table; |
Es importante el display table para que lo centre verticalmente.
Lo bueno, es que no necesita tener un tamaño especificado para funcionar bien.
Por supuesto se puede usar para centrar solo verticalmente.
Gracias Irene! 🙂
Una cosa muy común es querer centrar los botones de un menú en horizontal sin conocer sus dimensiones.
inline-block al rescate!! 😀
Inline block hace que los elementos se comporten como bloques de texto en línea, y por lo tanto se colocan en horizontal uno a la derecha del otro, y al centrar el contenedor, se centran los botones 🙂
http://jsfiddle.net/yporqueno/dYLxN/
<ul class="botonera"> <li>Sección 1</li> <li>Sección 2</li> <li>Sección 3</li> <li>Sección 4</li> </ul> |
.botonera { text-align: center; } .botonera>li { display: inline-block; } |
Gracias Javi!! 😀
Algo que parece muy sencillo es tener dos columnas con diferente altura y que ambas tengan la altura de la mas alta.
El ejemplo típico es un site con contenido dinámico y una barra lateral con un menú que queremos que tenga la misma altura que el contenido.
Como no podemos usar alturas fijas, podemos utilizar table-cell
.wrapper { display: table; } .left { display: table-cell; width: 50%; background-color: red; } .right { display: table-cell; width: 50%; background-color: green; } |
Gracias Antonio!! 🙂
Una de las cosas que mas hago es modificar las css desde el inspector de Chrome. Con las flechas del teclado se puede aumentar o disminuir el valor de uno en uno, pero cuando trabajas con ems, hay que usar decimales.
Pulsando la tecla Alt se aumenta de 0.1 en0.1. Gracias Javi!!
PD: También se puede aumentar de 10 en 10 pulsando mayúsculas.
Esto soluciona el problema con las fuentes en Google Chrome, que a veces se ven mal, sin suavizar.
A la hora de maquetar nuestro sitio responsive, necesitamos saber las dimensiones de los dispositivos que hay en el mercado, para saber donde situar los puntos de corte.
Hay infinidad de dispositivos, resoluciones y densidades de pixel, y puede parecer un infierno a primera vista 🙁
Lo primero que tenemos que hacer es colocar esta etiqueta en nuestro html:
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
Con ella le indicamos a nuestro html que tome como anchura de la pantalla la anchura de nuestro dispositivo.
Cada dispositivo tiene unas dimensiones, pero también tiene una densidad de pixeles, sin embargo a la hora de maquetar debemos tratarlos como si de densidad simple se tratase.
Por ejemplo un iPad 1 tiene como dimensiones de pantalla 1024 x 768 (132 ppp),.
Un iPad 3 retina, tiene el doble de densidad de pixels (264 ppp) y tiene unas dimensiones de pantalla de 2048 x 1536.
Sin embargo, ambos se tratan de igual manera en nuestras media queries, tomando ambos como 1024 x 768
Tengo una página para obtener fácilmente las dimensiones de pantalla:
Voy actualizando los valores en una tabla, para tener una referencia de los modelos que hay en el mercado.
Estas son MIS media queries para hacer un site responsive y distinguir entre la versión por defecto de escritorio, la versión de tablet y la versión de móvil.
Ver ejemplo (redimensionar la ventana y probarlo en diferentes dispositivos)
<style> /* Desktop */ /*---------------------------------------------------------------------------*/ body:after { content: 'Desktop'; font-size: 28px; } /* Tablet */ /*---------------------------------------------------------------------------*/ @media only screen and (max-width : 1023px), only screen and (max-device-width : 1100px) { body:after { content: 'Tablet'; } } /* Tablet Landscape */ /*---------------------------------------------------------------------------*/ @media only screen and (max-width : 1023px), only screen and (max-device-width : 1100px) and (orientation: landscape) { body:after { content: 'Tablet Landscape'; } } /* Tablet Portrait */ /*---------------------------------------------------------------------------*/ @media only screen and (max-width : 800px) and (orientation: portrait) { body:after { content: 'Tablet Portrait'; } } /* Mobile */ /*---------------------------------------------------------------------------*/ @media only screen and (max-width : 600px) { body:after { content: 'Mobile'; } } /* Mobile Landscape */ /*---------------------------------------------------------------------------*/ @media only screen and (max-width : 600px), only screen and (max-device-width : 600px) and (orientation: landscape) { body:after { content: 'Mobile Landscape'; } } /* Mobile Portrait */ /*---------------------------------------------------------------------------*/ @media only screen and (max-width : 400px), only screen and (max-device-width : 400px) and (orientation: portrait) { body:after { content: 'Mobile Portrait'; } } </style> |
He querido distinguir entre tablet y tablet horizontal y vertical porque la mayoría de las veces no necesitaremos especificar tanto, pero por si acaso necesitamos concretar mas pues ahí las tenemos.
A veces utilizo max-width en lugar de max-device-with porque este último no se comprueba si la ventana del navegador se redimensiona así como al girar el dispositivo, y en determinadas ocasiones no informa bien del cambio de orientación.
Si insertamos un mapa de Google Maps en nuestro html, al darle a una burbuja de localización, la ventana aparece con un scroll muy poco estético. Para quitarlo podemos usar estas css.
Básicamente es meter el contenido en un div con estos estilos:
.infowindow-wrapper { line-height: 1.35; overflow: hidden; white-space: nowrap; } |
Otra de plugins imprescindibles 🙂
Esta vez es el Sublime Linter, un plugin que nos marca los errores en CSS y JavaScript. Muy útil para evitar perder horas hasta que te das cuenta de ese paréntesis que se te ha olvidado o de esa propiedad CSS que no está bien escrita. Un ejemplo de JavaScript:
Y estas son mis preferencias del plugin (Preferences > Package Settings > Sublime Linter > Settings User), para que no me marque demasiados errores que yo se que no lo son o no me interesan (como algunas reglas CSS para Internet Explorer 6 por ejemplo):
{ "sublimelinter_delay": 0.5, "sublimelinter_gutter_marks_theme": "bright", "jshint_options": { "evil": true, "regexdash": true, "browser": true, "wsh": true, "trailing": false, "sub": true, "eqnull": true, "unused": true, "undef": true, "devel": true, "boss": true, "smarttabs": true, "jquery": true }, "csslint_options": { "adjoining-classes": false, "box-model": false, "box-sizing": "warning", "compatible-vendor-prefixes": "warning", "display-property-grouping": true, "duplicate-background-images": false, "duplicate-properties": true, "empty-rules": true, "errors": true, "fallback-colors": "warning", "floats": "warning", "font-faces": "warning", "font-sizes": "warning", "gradients": "warning", "ids": false, "import": "warning", "important": false, "known-properties": true, "outline-none": "warning", "overqualified-elements": "warning", "qualified-headings": "warning", "regex-selectors": "warning", "rules-count": "warning", "shorthand": "warning", "star-property-hack": "warning", "text-indent": "warning", "underscore-property-hack": "warning", "unique-headings": "warning", "universal-selector": "warning", "vendor-prefix": true, "zero-units": "warning" } } |
Para instalarlo como cualquier otro plugin de Sublime, abrimos la paleta Command
Abrimos el paquete instalador
E instalamos el Sublime Linter:
