Flotar elementos de html es una de los métodos más importantes de un maquetador, ya que tenemos que tener en cuenta las incompatibilidades con Internet Explorer versiones antiguas que nos ocasionan problemas muy a menudo.
Hablemos primero del estilo css
overflow que agregaremos a una division que es un elemento padre, referenciando a nuestras cajas que flotaremos en el contenido.<div class="principal_3">
<div class="div_3">
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div class="div_3">
2. Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iruret.</div>
<div class="div_3">
3.
Exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
</div>
</div>
.principal_3{
padding: 10px;
overflow: hidden;
background: #ee6b4d;
zoom: 1
}
.div_3{
background: #424a57;
float: left; width: 30%;
}
Lo que estamos haciendo es como ya dijimos, nombrar a
overflow como hidden, ya que sin este nuestra caja padre no se desplazaría en alto con sus hijos, también vemos que tenemos a zoom que nos ayudara a tener compatibilidad con Internet Explorer. De esta forma quedarían nuestros contenidos de divisiones.
1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2. Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iruret.
3.
Exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Limpiar float
Ahora mencionaremos otro metodo que podemos implementar; y es, escribir un elemento
div al final de nuestras cajas flotadas con el estilo css clear. Esto metodo se conoce como limpieza de float.<div class="principal_3">
<div class="div_3">1 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div class="div_3">2 Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
<div class="div_3">3
Exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div style="clear: both;"></div>
</div>
Los estilos quedarían de la siguiente manera,
.principal_3{
padding: 10px;
background: #ee6b4d;
}
.div_3{
background: #424a57;
float:left;
width: 30%;
}
Observamos en los estilos que solo flotamos los div_3 y nos dimos el lujo de no declarar ningún otro valor, usted puede probar con IE y ver la compatibilidad en sus versiones anteriores como la 6, que es la ultima que yo tengo acceso.
Flotar elemetos html con Display en css
Pareciera que solo hay una manera de hacer esto, yo solo conocía la que enseguida explicare y es utilizar display,
display : inline-block;
lo único que hacemos es alinear en bloque las divs que pretendemos organizar. Ahora del ejemplo anterior, borre la div que tiene como estilo clear:both, y despues remplace el estilos float por display, y vera que pasa. Usted notara que los bloques quedan uno más alto que otro, para poder resolverlos podemos hacer lo siguiente:
vertical-align:top;
Esta atributo css top nos permite alinear sobre la parte superior, tomando como referencia la mas alta de los elementos. Para ser menos engorrosos esto los estilos quedaria asi,
.principal_3{
padding: 10px;
background: #ee6b4d;
}
.div_3{
padding:10px;
margin:10px;
border: solid 1px white;
background: #424a57;
display: inline-block;
width: 30%;
display: -moz-inline-pila; /*compatibilidad con Mozila en una versiones*/
vertical-align: top;
* Display: inline; /*Compatibilidad Con IE versiones anteriores a la 8*/
zoom: 1; /*Compatibilidad Con IE versiones anteriores a la 8*/
}
Estamos viendo que para tener compatibilidad con el malo de la pelicula Internet Explorer usamos
* display: inline y zoom:1, pero, a pesar de un buen funcionamiento nos hemos guardado el secreto de que "zoom" no se un estandar de css, y ahora de validar esta no puede crear errores, que de todos modos aun desarrollador web, a veces le llega a importar un poco. Si quisiéramos solucionar un poco esto, solo vastaria poner un operador condicional, que se active cuando la pagina sea cargada en un navegador de tales caracteristicas.<!--[if IE]>
<style>
.div_3{
zoom: 1;
}
</style>
<![endif]-->
Flotar contenidos con clear en css
Escribimos más arriba en "limpiar float" de como podemos incorporar el estilos clear en una etiqueta div y asi evitar algunos errores. El incoveniente de crear un elemento
div vacio es que en temas semantica no puede estar permitido y sea no muy estetico para nuestra maquetacion. En temas de posicionamientos, esto puede llegar hacer importante, que de todos modos, una web con buenos contenidos y en algunos casos, con buen entretenimiento esto no importara. Para no tener que crear espectativas del azar, de como funciona los algoritmos de Google y salir con bajas calificaciones, podemos resolver este problema con un selector css after, que nos permite insertar contenido despues del ultima etiqueta, que en este caso son las div con clase .div_3, los estilos quedarian de la siguiente manera:.div_3 {
border: 3px solid white;
/*border-bottom: 3px solid white;*/
float: left;
margin: 5px;
padding: 5px;;
width: 30%;
color:black;
background: #1abc9c;
}
.principal_3{
background: #424a57;
}
.principal_3:after {
content: ".";
display: block;
height: 0;
clear: both;
background: yellow;
padding: 1px;
}
/* Compatibilidad (after) para IE6 */
* html .principal_3 {
height: 1%;
}
/* Compatibilidad (after) para IE7 */
*:first-child+html .principal_3 {
min-height: 1px;
}
Aqui
content y clear hacen todo el trabajo para tener una buena flotacion, en los comentarios escribimos las formas para que after pueda tener comparibilidad, y utilizamos display:block, para que se comporte como una linea totalmente independiente.Flotar cajas con overflow y height
Para terminar esta exposición uno de lo métodos por mencionar es la utilización de height; en la pagina de libros web se menciona. Como ya sabemos el inconveniente de
zoom es que no es un estandar de css, asi que podemos utilizar height de la siguiente manera: .principal_3{
border: thick solid #1a1a1a;
overflow: hidden;
background: #424a57;
_height: 1%;
}
.div_3 {
border: 3px solid white;
float: left;
margin: 5px;
padding: 5px;;
width: 30%;
color:black;
background: #1abc9c;
}
Lo única diferencia de las demás que ya hemos estudiado, es que utilizamos height, para poder simular lo que hace zoom, con el guion abajo que permite tener compatibilidad con IE6. Para mi esta idea no es muy convincente, al final cada quien tendrá su anécdota que contar y se llevara bien con la que más le funcione.
No hay comentarios:
Publicar un comentario