Jugando con los anchos

Como veis he cambiado la leyenda correspondiente a los comentarios publicados que tras cada “post” suele haber por un icono con el número de los mismos, modelo que además he utilizado para designar a los comentaristas visitantes, es decir, vosotros.

Por esto de los bloques, los anchos, altos, "margins” y “paddings”, “Mozilla Firefox” e “IE” casi se hace tarea imposible acomodar distancias, numerología e iconografía.

La solución más simple que he encontrado ha sido modificar los anchos totales del “blog”, que por otra parte he descubierto que incluso queda más diáfano.

Mi consejo; si decidís realizar tal cambio, probablemente tendréis que hacer lo mismo con los anchos que definen vuestra plantilla.

Cambiar el estilo de nuestros “links”

Como ya sabréis, los “links” vienen definidos en las primeras líneas de código, en la pseudoclase “a”, de esta forma: “a:link/visited/hover/active {propiedad:valor;}”; quedan así de esta manera definidos los estilos para todo nuestro “blog”.

Ahora bien, puede ocurrir –como es el caso de este “menda lerenda”—que queramos modificar el estilo de ciertos vínculos  por razones de diseño; el asunto es sencillo, pero debemos tener cuidado en la escritura del código.

En primer lugar tendremos que decidir la clase donde estarán los vínculos que queramos modificar; llamémosla, por ejemplo, “enlaces” –en mi caso concreto, fue en “.comment-link” donde tuve que realizar las modificaciones oportunas.

Y ahora, el quid de la cuestión:

1. Crearemos las siguientes clases:
1. enlaces:link {propiedad1:valor1;… propiedadn:valorn;}
2. enlaces:visited {ídem}
3. enlaces:hover {ídem}
2. Nuestra clase “enlaces” estará precedida por “#” o por “.”, dependiendo de si queremos asignarla a un elemento o a varios –también seguiremos la sintaxis de la clase a modificar, es decir, si era “#” o “.” por los que venía definida anteriormente.
3. Colocamos la lista de “1.” debajo de la clase a modificar.

Siguiendo esta estructura tendríamos que conseguir nuestros propósitos.

Otros diseñadores apuntan a esta sintaxis:

• “enlaces a:link {propiedad:valor;}”;

en principio esta sintaxis tendría que dar el mismo resultado que la anterior (el literal dentro de las comillas); personalmente la he probado, y no funciona con ciertos navegadores, entre ellos “Mozilla Firefox”. Las sentencias que os escribo al principio al menos funcionan en este navegador y en “IE”.

Una referencia a la entrada anterior. A ver si aparece ese “ángel” que me aclare cómo poder modificar el botón y los “tooltips” del buscador que puede instalarse desde los “widgets” que hay en “Elementos de página”; añado además el conseguir cambio de color en los textos mostrados en el evento “hover”. Comentarios, por favor.

Selectores “ID”

Esta entrada, aunque breve y probablemente de escasa información para los avezados en “CSS”, contiene un concepto fundamental a la hora de crear nuestras hojas de estilo o modificar la plantilla que en su día escogimos como plataforma base para nuestro “blog”: los selectores “ID”.

En el diseño de nuestro código es conveniente separar –y así seguimos la norma—el código “HTML” y el correspondiente a las hojas de estilo “CSS”. ¿Por qué razón? Pues porque, en primer lugar, nos será más sencillo manipular el resultado final de nuestro “blog”; por supuesto esta afirmación se extiende a las más que seguras modificaciones posteriores; y en segundo lugar, para ayudar a que nuestro “blog” sea lo más accesible a cualquier tipo de terminal, incluso navegador.

Para lograrlo, es tarea imprescindible comprender tal concepto, pues una vez dominados nos será muy sencillo incluir cualquier tipo de elemento en nuestro “HTML” y posteriormente cómodamente editado a través de nuestra hoja u hojas de estilos. Pensemos en los “ID” como elementos “bloque”, que podemos colocar a nuestro antojo allí dónde queramos. Usémoslos pues, primero como tales. Una vez definidas las acciones y posición del mismo, es el momento de diseñar nuestra hoja de estilos. Así, si definimos un “ID” como por ejemplo, <… id= ‘mielemento’…> lo llamaremos para su diseño en nuestra hoja de estilos como #mielemento.  Sólo podemos usarlo una vez en nuestro documento. ¡Y mucho cuidado con los caracteres empleados!, pues sólo pueden estar formados por letras, números y guiones. Siempre comenzarán por una letra, y un apunte más: aunque no estoy del todo seguro, aconsejo que no se utilice, por ejemplo, #MiElemento como #mielemento, y viceversa. Es importante conservar la sintaxis; después de todo, estamos construyendo en una “web semántica”.

Este consejo podréis encontrarlo en cualquier publicación sobre “CSS”. En mi caso particular, mis fuentes son “Diseño web con CSS”, de Ralph G. Schulz y “CSS”, de Xavier Colomés Fornós; el primero de Marcombo, y el segundo, de Anaya.