XHTML

Centrar texto verticalmente con css

Desde hace años que me pase a las capas abandonando la maquetación en tablas, si algo he hechado de menos siempre ha sido el «como centrar texto verticalmente sin valign». Para solucionar este problema, siempre he usado subcapas con margin o paddings o directamente padding superior en la capa padre para bajar el texto, aunque eso se comporta de manera distinta dependiendo del navegador. En una pagina que estoy montando me he puesto a investigar, como alguna vez hago con el intellisense mirando todo lo que me encuentro y en esta ocasión le ha tocado el turno al css. Buscando me he encontrado con un atribuo de css que se llama line-height, que agranda la linea del texto a la altura que le indiquemos, lo que quiere decir que si tenemos un menú, de pastillas de 50px de alto y le indicamos que el line-height es 50px, el texto aparecerá centrado. Realmente no es algo milagroso ya que no es dinámico, pero para menús y cosas así viene genial.

Os dejo un ejemplo de como se utilizaría:

Ejemplo del html:

Ejemplo del css:

#menu {
  height: 50px;
}

.menuOption {
  line-height: 50px;
  text-align: center;
}

Con este ejemplo anterior, nos dibujaría una pastilla (mas o menos) y nos dejaría el texto centrado verticalmente y ya de paso centrado horizontalmente también.

Autocomplete=»off» valido para XHTML

Cuando escribimos un texto en un input de tipo text (input type=»text») nos encontramos que por regla general el navegador nos va a autocompletar lo que estemos escribiendo en ese momento con texto que ya hayamos escrito con anterioridad, recordando para un input que se llama «nombre» el o los nombres que hayamos introducido.

La practica del autocompletado es muy util siempre que tengamos formularios repetitivos, tales como los formularios de registro que suelen llamarse siempre de forma similar y siempre suelen pedir los mismos datos, evitandonos volver a escribir todos nuestros datos una y otra vez.

Existen casos en los que quizas no queramos que el navegador nos autocomplete ese texto, puede darse el caso que tengamos una tienda online que realiza el pago con tarjeta de crédito y no queramos que esa tarjeta de crédito se nos autocomplete. Para evitar esto, existe un atributo que es utilizado por la gran mayoria de los navegadores que es el atributo autocomplete=»on|off», que si se desactiva con el valor off, indica al navegador que no ha de autocompletar ese campo.

Aunque en muchos casos es muy buena practica usar el atributo autocomplete, el W3C no tiene reconocido este atributo como atributo de la etiqueta input, con lo cual al intentar validar y encontrarse con el atributo autocomplete, nos dara un error de validación. Para solucionar el error de validación lo que haremos sera utilizar javascript para añadir este atributo, así la funcionalidad seguira estando ahí, pero no tendremos problemas de validación.

Lo unico que deberemos hacer es añadir el siguiente código al final de la página, o al menos, justo despues de declarar el input

  

De esta forma conseguiremos que al introducir un texto en un input no se autocomplete por el navegador y si queremos autocompletar lo podamos hacer por javascript.

Un buen y bonito ejemplo de autocompletado de campos es el que use para muchoviaje en los campos de origen y destino

Símbolo del euro en xml o xslt sin utf-8

Durante el desarrollo de mi último proyecto, me encontré con un xml de transformación o xslt, donde debía de usar el símbolo del euro (€), pero esta transformada, que no deja de ser un xml, estaba codificada en iso-8859-1, y no podía cambiar la codificación. A la hora de añadir el símbolo del euro, si usaba directamente el carácter €, fallaba porque estaba mezclando codificaciones, y si usaba € como viene siendo en html, fallaba porque no es un carácter válido de xslt. La solución, usar los caracteres especiales, en este caso para el euro (€) es el €

Scroll al inicio