01 Nov 2013
10 Oct 2013

Alinear el texto con imágenes en CSS: arriba, en el medio o abajo

Si queremos alinear texto al lado de una imagen con HTML y CSS muchas veces nos encontramos con el problema de que no queda alineado del modo que nos interesa, ya que por defecto se alinea abajo. La solución pasa por usar la regla de CSS “vertical-align“, que nos va a permitir que el texto se empiece a escribir en la parte de arriba de la imagen, desde el centro o en la parte inferior.

Por ejemplo:

Cubo AzulAlineamos arriba

Cubo AzulAlineamos en el centro

Cubo AzulAlineamos abajo

 

Éste es el código CSS usado:

Selec All Code:
1
2
3
4
5
6
7
8
9
10
img.alineadoTextoImagenArriba{
  vertical-align: text-top;  
}
img.alineadoTextoImagenCentro{
  vertical-align: middle;
  /* Ojo vertical-align: text-middle no existe*/
}
img.alineadoTextoImagenAbajo{
  vertical-align: text-bottom;  
}

 

Si por ejemplo quisieramos alinear el texto en la parte superior podríamos usar el siguiente código HTML:

Selec All Code:
1
<img class="alineadoTextoImagenArriba" src="http://ruvic.es/wp-content/uploads/cuboAzul.jpg"/>Mi texto alineado arriba
Comparte
31 Ago 2011

Neuromarketing en el Desarrollo de Páginas Web

Sinapsis de una Neurona para ilustrar el efecto del Neuromarketing en el CerebroEn un mundo tan competitivo como el marketing en Internet, los pequeños detalles marcan la diferencia. En Ruvic, cuando nos enfrentamos al desarrollo de una nueva página Web, mantenemos un compromiso desde diferentes puntos de vista. Un diseño “bonito” sin más, no va a aumentar las ventas, necesitamos un trabajo mucho más profundo que la simple apariencia. Además del diseño, trabajamos: el SEO (resultados en buscadores como Google), el cumplimiento de los estándares, la usabilidad, los tiempos de carga, la seguridad, contenido de calidad … y lo que vamos a contar hoy: el factor psicológico.

Cuando visitamos una página Web, hay una serie de pequeños detalles que escapan a nuestra consciencia, que nos guían a actuar de una manera o de otra. ¿Por qué hay páginas que visitamos diariamente si sabemos que hay otras que son mejores? ¿Cómo consigue una página web destacar ante la competencia?
El neuromarketing es la linea de investigación que da respuesta a estas cuestiones. Consiste en una serie de tendencias basadas en el estudio del efecto de la publicidad en el cerebro, que analiza los factores que, sin darnos cuenta, quedan incorporados en nuestro subconsciente y orientan nuestras elecciones.
Aunque, en una tienda online es donde se pueden aplicar un mayor número de recomendaciones, en cualquier proyecto Web podemos seguir muchas de las directrices del siguiente decálogo: Leer más

Comparte
04 Ago 2011

phpScheduleIt. Sistema de reserva de recursos

Captura de pantalla de phpScheduleItDespués de algunos meses de trabajo, ya tenemos en fase de pruebas Beta un nuevo proyecto en la Facultad de Ciencias de la Universidad de Granada. Consiste en un sistema de Reserva de Aulas, donde los usuarios (profesorado, PAS …) pueden hacer peticiones de reserva de un espacio de la Facultad y los Administradores las validan, editan o revocan. Para conseguir todo esto estamos adaptando la aplicación web de Software Libre: phpScheduleIt.
En este primer artículo os vamos a explicar qué es phpScheduleIt y para qué se usa. En siguientes artículos os enseñaremos como instalar esta aplicación Web en diferentes entornos y sistemas operativos. Más adelante, escribiremos una serie de artículos donde nos adentremos en el uso, gestión y programación de la herramienta.

¿Qué es phpScheduleIt?

phpScheduleIt es una aplicación Web construida en  PHP y HTML con algunas partes concretas en JavaScript. Pero lo que es más importante … ¡¡es Software Libre!!, lo que nos permite poder programar nuevas utilidades sin ningún problema. Además está realmente bien construida, siguiendo una orientación a objetos muy formal, de manera que podemos adaptar la aplicación a nuestras necesidades si tenemos ganas de programar. De todos modos, la aplicación permite cambiar muchas opciones desde su menú, sin que tengamos que escribir ni una linea de código. Leer más

Comparte

© 2010 Ruvic Soluciones Informáticas

Subir