JMiur [E]

Las etiquetas son rectángulos, algunos, independientes otros no; por eso se habla de elementos de tipo bloque (block) o elementos inline; ambos son rectángulos, como todo lo demás pero los primeros siempre se ubicarán por defecto uno debajo del otro (DIV P LI) y los otros, se ubicarán uno al lado del otro (SPAN IMG A).

Por lo general, utilizamos la propiedad display con dos valores: block o inline.

Lo hacemos para invertir esa propiedad por defecto es decir, hacer que un elemento inline sea un bloque o que un elemento de bloque sea inline. El primer caso es el típico de las imagenes centradas donde establecemos que la etiqueta IMG sea de tipo block. El segundo, lo usamos muchas veces para los menús agregando el valor inline a la etiqueta LI para que se vean una al lado de la otra.

Pero, esos no son los únicos valores que acepta la propiedad display y en particular, hay algunos relativamente nuevos que son muy interesantes y que vale al pena tener en cuenta ya que son aceptados por todos los navegadores incluyendo IE8.

Supongamos que tenemos dos DIVs a los que dimensionamos y le ponemos algún tipo de contenido:
<style>
div.ejemplo {
  height: 100px;
  margin: 5px;
  padding: 0 10px;
  text-align: center;
  vertical-align: middle;
  width: 250px;
}
</style>

<div class="ejemplo"> ....... </div>
<div class="ejemplo"> ....... </div>
BLOCK 1
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.
BLOCK 2
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.

Lo que veremos es un rectángulo debajo del otro y alineados a la izquierda. Aunque no hemos definido nada, la propiedad display tiene el valor de block ya que es la propiedad por defecto de una etiqueta DIV. Si quisiéramos centrarlos, cambiaríamos margin:5px; por margin:5px auto;

Si estableciéramos la propiedad display con el valor inline, lo que veríamos sería algo bastante confuso:

INLINE 1
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.
INLINE 2
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.


Pero, en lugar de eso, vamos a utilizar uno de esos valores poco frecuentes llamado inline-block:
<div class="ejemplo" style="display:inline-block;"> ....... </div>
<div class="ejemplo" style="display:inline-block;"> ....... </div>
INLINE-BLOCK 1
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.
INLINE-BLOCK 2
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.


Lo que estamos viendo son dos rectángulos, uno al lado del otro; si quisieramos centrarlos, ya no nos sirve el método anterior sino que deberíamos colocarlos dentro de otro DIV dimensionado al que sí centramos con margin. De alguna manera, es algo muy similar a cuando se utiliza float:left aunque tiene la ventaja de no afectar en nada al resto de la página tal como ocurre con float.

Hasta acá, en todos los casos, el contenido permanecía alineado verticalmente arriba, la propiedad vertical-align que se utilza para centrar verticalmente no tiene afecto pero, hay un par de valores más que podemos usar para resolver el famoso tema de alinear cosas. Se trata de los valores table y table-cell que lo que hacen es ... algo parecido a una tabla.
<div class="ejemplo" style="display:table-cell;"> ....... </div>
<div class="ejemplo" style="display:table-cell;"> ....... </div>
TABLE-CELL 1
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.
TABLE-CELL 2
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.

Es similar a inline-block; aparecen uno al lado del otro, con el contenido centrado verticalmente pero, esta vez, la que no tiene ningún efecto es la propiedad margin.

Para centrar esto y separar los DIVs, debemos usar un contenedor:
<style>
div.contenedortablecell {
  border-spacing: 5px 0;
  display: table;
  height: 200px;
  margin: 0 auto;
  width: 400px;
}
div.tablecell {
  display: table-cell;
  padding: 0 10px;
  text-align: center;
  vertical-align: middle;
}
</style>

<div class="contenedortablecell">
<div class="tablecell"> ....... </div>
<div class="tablecell"> ....... </div>
<div class="tablecell"> ....... </div>
<div class="tablecell"> ....... </div>
</div>
1
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.
2
Integer convallis erat mattis.
3
Integer convallis.
4
Integer convallis erat mattis arcu vehicula et fermentum mi cursus.

Allí, dimensionamos el contenedor con height y width; las "celdas" se adaptarán a su contenido de manera automática, distribuyéndose en ese ancho definido; eso puede probarse haciendo click sobre los enlaces superiores aunque claro, si pretendemos que el contenedor sea mas angosto que el contenido (100) el valor será ignorado y el ancho será el mínimo posible que en este caso son 369 pixeles.

En el estilo, la separación se define con al propiedad border-spacing que es al que establece el espacio entre celdas donde el primer valor indica el espacio horizontal y el segundo el vertical. Sobre esto hay que tener en cuenta que en muchas páginas se dice que además debe agregarse otra: border-collapse: collapse; pero es errçoneo, en realidad, debe hacerse lo contrario que es poner border-collapse: separate; o nada ya que esa es la propiedad por defecto.

3 comentarios:

Anónimo  

hola jmiur, tengo 2 pequeños problemitas, mira en mi blog coloque una encuesta pero las opciones y el numero de votos y los dias que quedan el tamaño de las fuentes estan muy chiquitas y quisiera aplicarle css, cambiar de tamaño de fuente, color, etc.. le he movido y agregado css en todas las partes que encontre y nada no cambian ni de color ni de tamaño ni fuente.

Tambien le aplice css a: Poll1 y al Frame de las encuestas y en estilo del frame y nada no cambia, alguna solucion??

Otro problema son los tags, al momento de ponerlos le cambie de formato ami gusto y eso quedo bien e incluso lo justifique pero el margen entre la orilla de la sidebar es muy pequeño, quisiera aplicarle margen-left, right y bottom a las etiquetas de nube, he intente aplicarle css en label1, label-size, label-cloud... y no funciono no da el margen, alguna solucion??

Espero que me ayudes y esta exelente tu blog, es el que mas recurro frecuentemente :D

Responder
JMiur  

Si la encuesta es un IFRAME, no puede ser modificada con CSS porque es una página externa y no tienes acceso a ella.

Para separar las etiquetas de lso bordes de la sidebar, agrega algo así:
.cloud-label-widget-content {
padding: 20px !important;
}

Responder
Anónimo  

Entonces Jmiur a las encuestas no le puedo aplicar css y no hay alguna forma de cambiar la fuente y el color?? uff entonces es un desperdicio, aun le falta mucho a blogger :S Entonces lo mas recomendable es no usar encuestas :S

Grasias por el tip para las tags me quedo super bien :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR