martes, 10 de agosto de 2010

Dividir en columnas - Vagabundia

JMiur


Dividir en columnas







Dividir en columnas el pie de página de cada entrada no difiere demasiado de dividir el footer del blog en columnas y hay muchos modos distintos de conseguirlo sin enfermarse en el intento.

La clave es encontrar cuál es el DIV contenedor de todo eso y la mala costumbre de darle diferentes nombres en plantillas adaptadas de otros sistemas puede hacer de esto una tarea complicada para quien comienza. Así, en general, se encuentra dentro de:
<b:includable id='post' var='post'>
y por defecto, tiene este codigo:
<div class='post-footer'>
  .......
</div>
 
Dentro de esto es probable que se vean otros sectores, que se mostrarán uno debajo del otro, diferentes cosas según sea nuestra configuración: nombre del autor, fecha de publicación, íconos para compartir, reacciones, etiquetas, etc.

Todo lo que allí está es opcional; pueden eliminarse cosas o agregarse otras sin restricciones y lo mejor, para probar, es agregarle otro footer y ver qué pasa y si eso que intentamos, realmente nos convence. En todo caso, luego, podemos mover el contenido a su nueva ubicación. Esa debería ser una regla básica: siempre, dentro de lo posible, lo mejor es no borrar nada hasta estar seguros.

Entonces, vamos a agregarle otro footer al que identificaremos con una clase CSS para poder darle las propiedades gráficas que nos gusten; en este caso, lo llamaré footerdemo pero, puede ser cualquier cosa.

Las propiedades las colocaremos siempre antes de </b:skin> y el HTML, justo antes del último </div> de ese includable:
... aquí el footer nuevo ...
  </div>
</b:includable>

.footerdemo {background-color: #000; clear: both; float: left; margin: 20px 0; width: 100%;}
.footerdivs {padding: 10px;}

<div class="footerdemo">
  <div class="footerdivs">
    ....... aquí irá el contenido .......
  </div>
</div>
<div style="clear:both;"></div>
 

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Con esto no veré nada del otro mundo, sólo un rectángulo con la clase footerdemo he agregado otro con la clase footerdivs para evitar problemas y en ese agregué alguna clase de contenido.

Ahora, dividiré ese rectángulo en dos partes iguales, es decir, el ancho total (100%) lo distribuyo, un 50% para la izquierda y otro 50% para la derecha; eso, debo decírselo al navegador así que agrego otras dos divs con dos clases nuevas:
 
.fdizquierda {float: left; width: 50%;}
.fdderecha {float: right; width: 50%;}

<div class="footerdemo">
  <div class="fdizquierda">
    <div class="footerdivs">
      ....... aquí irá el contenido de la izquierda .......
    </div>
  </div>
  <div class="fdderecha">
    <div class="footerdivs">
      ....... aquí irá el contenido de la derecha .......
    </div>
  </div>
</div>
<div style="clear:both;"></div>

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Mientras mantenga mi aritmética aceitada, podría usar cualquier otra distribución 75% + 25% = 100%:


Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Uno a la derecha y otro a la izquierda es fácil porque para eso está float. Ahora, le agregaremos un tercero; los dos extremos son iguales (100% / 3 es más o menos 33%) ¿y el central? a ese, no lo dimensiono en absoluto y le digo al navegador que se las arregle o hago lo mismo, coloco el ancho y lo centro con la propiedad margin:
.fdizquierda {float: left; width: 33%;}
.fdderecha {float: right; width:33%;}
.fdcentro {margin: 0 auto; width: 33%;}

<div class="footerdemo">
  <div class="fdizquierda">
    <div class="footerdivs">
      ....... aquí irá el contenido de la izquierda .......
    </div>
  </div>
  <div class="fdderecha">
    <div class="footerdivs">
      ....... aquí irá el contenido de la derecha .......
    </div>
  </div>
  <div class="fdcentro">
      ....... aquí irá el contenido del centro .......
    </div>
  </div>
</div>
<div style="clear:both;"></div>

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.

Y lo haré, en ese orden, colocando el centro al final en el código HTML.

¿Quiero dividirlo en cuatro? También es posible, claro que, quedarán pequeños pero, el criterio es el mismo (100% / 4 =25%):
.fdizquierda1 {float: left; width: 25%;}
.fdizquierda2 {float: left; width: 25%;}
.fdderecha1 {float:right; width: 25%;}
.fdderecha2 {float: left; width: 25%;}

<div class="footerdemo">
  <div class="fdizquierda1">
    <div class="footerdivs">
      ....... aquí irá el contenido de la izquierda .......
    </div>
  </div>
  <div class="fdizquierda2">
    <div class="footerdivs">
      ....... aquí irá el contenido de la izquierda .......
    </div>
  </div>
  <div class="fdderecha1">
    <div class="footerdivs">
      ....... aquí irá el contenido de la derecha .......
    </div>
  </div>
  <div class="fdderecha2">
    <div class="footerdivs">
      ....... aquí irá el contenido de la derecha .......
    </div>
  </div>
</div>
<div style="clear:both;"></div>

Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.
Vestibulum ultrices auctor odio, in gravida ligula auctor id. Quisque tempor, enim eget interdum tristique, quam erat aliquet neque, sed rutrum tortor tortor eget est.














Fuentes - Fonts
SOUV2BalaramScaGoudyFOLIO 4.2Biblica Font




free counters

Disculpen las Molestias



INFORMÁTICA - UTILIDADES




Publicado por en
Etiquetas:

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)

Correo Vaishnava

Mi foto
Correo Devocional