miércoles, 11 de agosto de 2010

Resolver el problema de dividir en columnas en IE7

JMiur

[E]

Cuando dividimos un rectángulo en columnas usando procentajes pueden surgir problemas, sobre todo, en versiones de Internet Explorer inferiores a la 8 así que para responder a ese dilema trataremos de encontrar explicaciones y alguna forma de resolverlos.
Veamos otra vez el esquema mostrado en la entrada anterior:

.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>

Esto, que deberíamos ver así:

en IE7 lo veremos así:

Todo es un tema de aritmética. La pantalla se mide en pixeles y los pixeles son indivisibles así que si el ancho del rectángulo no es un número divisible con exatitud, habrá un resto con el que deberemos lidiar.

Si dividimos por 3 y usamos 33% para cada uno, hay un 1% que sobra así que es difícil que haya problemas pero, si dividimos por dos, por cuatro o por algún otro número ... las matemáticas nos podrían jugar una mala pasada.

Por ejmplo, en este caso, el ancho total (el 100%) es de 635 pixeles así que si lo divido en cuatro, cada recángulo interior (el 25%) tendría que tener 158.75 pixeles cosa que es imposible ya que no existen fracciones de pixeles y el navegador redondea ese valor; me dirá que cada rectágulo interno tiene 159 pixeles y eso, hará que en IE7 no veamos uno al lado del otro sino que uno de ellos, se irá para abajo ya que:

159 + 159 + 159 + 159 = 636

¡Ese maldito pixel que sobra nos arruinará el diseño y nos volverá locos!!!

Soluciones hay varias y todas son molestas. Podemos calcular el ancho real y cambiar los porcentajes por valores absolutos teniendo en cuenta que la suma de ellos no supere el total:

159 + 159 + 159 + 158 = 635

Podemos elegir uno cualquiera de esos rectángulos internos y poner 24% en lugar de 25% o incluso poner width:24.9%; dependerá de cual sea el resto

.fdderecha2 {float: left; width: 24.5%;}

Por último, también podríamos usar un comentario condicional que agregaremos antes de </head>:

<!--[if lt IE 8]>
<style> .fdderecha2 {width:24.5%;} </style>
<![endif]-->

Así que esto, debería verse bien, incluso en IE7:

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

SOUV2

SOUV2P.TTF - 57 KB
SOUV2I.TTF - 59 KB
SOUV2B.TTF - 56 KB
SOUV2T.TTF - 56 KB

Balaram

bai_____.ttf - 46 KB
babi____.ttf - 47 KB
bab_____.ttf - 45 KB
balaram_.ttf - 45 KB

ScaGoudy

SCAGRG__.TTF - 73 KB
SCAGI__.TTF - 71 KB
SCAGB__.TTF - 68 KB

FOLIO 4.2

inbenr11.ttf - 64 KB
inbeno11.ttf - 12 KB
inbeni11.ttf - 12 KB
inbenb11.ttf - 66 KB
indevr20.ttf - 53 KB

Biblica Font

Greek font: BibliaLS Normal
Greek font: BibliaLS Bold
Greek font: BibliaLS Bold Italic
Greek font: BibliaLS Italic
Hebrew font: Ezra SIL
Hebrew font: Ezra SIL SR

Disculpen las Molestias

INFORMÁTICA - UTILIDADES

2011

enero 2011 (25 posts)

2010

diciembre

octubre

septiembre

julio

junio

Eliminar virus autorun y restore [Resuelto]

mayo

abril

marzo

febrero

enero

2009

noviembre

Resolver el problema de dividir en columnas en IE7

JMiur

Cuando dividimos un rectángulo en columnas usando procentajes pueden surgir problemas, sobre todo, en versiones de Internet Explorer inferiores a la 8 así que para responder a ese dilema trataremos de encontrar explicaciones y alguna forma de resolverlos.

Veamos otra vez el esquema mostrado en la entrada anterior:

.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>

Esto, que deberíamos ver así:

en IE7 lo veremos así:

.fdderecha2 {float: left; width: 24.5%;}

Por último, también podríamos usar un comentario condicional que agregaremos antes de </head>:

<!--[if lt IE 8]>
  <style> .fdderecha2 {width:24.5%;} </style>
<![endif]-->

Así que esto, debería verse bien, incluso en IE7:

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.

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.

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.

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.

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.