Posts almacenados bajo 'CSS'
Algunas veces es un dolor de cabeza, ver como nuestros diseños hechos con CSS no funcionan correctamente en Internet Explorer.
Via tuFuncion.com en su articulo El hack definitivo para tus CSS presentan una interesante solución a este problema.
Se trata de usar etiquetas que solo Internet Explorer interpreta, de esta forma podemos corregir aquellas “imperfecciones” que se presentan en este navegador.
Para entenderlo mejor veamos el ejemplo que nos da tuFuncion.com
Por poner un caso práctico, queremos usar un margen izquierdo que tiene 5px en Firefox y en Opera y 6px para IE6 y 7px para IE7:
margin-left: 5px; /* Todos los navegadores */
.margin-left: 7px; /* Margen izquierdo de 7px para IE6 y IE7, los demas navegadores todavia seguiran manteniendo el margen de 5px inicial */
_margin-left: 6px; /* Sólo IE6 leerá y entendera este estilo y aplicará el valor */
En resumen
|
Etiqueta
|
Navegador
|
Ejemplo
|
|
//
|
IE todas la versiones
|
//margin-left: 5px
|
|
.
|
Solo IE6 y IE7
|
.margin-left: 5px
|
|
_
|
Solo IE6
|
_margin-left: 5px
|
Añadir comentario Noviembre 12, 2007
CSS Formatter and Optimiser es un script que permite optimizar nuestro código css de tal forma que reduce el tamaño del archivo sin perder ninguna funcionalidad.
CSS Formatter and Optimiser optimiza una seria de aspectos css tales como:
- Comprimir colores. Por ej. #FFFFFF a #FFF
- Comprimir font-weight. Por ej. normal a 400
- Optimizar selectores. Por ej. “1px 1px” a “1px”
- Remover “;”
- Entre otras…
La característica mas destacada de este script, son sus varias opciones, con las que podemos ajustar la optimizacion a nuestras necesidades.
Añadir comentario Noviembre 05, 2007
Los colores dentro de una página Web son una parte fundamental ya que permiten representar de forma resaltada alguna sección o tambien para hacerla mas atractiva a los visitantes.
El uso de estos colores no es complicado ya que existen códigos establecidos para cada combinación de ellos. Algunas páginas como el Hi5 permiten personalizar la presentación de nuestro contenido, y de esta forma los colores los podemos definir como nosotros lo decidamos.
Estos colores pueden ponerse para letras, fondos de toda una pagina, fondos de una tabla, una fila o una celda de la misma, etc y pueden ser establecidos según nuestras necesidades únicamente ingresando el código que deseemos.
En este post encontrarás algunos de estos códigos que te ayudaran a personalizar a tu Hi5 a tu gusto…
Continue leyendo 7 comentarios Septiembre 26, 2007
Es común encontrar en nuestros diseños situaciones en las cuales no se muestran como esperábamos.
Una de ellas es cuando el contenido de alguna sección (Por lo general algún DIV) es pequeña y no se ajusta como pensamos (Una sección se muestra larga y la otra muy corta).
Para solucionar este problema podemos usar la etiqueta:
min-height:ALTURA
Con esta etiqueta definimos la altura mínima de una sección (DIV) asegurando que aunque el contenido sea pequeño, este se mostrara con una altura mínima.
1 comentario Febrero 27, 2007
Cuando definimos una imagen como vínculo dentro de una página Web, lo que suele pasar es que se presenta un borde alrededor de ella.
Para quitar este borde definimos el siguiente estilo dentro del css que utilicemos.
a img
{
border: none;
}
3 comentarios Febrero 01, 2007
Aunque muy pronto con CSS3 podremos usar etiquetas CSS nativas para poder crear elegantes esquinas redondeadas en nuestros diseños, hoy lo podemos hacer fácilmente usando la potencialidad de Nifty Corners.
Nifty Corners es totalmente parametrizable, lo único que necesitamos es incluir niftycube.js
<script xsrc="niftycube.js" mce_src="niftycube.js"></script>
Y luego llamas a la función Nifty() con los parámetros que tu elijas, en el lugar donde muestres tus esquinas redondeadas.
Añadir comentario Enero 05, 2007
Segun el propio Microsoft “Los archivos PNG no muestran transparencias en Internet Explorer“. Sin embargo existe una solución sencilla que permite usar nuestras imágenes PNG con transparencias, para ello usaremos un comportamiento aplicado al elemento IMG.
Lo que debemos hacer es definir lo siguiente usando CSS:
img { behavior: url("pngbehavior.htc"); }
Ahora descargamos el comportamiento desde PNG Behavior.
Descomprimimos el archivo y colocamos los documentos pngbehavior.htc y blank.gif en el mismo lugar del archivo CSS.
Nota: Para que funcione correctamente es necesario definir las etiquetas width y height de las imágenes.
Añadir comentario Diciembre 30, 2006
