Solución al problema de float en maquetación CSS.

Cuando una capa tiene un float la capa contenedor sobre la que está situada muchas veces no acompaña. Lo solucionamos con el atributo CSS overflow:hidden y definiendo un width al contenedor.
27/3/09 – Si estamos maquetando con CSS nuestras páginas web, algo que deberíamos estar haciendo ya desde hace tiempo, podremos haber observado un problema que a veces tiene la maquetación cuando utilizamos float para alinear capas a la izquierda o la derecha. En este artículo vamos a tratar de explicar el problema, cuándo se produce y dar una sencilla solución.

Esta solución que publicamos en el Taller de CSS de DesarrolloWeb.com está ampliamente divulgada y aceptada por diversos desarrolladores.

El problema del float y el crecimiento de las capas contenedor

Imaginemos que tenemos un contenedor en una capa DIV que tiene sus características, como un color de fondo, un borde o lo que queramos poner. Ahora imaginemos que en ese contenedor colocamos dentro un par de capas DIV y que estas están flotando a la izquierda y derecha, con el atributo float: left y float: right.

Esta configuración de capas, que es bastante habitual, podría ser utilizada para por ejemplo crear una estructura de dos columnas en la página web. Para aclararnos, llamaremos contenedor a la capa que incluye a las otras capas con el float, que llamaremos capas flotantes.

En las capas flotantes supuestamente colocaremos diversos contenidos, como texto, imágenes o lo que deseemos. Por tanto, las capas flotantes crecerán hacia abajo el espacio suficiente para albergar a todos los contenidos que coloquemos. Lo ideal es que el contenedor acompañase el crecimiento de las capas flotantes, haciéndose tan alto como sea necesario para alojar las dos capas flotantes. Pero realmente no siempre ocurre esto y muchas veces habremos observado cómo el contenedor se queda con un tamaño mínimo, arriba del todo, y no crece lo suficiente para que las capas flotantes quepan en él.

Quizás este problema ya lo hayamos experimentado y entonces podremos entenderlo. En cualquier caso, lo mejor es mirar una imagen para que quede claro el efecto poco deseable que a menudo nos encontraremos:

Esto es lo que ocurriría con un código como este:

<style type=”text/css”>
#contenedor{
   border: 1px solid #bbb;
   background: #ddd;
   padding: 10px;
}
#flotanteizquierda{
   float: left;
   background: #fc3;
   width: 200px;
   padding: 10px;
}
#flotantederecha{
   float: right;
   background: #3cf;
   width: 200px;
   padding: 10px;
}
</style>

<div id=”contenedor”>
   <div id=”flotanteizquierda”>
      Esta capa tiene un float, para alinearse a la izquierda. El problema es que el contenedor de la misma no se entera que esta capa crece mucho hacia abajo y parece como si terminase en seguida.
   </div>
   <div id=”flotantederecha”>
      Aquí también tenemos float, para alinearse a la derecha. Pero el contenedor donde está colocada no se entera que la capa crece hacia abajo.
   </div>
</div>

Solución con overflow:hidden y definiendo un width

Lo que sería deseable es que el contenedor se haga suficientemente grande para albergar todo el contenido que se ponga dentro, independientemente de que las capas que coloquemos dentro tengan el atributo float. Se puede ver en la siguiente imagen

Esto en realidad se consigue con una combinación de dos atributos que debemos colocar en los estilos CSS de la capa contenedor.

Por un lado tenemos atributo CSS llamado overflow, que ya explicamos en el artículo Overflow en CSS. Simplemente tenemos que asignar el valor hidden al atributo overflow. Esto funciona correctamente en navegadores como Firefox, Opera o Chrome (en general en todos los navegadores menos Explorer, al menos en versiones actuales).

Para conseguir que Explorer también expanda el contenedor hasta la medida suficiente como para albergar el contenido flotante, tenemos que colocar un atributo width, con un valor cualquiera.

Por ejemplo, el contenedor se vería correctamente con este código CSS:

#contenedor{
   overflow: hidden;
   width: 450px;
   border: 1px solid #bbb;
   background: #ddd;
   padding: 10px;
}

El atributo width puede tener cualquier valor, por lo que no tenemos por qué asignarle un valor fijo. Por ejemplo, también funcionaría con un width: 100%;

