Ruta Relativa » CSS

Mozilla Firefox no carga el CSS

Sergiocius — Mon, 14 Mar 2011 17:56:11 +0000

Un problema que nos sucede a muchos webmasters es que a veces Mozilla Firefox no carga el CSS, o Google Chrome no carga el CSS -por citar dos exploradores- mientras que en Internet Explorer dicho CSS se muestra perfectamente.

Esto puede ser debido a algunas razones, pero nosotros vamos a proponer dos posibles soluciones sin contar las más lógicas como comprobar si la ruta del CSS se encuentra correctamente y similares. Empezamos:

Solución 1: Mozilla Firefox no carga el CSS

La primera posible solución puede ser que nuestro CSS contiene algún error grave y debemos de subsanarlo antes de que Firefox lo pueda mostrar. Para poder comprobar nuestro CSS deberemos de dirigirnos al validador de la W3C que nos indicará todos los errores y advertencias acerca de nuestro CSS. Por supuesto lo corregimos y probamos hasta que nuestro CSS se muestre.

Solución 2: Mozilla Firefox no carga el CSS

Añade el siguiente código en tu archivo .htaccess:


AddHandler text/css .css

Con esto nos aseguramos que nuestra página web usará los archivos .css como fuente, siendo una posible solución.

Añadir icono dentro de un Input

KeLDroX — Wed, 10 Mar 2010 12:13:58 +0000

En el diseño de una página Web es normal encontrar formularios, ya que son los encargados de dar interactividad a nuestro usuarios, añadiendo o editando datos que posteriormente se verán reflejados en la página Web. Una forma buena para atraer a los usuarios a usar nuestros formularios es con un buen diseño, como por ejemplo personalizándolos acorde al aspecto de nuestra página Web. Añadir iconos dentro de los Input mediante CSS es una técnica bastante fácil de realizar y queda bastante profesional en un formulario.

Añadir icono dentro de un Input – Parte 1

El aspecto que intentamos conseguir es el que en cada campo del formulario contenga un icono representativo de lo que debe introducir nuestro usuario. Lo realizaremos mediante un grupo de imágenes que estarán en el interior de los campos Input en la parte izquierda. Añadiremos una separación por la parte izquierda entre el texto introducido y el icono para que el texto no quede encima del icono. Y por último añadiremos varias clases que serán las encargadas de posicionar cada icono dentro del Input.

Código HTML


    Icono usuario
    


    Icono Password
    


    Icono favorito
    


    Icono buscar

Añadir icono dentro de un Input – Parte 2

Antes de ver el código CSS que representará gráficamente los objetos en pantalla es mejor ver esta imagen que muestra lo que realmente está ocurriendo con las reglas CSS.

Código CSS

input
{
    background: url("iconos.gif") no-repeat scroll 0 0 transparent;
    border: 1px solid #BFBFBF;
    color: #BFBFBF;
    padding: 5px 5px 5px 25px;
    width: 230px;
}

input.submit
{
    width: auto;
    background-position: 4px -91px;
    background-color: #999999;
    color: #FFFFFF;
    cursor: pointer;
}

input.user{ background-position: 4px -21px; }
input.search{ background-position: 4px 4px; }
input.password{ background-position: 4px -46px; }
input.favorite{ background-position: 4px -70px; }

Con estas sencillas reglas CSS podremos añadir iconos dentro de los campos Input de un formulario quedando un poco más acorde a nuestro diseño. Tan sólo necesitamos añadir más imágenes e ir aplicándole clases para las distintas posiciones en la que se encontrará el icono.

Demo: Ir a la demo añadir icono dentro de Input
Descarga: Descargar añadir icono dentro de Input
Iconos: Tutorial9

CSS: Centrar elementos en pantalla

KeLDroX — Fri, 29 Jan 2010 11:52:22 +0000

Existen varias formas de centrar elementos en pantalla mediante CSS. Personalmente creo que la forma más óptima para centrar un elemento es el ejemplo que hoy os enseño. El elemento quedará flotando en el centro de la pantalla, de modo que añadiremos una propiedad top del 50% y una propiedad left del 50%. Una vez añadida estas dos propiedades el elemento quedará posicionado en el centro de la pantalla desde su esquina superior izquierda. Tan sólo quedará restar la mitad de su ancho por el margen derecho y la mitad de su alto por el margen superior. En la imagen de ejemplo que os he añadido se ve más claro.

