Capas flotantes
2010-03-11 | En: Computadoras | La entrada anterior es Razón de Vivir | La entrada siguiente es Nueva imagen
Por muchas razones, algunas cosas de este blog habían quedado sin atender. Pero no más. Ahora corrijo algunos de estos problemas.
Por ejemplo, el pie de página donde aparece el enlace a Movable Type y la licencia Creative Commons.
Como quiero que salgan a cada lado en la misma línea, agrego la propiedad float a las etiquetas DIV que las contiene.
El código que hace la magia es este:
<div id="footer">
<div id="footer-inner">
<div id="footer-content">
<div class="widget-powered widget" >
<div class="widget-content" style="float:left;">
Powered by <a href="http://www.movabletype.org/sitees/"><mt:productName /></a>
</div>
<mt:blogIfCCLicense>
<div class="widget-content" style="float:right;">
Este blog tiene una <a href="<mt:blogCCLicenseURL />">Licencia Creative Commons</a>.
</div>
</div>
</mt:blogIfCCLicense>
</div>
</div>
</div>
La propiedad float puede aplicarse a casi cualquier elemento html, pero en la práctica, se usa mas frecuentemente para imagenes flotantes que puedan rodear el texto. Mientras que la propiedad float es invaluable para esta aplicación particular, tiene mucho potencial. En este ejemplo, la capa <div class=”widget-content” style=”float:left;”>está flotando, permitiendo a la capa que sigue alinearse igualmente. Ajustando los márgenes superiores de ambos elementos es posible que ambos elementos compartan la misma línea cada capa ocupando un extremo.