Vagabundia: : “Agregar una leyenda a las imágenes” y 1 más artículos |
| Agregar una leyenda a las imágenes Posted: 22 Mar 2011 08:15 PM PDT En el nuevo editor de Blogger, las imágenes pueden ser agregadas desde el modo Edición de HTML que mostarará la ventana típica para subir imágenes que o bien desde el modo Redactar donde la ventana es un poco más sofisticada. Usando este último método, una vez que vemos la imagen, podemos hacer click en ella para cambiar su tamaño, seleccionado entre los las opciones predeterminadas, alinearla, eliminarla o Añadir una leyenda.  Justamente esto último suele traer alguna consulta respecto a la personalización ya que Blogger agrega una serie de propeidades por defecto y uno, a veces quiere cambiarlas: table.tr-caption-container { margin-bottom: 0.5em; padding: 4px; } td.tr-caption { font-size: 80%; }
Si miramos el código generado, veremos que en realidad, lo que se ha agregado es una tabla más o menos así: <table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"> <tbody> <tr> <td style="text-align: center;"> <a href="URL_imagen" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"> <img border="0" src="URL_imagen" /> </a> </td> </tr> <tr> <td class="tr-caption" style="text-align: center;">el texto con la leyenda agregada</td> </tr> </tbody> </table> Mucho código para una pobre imagen pero, es lo que hay. Para darle un aspecto diferente basta agregar el estilo en alguna parte de nuestro CSS, dentro de <b:skin> </b:skin>; por ejemplo: table..tr-caption-container { /* esta es la tabla */ -moz-box-shadow: 0 0 30px #ABC; -webkit-box-shadow: 0 0 30px #ABC; box-shadow: 0 0 30px #ABC; border: 2px solid #567; margin: 0 auto; padding: 0; } td.tr-caption { /* esta es la leyenda */ background-color: #334455; border-top: 1px solid #556677; color: #DDEEFF; font-family: Georgia; font-size: 20px; padding: 5px 10px; }
| ||||
| Los márgenes, los paddings, las flotaciones Posted: 21 Mar 2011 11:35 PM PDT Márgenes, padding, flotaciones, todo da igual, usamos las propiedades de modo instintivo, probando con una o con otra, agregando valores, disminuyéndolos o aumentándolos pero llega un momento en que todos esos pequeños ajustes se vuelven inmanejables. En el CSS no hay propiedades malas y propiedades buenas, lo que deberíamos hacer para no complicarnos es entender las diferencias entre ellas porque a veces parecen ser los mismo pero no lo son. En estos ejemplos se usa margin y se usa padding ... aparentemente, el resultado es el mismo: Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor. este DIV no tienen ningún estilo definido. Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.lo separo con margin:30px 0 Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.lo separo con padding:30px 0 Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.Parecen iguales pero no lo son. Es fácil de ver la diferencia si le agregamos un borde: Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor. este DIV no tienen ningún estilo definido. Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.lo separo con margin:30px 0 Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.lo separo con padding:30px 0 Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.Lo mismo pasaría si les agregáramos un fondo. Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor. este DIV no tienen ningún estilo definido. Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.lo separo con margin:30px 0 Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.lo separo con padding:30px 0 Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.La propiedad margin, separa TODA la etiqueta de la que está arriba y de la que está abajo; en cambio, la propiedad padding, separa el contenido de la etiqueta de sus propios bordes es decir, cambia su tamaño haciéndola más ancha o más alta. Como esto suele aplicarse a elementos de bloque (etiquetas P, DIV, etc), a menos que lo indiquemos expresamente, el ancho que ocupará será el mismo que el rectángulo que la contiene así que si queremos darle un ancho diferente, debemos usar la propiedad width a la que le ponemos un valor, por ejemplo: width:300px; Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor. este DIV tiene definido el ancho. Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.lo separo con margin:30px 0 Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.lo separo con padding:30px 0 Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.Si tiene un ancho definido, podemos centrarla usando los márgenes; para eso, establecemos el valor a derecha e izquierda con la palabra auto: margin: 30px auto; lo centro con margin:0 auto Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.lo centro y lo separo con margin:3px auto Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.lo centro, lo separo y le coloco padding Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.El problema que surge muchas veces al tratar de centrar algo, es que el elemento que queremos centrar, se encuentra dentro de otros y esos otros tambien tienen márgenes o paddings por lo tanto, todo se tergiversa y ahí, suele recurrirse a márgenes negativos o cosas raras cuando, en realidad, bastaría poner todo a cero y eliminar esos valores innecesarios: <div> <div style="padding-left: 80px;"> <div style="margin-left: 100px;"> <div style="margin:30px auto;padding:30px;width:300px;;">el div que quiero centrar y no se centra</div> </div> </div> </div> el div que quiero centrar y no se centra Otro problema es el que surge cuando usamos flotaciones (propiedad float) que es muy útil pero tiene sus bemoles: Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor. lo centro, lo separo, le coloco padding y agrego float:left Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.Como se ve en el ejemplo, el texto inferior se ha ido de paseo y se muestra arriba en lugar de abajo. No, no hay error, lo que hace float es exactamente eso, cambia el flujo normal de las etiquetas (una debajo de la otra) y si queremos que lo de abajo permanezca abajo, a esa última debemos agregarle la propiedad clear:both; para indicar que de ahí en adelante, todo vuelve a la normalidad: Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor. si usa float:left no puedo centrarlo de manera automática Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor.Además, si usamos float, la palabra auto deja de tener efecto así que la etiqueta no se centrará y para hacerlo, no queda otro remedio que usar margin-left, calculando el valor con un poco de aritmética; algo así: valor de margin-left = ((width contenedor - width contenido) / 2) - padding del contenido - border-width del contenido Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor. si usa float se debe centrar con margin Etiam metus nunc, hendrerit ut accumsan sed, scelerisque quis tortor. |
| You are subscribed to email updates from Vagabundia To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
No hay comentarios:
Publicar un comentario