Rodrigo Borrego Bernabé - Software Developer



Englobando elementos flotantes

Category : HTML/CSS, Programación · No Comments · by Nov 28th, 2012

En el mundo ideal de las CSS -¿será con CCS3?- no será necesario maquetar utilizando la propiedad «float», al menos no para la disposición en pantalla -layout-. Pero mientras tanto, los que nos dedicamos a esto del frontend development (manera de darnos autobombo) hemos tenido que recurrir a dicha propiedad más de una vez.

Y cuando la utilizamos, a menudo, ocurre un desagradable comportamiento.

Esto es la capa contenedora

Y esta la hija, flotante

¿Por qué la capa contenedora no contiene a la hija? Es más, este mismo párrafo debería aparecer en una nueva linea. ¿Es un bug de los navegadores? No, es una feature de las CSS. En la especificación de la W3C el comportamiento de float está descrito así:

Content flows down the right side of a left-floated box and down the left side of a right-floated box … Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn’t exist.

El primer método que utilicé para resolver esto fue usar la propiedad overflow:

.myclass {
  overflow: hidden;
  overflow: auto;
}

Sin embargo este método presenta un efecto secundario no deseable casi de inmediato, pues los elementos hijos pueden cortarse o aparecer barras de desplazamiento por posicionamiento, márgenes, etc. Esta solución la reservaría para entornos determinados, donde no aparezca ese problema. Cuidado, a mí se me ha dado hasta por seleccionar un enlace con un tabulador, donde el navegador añade un borde y ese borde hacía que aparecieran las barras de desplazamiento.

El buen método

Nicolas Gallagher, aunque no fue quien me descubrió el método, es quien ha dado con la solución más optimizada y que funciona en todos los navegadores y que yo aconsejo: consiste en añadir la clase clearfix (puedes ponerle otro nombre, obviamente) al contenedor, siendo las CSS de esta clase las siguientes:

.clearfix:before,
.clearfix:after {
 content: " ";
 display: table;
}
.clearfix:after {
 clear: both;
}
/* For IE 6/7 only */
.clearfix {
 *zoom: 1;
}
Esto es la capa contenedora

Y esta la hija, flotante

Redimensionado de background que simula columnas

Category : breves, HTML/CSS, Programación · No Comments · by Jun 10th, 2011

Este artículo es muy interesante para redimensionar automáticamente imágenes, videos,  etc.

http://www.alistapart.com/articles/fluid-images/

Y tiene una segunda parte tan interesante o más acerca de «layout de dos columnas de la misma altura y redimensionable (líquido)». ¿Sabes de qué hablo? Si lo has sufrido fijo que sí.

Artículo útil sobre CSS layouts

Category : HTML/CSS, Programación · No Comments · by May 31st, 2011

He encontrado un artículo interesante sobre layouts en CSS y bordes para dos columnas. No he probado lo que aquí cuentan, pero tendré que echarle un vistazo…
http://www.smashingmagazine.com/2010/11/08/equal-height-columns-using-borders-and-negative-margins-with-css/

Reemplazar texto con imágenes vía CSS

Category : HTML/CSS, Programación · No Comments · by Mar 22nd, 2011

Motivación

  1. Quiero una imagen en mi botón/enlace/elemento de menú/loquesea
  2. Quiero que los que no vean las imágenes (navegadores modo texto, bots, lectores de pantalla, etc.) tengan un texto equivalente
  3. Quiero que los demás no vean ese texto

HTML:

<div class="miclase">Mi texto alternativo</div>

CSS:

.miclase {
 text-indent: -100em;
 overflow: hidden;
 background: url(miimagen.png) no-repeat;
 height: 100px;
 width: 100px;
 }

El lío de los navegadores

Category : breves, HTML/CSS · No Comments · by Nov 5th, 2010

Es tal la maraña de diferencias de renderizado de los diferentes navegadores que es habitual incluir, entre las hojas de estilo (CSS) de las diferentes páginas web una destinada a tratar de uniformizar ese renderizado antes de comenzar a construir una imagen para la web.

Pero un ejemplo del caos que puede llegar a ser eso está en esta página que nos muestra 11, sí lector@s, ONCE, maneras diferentes de construir esa hoja de estilos.

http://perishablepress.com/press/2007/10/23/a-killer-collection-of-global-css-reset-styles/

Por cierto, gracias, al menos puedo probar varias opciones cuando tengo que iniciar un proyecto nuevo.

#main-menu li.item10 {  list-style-image: url(‘/images/icons/dot10.png’); }

Contando hacia atrás con CSS

Category : HTML/CSS, Programación · No Comments · by Jul 8th, 2010

Me ha encantado este artículo que permite que las listas ordenadas de HTML (ol) se numeren de maneras muy creativas: de dos en dos, hacia atrás, empezando en 100…

Nuevas posibilidades en ordenación, en definitiva.
http://www.sitepoint.com/blogs/2010/06/12/making-css-count-backwards/