Cada desarrollador tiene su propia manera de formatear o estructurar el código que escribe, pero cuando se trabaja en equipo, una forma estándar de formatear o estructurar el código es el mejor interés de todos.

En todo el tiempo que tengo escribiendo CSS, he ido experimentando con diferentes formas de estructurar mi código, formas de organizarlo para que sea más sencillo de identificar, no solo por mi, sino por las personas que trabajan conmigo.

Ahora complemento mis experiencias con opiniones de otras personas con el fin de encontrar la manera más funcional de organizar las hojas de estilo CSS. Claro está que cada persona puede optar por usar una manera particular de organización, pero de todas maneras es válido conocer algunos consejos que pueden orientar a los que no han conseguido este objetivo.

Uno de los trucos que aprendí ultimamente a raiz de jugar un poco con el css, es el de utilizar una grilla o rejilla en el fondo de la página durante el tiempo de desarrollo, esto me permite ubicar los elementos con mayor facilidad.

Navegando por The third degree encontré un método para organizar y manejar fácilmente nuestras hojas de estilo y el cual presento a continuación.
(more…)

Este es uno de los hacks más sencillos para asignar la altura mínima a algún elemento:

selector {
        min-height:250px;
        height:auto !important;
        height:250px;
}

Buscaba implementar un “style switcher” en una web que estoy preparando, hice algunas pruebas con diferentes códigos, lamentablemente ninguno funcionó como esperaba, desde javascript hasta php; cuando ya hube tirado la toalla (por enésima vez) recibí la ayuda de Gerald quien revisó el código, me hizo saber de los errores, y finalmente lo dejó funcionando (que excelente trabajar con un programador).

El código original lo obtuve de este blog y pertenece a Jorge Yau pero lamentablemente no funcionaba en mi web, entonces se ha modificado el script para poder hacer uso de las variables superglobales, según Gerald es un error común entre muchos programadores (entre ellos yo (aunque claro, apenas soy un newbie)).

Por otro lado, había un pequeño problema ya que el script intentaba llamar a los archivos llamados estilo#.css mientras que los archivos creados llevaban nombres del tipo style#.css, estos nombres fueron modificados.

Además se cambió la forma como se vincula a la hoja de estilos, que por alguna extraña razón no funcionaba en mi web. El script finalmente quedó de esta manera:
(more…)

Css Listamatic

Css Uberlinks

Uno de los problemas que he encontrado a la hora de diseñar con CSS, es centrar las imágenes. Así es, tan simple como eso, lo que se solucionaba con un simple <center></center> en HTML, usando css no parece tan sencillo. Soluciones?

Pues existen dos soluciones posibles (a lo mejor hay más pero son las únicas que he probado)

Uno
Asignamos a la etiqueta img la propiedad de “elemento de bloque” y al “margin” el valor “auto”, de esta manera el navegador asignará margenes proporcionales al espacio donde está contenida la imagen.

img { display: block; margin: auto; }

Lamentablemente esta solución no es viable en Internet Explorer (para variar), lo cual nos fuerza a buscar otra manera de hacerlo.

Dos
Esta es la manera como vengo haciéndolo, no es la más elegante pero funciona, para eso le daremos la propiedad text:align-center al cuadro contenedor de nuestra imagen, por ejemplo:

<div style="text-align:center"><img src="http://direccion/de/la/imagen.jpg"/></div>

Con lo cual habremos centrado la imagen.

A pesar de haber logrado el objetivo, no se porké me keda un saborcito amargo en la boca… CSS no sabe centrar!

Durante el desarrollo de las columnas de un web, a veces en algunos navegadores una de las columnas se desplaza a la parte de abajo, este error es producido por un par de pixeles de ancho en alguna de las columnas, akí hay un log de una conversa con un amigo, donde traté de explicarle como resolver este problema aplicando un hack de css (según lo que ví en la web se llama “Box Model”); puse toda la conversa para tratar de ser lo más didáctico que puedo, espero que les sirva

Los caminos de la vida… dice:
bueno mi consulta en particular era como meter ese hack q me diste la otra vez, para que el menú no se vaya para abajo
º dice:
bueno
º dice:
es sencillo mira, teóricamente en el css esto es interpretado por todos los browsers
#contenido { width:100px; }
º dice:
le dices que el ancho de la capa “contenido” es 100 pixeles, pero a veces no se ve bien en todos los browsers, entonces por ejemplo haces que esto se vea bien en Internet explorer poniendole #contenido { width:100px; } , y debajo usaremos una expresión que no es interpretada por el explorer solo por firefox (en este caso) html>body #contenido { width:105px; }
º dice:
lo pondremos asi
 
#contenido { width:100px; }
html>body #contenido{ 105 px; }
º dice:
todos los browsers interpretan la primera línea (100px) incluido el explorer, pero en la segunda línea le estás diciendo solo a firefox que corrija nuevamente el ancho de esa capa por el nuevo valor asignado (105px)
º dice:
esa segunda línea el explorer no la interpreta entonces keda bien cuadrado, y en firefox se corrije el error
º dice:
no se si me explico bien
Los caminos de la vida… dice:
a ver
Los caminos de la vida… dice:
creo q si, eso lo sustituyo en la parte donde se especifica el ancho del contenido
Los caminos de la vida… dice:
le pongo eso de
Los caminos de la vida… dice:
#contenido { width:100px; }
html>body #contenido{ 105 px; }
Los caminos de la vida… dice:
con eso le digo al firefox q lo haga un poco mas ancho de lo q es realmentre
º dice:
asi es
º dice:
pero sin borrar el anterior, solo le añades el nuevo valor debajo de lo que ya está hecho
º dice:
el que dice html>body #contenido
Los caminos de la vida… dice:
??
º dice:
es decir
º dice:
en tus hojas de estilo, ya están definidas las propiedades de los objetos
Los caminos de la vida… dice:
si
º dice:
no necesitas borrar nada, sino solo añadirle una línea donde sea necesario
º dice:
generalmente es algún ancho
º dice:
width
º dice:
hay una etiketa que modifica las columnas de la derecha e izquierda
º dice:
en aquella debe ser
Los caminos de la vida… dice:
mmm
º dice:
a ver deja que veo
º dice:
#menu {
margin: 0;
padding: 0 0 0 5;
width: 255px;
float: left;
font-family: "Verdana Geneva Arial Helvetica sans-serif";
font-variant: normal;
font-size: 11px;
background-image: url(build/white_bar_top.jpg);
background-repeat: repeat-x;
background-position: center top;
}
º dice:
un parche podría ir ahí debajo
º dice:
ese es el menu de la izquierda
º dice:
mira ahí hay una propiedad width: 255px;
º dice:
si necesitas, puedes reducir ahi
º dice:
html>body #menu { width: 250; }
º dice:
por ejemplo
º dice:
la cantidad será cosa de que vayas probando reduciendo el número poco a poco hasta que la otra columna no se corra hacia abajo
(more…)