Imagen de ejemplo centrar elementos en pantalla

Nuestro código HTML:



	
		titulo

Nuestro código CSS:

#centrado
{
     width: 150px;
     height: 150px;
     position: absolute;
     top: 50%;
     left: 50%;
     margin-top: -75px;
     margin-left: -75px;
     background-color: #69a6e5;
}

Ejemplo centrar elementos en pantalla en CSS

Cargar imágenes mediante CSS

KeLDroX — Wed, 27 Jan 2010 11:43:40 +0000

No es una “carga” real de la imagen mediante CSS, lo que añadiremos será una imagen de fondo de modo que parezca un preloader, así dará la sensación de carga al usuario. La carga de imágenes se puede realizar mediante Javascript y resultaría más óptimo, pero una carga de este tipo es más fácil de implementar y los resultados a la vista son parecidos; repito que es más optimo es realizarlo mediante Javascript, pero una página con pocas imágenes queda bastante bien mientras está el proceso de carga.

Cargar imagenes mediante CSS

Nuestro código CSS añadirá un borde a la imagen para que el preloader no parezca flotante en la nada, añadiremos un espaciado entre la imagen y el borde de 5 px y por último una imagen de fondo que será nuestro preloader mientras la imagen no está cargada.

img
{
     padding: 5px;
     border: 1px solid #CCCCCC;
     background: url( "load.gif" ) center center no-repeat;
}

El códgio HTML es el siguiente, como veis no tiene nada fuera de lo normal para cargar imágenes mediante CSS.

Demo: Cargar imagenes mediante CSS

Variables PHP en CSS

KeLDroX — Mon, 07 Dec 2009 10:08:45 +0000

En el mundo de la programación se crean infinidad de variables que van cambiando según se interactúa con el programa. En CSS tampoco podría ser menos y la versión 3 de CSS permite realizarlo. El problema radica en que todos los exploradores no soportan esta funcionalidad, ni tampoco podría obtener valores desde MYSQL o PHP. Por ello existe un pequeño truco que he utilizado en uno de mis últimos proyectos.

Como utilizar variables PHP en CSS

Añadimos a nuestra cabecera la hoja de estilo

Archivo estilo.css



#cabecera
{
   background-color: ;
}

a
{
  color: ;
}

Archivo .htaccess


SetHandler php5-script

Como vemos al poder usar variables PHP dentro del CSS se pueden extender otras ideas como, compresión por GZIP, atacar a MYSQL, etc. La configuración del archivo .htaccess es importante para que el archivo CSS sea procesado como un archivo PHP y así poder utilizar las variables.

Tres útiles manuales para CSS

KeLDroX — Wed, 02 Dec 2009 15:52:14 +0000

Todos los que llevamos un tiempo en el mundillo de la programación CSS (Cascading Style Sheets) conocemos algunas técnicas útiles para que se vean nuestros diseños en todos los exploradores de la forma más parecida posible. Además sabemos donde encontrar manuales e información acerca de estas técnicas que pueden quitarte de encima más de un problema. Pues bien, para los que no lo conozcan o los iniciados en CSS os añado tres útiles manuales que me han servido bastante a la hora de desarrollar en CSS.

Manual extenso sobre las capas flotantes

Si quieres saber más acerca de las capas flotantes, tienes este manual que contempla todas las posibles situaciones con las capas flotantes y muestra los problemas más habituales y sus soluciones.

Manual de introducción CSS

Este manual cubre lo esencial para empezar a maquetar páginas web centrándose en los siguientes puntos:

Padding y margin
Capas flotantes
Centrar capas
Listas
Estilo para las cabeceras
Scroll en las capas
Posiciones de las capas

Manual sobre las diferencias entre Internet Explorer 6, 7 y 8

Un buen manual que muestra las diferencias existentes entre las versiones, 6, 7 y 8 del explorador Internet Explorer de Microsoft.

Aunque penséis que tenéis buena base en CSS, os aconsejo leer todos los manuales ya que aprenderéis algunas técnicas o consejos realmente útiles para emplearlos en vuestros proyectos.