sábado, 3 de abril de 2010

Separación entre el contenido de filas

Para poder definir un espacio mayor al predefinido entre cada una de las líneas que están contenidas en un sidebar u otra estructura o div de mayor rango, lo óptimo es definir el margin en la estructura que la contenga y no así en cada fila o Row.

Por ejemplo:

#sidebar42 {margin: 15px 0 15px 0 }

#sidebar42 .box42 .content .buttons .row { text-align: center; display:block; overflow:hidden;}



Se puede observar que ya no es necesario definir el margin en cada uno de los rows, este lo adquiere automáticamente de la clase superior.

Flotar 3 Botones en una fila

Para poner 3 botones ordenados en una fila, es necesario definir en el HTML primero el botón que estará a la izquierda, luego el que estará a la derecha y finalmente el botón que estará al medio. Estos con sus respectivos id's o con sus respectivas clases. Por ejemplo:


<a class="l">Ratings </a>
<a class="r">Reviews </a>
<a class="">Associations </a>



A continuación en el CSS solamente es necesario darle las siguientes propiedades:

.l {float:left;}
.r {float:right;}

El botón del medio ("Associations") se acomoda automáticamente.

* En caso de que los botones contengan imágenes. Para que se vean completas. Es necesario agregar en el CSS de la etiqueta a en la que se define las las imágenes:

margin: 0 auto;

de esta manera las imágenes de cada botón de la fila se verán completas.