Para acabar, dejo el enlace a un ejemplo donde se puede ver el problema de maquetación CSS con float y la solución combinando el overflow: hidden y el width. Ver el ejemplo en una página aparte.

Search Status, herramientas SEO en Firefox.

Comentamos un complemento para Firefox que ofrece diversas herramientas SEO aplicadas sobre las páginas que visitamos y algunos visores de rankings. Muy interesante para observar y mejorar tu posicionamiento.
31/3/09 – Ya conocemos complementos de Firefox para decenas de utilidades y áreas de interés relacionadas con los desarrolladores de páginas web. En el Manual de los mejores complementos para desarrolladores venimos comentando diversas utilidades que no pueden faltar en nuestro navegador, si es que nos dedicamos a crear páginas web. Pero aun no habíamos comentado en DesarrolloWeb.com ninguna herramienta útil para SEO (Search Engine Optimization), con lo que aquí va nuestra aportación para divulgar una de las extensiones para Firefox más interesantes si queremos revisar de cerca las características de nuestra web que afectan a su posicionamiento en buscadores y diferentes rankings.

SearchStatus es una herramienta que se instala en Firefox y que permite acceder a diversos datos interesantes. Quizás lo que más llama la atención es que dispone de varios indicadores para acceder visualmente a los ranking más conocidos que valoran las páginas web, como el Google PageRank o el ranking de Alexa, Compete o mozRank. Con estos indicadores puedes obtener una herramienta todos-los-ranking-en-uno, que de una vez te alerta de los distintos ranking sin tener que descargarte diversas barras para el navegador.

El estado de los visores de ranking aparece en la barra de estado del navegador y tiene un aspecto como el que podemos ver en la siguiente imagen:

En el punto marcado como 1) podemos ver los distintos indicadores de ranking, que podemos configurar cuales queremos que aparezcan desde las opciones de la extensión. En principio sólo muestra el PageRank y el Alexa Ranking, pero podemos obtener nuevos indicadores desde la opción de Search Status “Enable / el ranking que queremos visualizar”.

Por cierto, que las opciones de Search Status se pueden acceder también desde la barra de estado en el icono marcado como 2) en la anterior imagen. Desde estas opciones además se puede acceder a una completa lista de herramientas para SEO.

Herramientas SEO disponibles en SearchStatus

El menú de opciones de Search Status se accede haciendo clic con el botón derecho sobre el icono de la extensión en la barra de estado de Firefox. Accederemos a una lista de opciones como esta:

Encontraremos allí acceso a los menús de configuración del complemento y a una serie de herramientas SEO, entre las que destacan:

• Destacado de links nofollow, con el que podemos ver en nuestras páginas y las de nuestros competidores los enlaces externos que tienen el atributo nofollow para que no cuenten de cara a buscadores.
• Reporte de Links, para saber los link que tenemos en una página, los internos, externos, etc.
• Meta Tags, con un visor rápido de la información colocada en los META que afectan a buscadores.
• Robots.txt mantiene un link para visualizar el archivo robots.txt del sitio web donde estás.
• Mostrar Sitemap.xml, que permite ver el sitemap de un sitio web.
• Densidad de palabras clave (Keyword density), que permite, dada una palabra, saber cuál es su densidad como palabra clave.
• Resaltado de palabra, para ver visualmente en qué partes del contenido se usa una determinada palabra.

Aparte de estas herramientas integradas en la propia extensión, nos ofrece además un par de items interesantes que nos dan información de una página directamente consultando en buscadores:

• Show Indexed Pages: muestra las páginas que un buscador tiene indexadas con respecto a un sitio web. Lo que está muy bien para saber la profundidad de un sitio y su grado de indexación en los principales motores de búsqueda.
• Show Backguard Links: varias opciones para conocer los links que tienen otras páginas hacia la nuestra en diversos motores de búsqueda, tanto hacia una página interior como a una que pertenezca a todo el dominio.

En general, como se puede ver, SearchStatus es una herramienta muy interesante, que seguro que te ofrecerá informaciones útiles que te pueden ayuda a mejorar la promoción de tu página en buscadores.

http://www.desarrolloweb.com/articulos/searchstatus-seo-firefox.html