jueves, 9 de junio de 2011

Aprendiendo a diseñar con DIV y CSS Parte 1: Flotar y limpiar


Mientras que en el pasado se diseñaba todo mediante tablas, hoy el soporte para el diseño con DIV permite creaciones extraodinariamente complejas y estructuradas, sin los problemas de las tablas en los espacios vacíos que se solventaban con trucos -como imágenes transparentes-.

Sin embargo los DIV tienen sus propio problemas con los porcentajes, con la flotación que desborda el contenedor y con los cambios de tamaño que sufre un DIV al aplicarle la propiedad CSS padding, aún así son más fáciles de controlar y modificar, algo que con tablas es una tarea bastante difícil.

Flotar o no flotar
En el diseño CSS, todo se trata de elementos flotando en contenedores para formar hileras de DIV.

Todos estos problemas los resolveremos, de momento veremos las claves del diseño con DIV mediante float (position lo veremos luego).

El diseño mediante flotación requiere de tres propiedades CSS y condiciones de funcionamiento.

Puntualizaciones CSS
  1. Float o flotar: Los elementos se flotan para que ocupen una posición dentro de un contenedor.
  2. Todos los elementos que esten dentro del contenedor deberán contener float.
  3. Solamente se puede flotar a la derecha o la izquierda.
  4. Clear o limpiar: Se requieren limpiar la flotación para establecer el límite de flotación izquierdo y derecho.
  5. Width o ancho: Se requiere que el contenedor y todos los elementos flotados funcionen con un ancho definido. Es cierto que todos los elementos podrían manejarse por porcentajes, pero tienen grandes defectos con los nuevos navegadores y el zoom o los problemas del calculo de tamaño con padding, siempre deberá existir al menos un contenedor con un tamaño en pixeles.
Puntualizaciones  Conceptuales
  1. El diseño con div es modular, esto es; una pagina se compone de diferentes div contenedores que contienen o no, elementos flotados o dispuesto de forma vertical.
  2. El div que contiene otros div flotados requiere otro div que evite que se contraiga el contenedor.
  3. El alto y los porcentajes no funcionaran sin un referente con una medida absoluta, valores como 100% no tienen sentido, pues el alto nunca tienen un tamaño fijo a diferencia del ancho que en último caso será el tamaño del ancho del de la ventana del navegador, se establece un alto en una medida como pixeles digamos el contenedor mide 500px y todo los div dentro podrán usar porcentajes, aunque diseñar un height absoluto tiene muchos inconvenientes.
  4. Todos los elementos necesitan del uso de clases o ID.
Vamos hacer un ejercicio bastante simple flotando 3 DIV dentro de un tercero, usaremos únicamente ID con una única instrucción CSS.

Este es nuestra estructura de DIV.
<div>
   <div>Contenido 1</div>
   <div>Contenido 2</div>
   <div>Contenido 3</div>
</div>
Siles agregamos un solo ID al contenedor que llamaremos "contenedor-mains":
<div id="contenedor-mains">
           <div>Contenido 1</div>
           <div>Contenido 2</div>
           <div>Contenido 3</div>
</div>
En CSS usamos el siguiente código (Los ID van precedidos de "#" y los Class de "." sin embargo cuando se agregan a las etiquetas id="" y class="" no se pone ni #, ni "."):
#contenedor-mains
{
background:#000;
width:450px;
}
#contenedor-mains div
{
border:2px solid #FF0100;
background:#fff;
width:120px;
margin:10px;
}
  1. Esto significa que el #contenedor-mains tendrá un ancho de 450px, con un fondo de negro.
  2. En la segunda instrucción que en relidad es una condición de la primera al #contenedor-mains le agregamos div, que significa que todo div dentro el objeto con un ID #contenedor-mains tendrán un borde de 2 pixeles y un margen entre ellos de 10px y un ancho de 120px.
Así es como se verá:
Contenido 1
Contenido 2
Contenido 3
Por norma natural todo los divs se alinearán a la izquierda y no de forma horizontal
Si queremos que Todos se alinean en horizontal debemos usar la propiedad float:left

Usando el mismo código CSS:
#contenedor-mains
{
background:#000;
width:450px;
}
#contenedor-mains div
{
float:left;
border:2px solid #FF0100;
background:#fff;
width:120px;
margin:10px;
}
El resultado con la flotación incluida:
Contenido 1
Contenido 2
Contenido 3
Limpiar flotación (Técnica)
Se darán cuenta que el div principal ha desaparecido, pese a que tenemos un color asignado, esto se debe a que al flotar los elementos salen del contenedor y este por consiguiente se colapsa, la única forma conocida de solucionar esto es agregar un div vació con la propiedad clear:both, si creamos una regla de clase CSS (las clases van precedidas por un punto "."):
.clear {clear:both;}
Ahora creamos un div con la clase clear asignada o sea:
<div class="clear"></div>
Con esto espero que entienda las formas de aplicar los ID y las Clases, las clases son propiedades que podremos implementar a diversos elementos, con en el caso de este div con clear, pue podemos tener muchos contenedores. Mientras que los ID solamente los asignamos a un solo elemento.

Un elemento con un ID, tambien puede tener una Clase.

El código quedaría así
<div id="contenedor-mains">
           <div>Contenido 1</div>
           <div>Contenido 2</div>
           <div>Contenido 3</div>
<div class="clear"></div></div>
Usando clases sobre div
Sin embargo la regla #contenedor-mains div afectaría a <div class="clear"></div>, porque no discrimina entre un DIV y otro contenido en #contenedor-mains. Así que tendremos que sustituirla por una clase que aplicaremos a los div que queramos.

A esta clase la llamaremos por ejemplo .flotado, que sustituye donde antes era #contenedor-mains div quedando como:
#contenedor-mains
{
background:#000;
width:450px;
}
.flotados
{
border:2px solid #FF0100;
background:#fff;
width:120px;
margin:10px;
float:left;
}
.clear
{
clear:both;
}
En el html asignamos la clase class="flotados" a los div que queremos flotar exceptuando al contenedor y el div de clase clear quedando como:
<div id="contenedor-mains">
           <div class="flotados">Contenido 1</div>
           <div class="flotados">Contenido 2</div>
           <div class="flotados">Contenido 3</div>
<div class="clear"></div>
</div>
El resultado:
Contenido 1
Contenido 1
Contenido 1
Contenido 1
Contenido 1
Contenido 2
Contenido 2
Contenido 2
Contenido 3
Contenido 3
Contenido 3
Contenido 3

Conclusiones
Como pueden apreciar este es el principio básico del diseño mediante etiquetas DIV

Si en vez de la clase ".flotados" ponen tres reglas de ID  #flotado-1, #flotato-2 y #flotado-3 podrán asignar diferentes anchos, es algo que veremos después.

También debemos considerar que muchas veces es más fácil que flotar tres elementos a la izquierda, flotar el de la derecha a la derecha con float:right, si fuesen cuatro es recomendable flotar dos a la izquierda y dos a la derecha, algo que hace más sencillo el trabajo a la larga.

Es necesario aprender las ventajas de margin-left, margin-right, padding-left y padding-right que veremos luego.

Recomendaciones
Para novatos en CSS por favor ver el siguiente tutorial:
Sigue en:

Comentarios y Consultas

Los mensajes son moderados serán revisados antes de publicarse.

Este no es un foro de adolescentes, no uses letras en vez de palabras completas como "q" en vez de "que", ni escribas tus mensajes en mayúsculas, se respetuoso con los demás, si no estás de acuerdo no comentes.

Una cosa es que no te guste una crítica, otra que uses un lenguaje inapropiado para demostrarlo. No me siento en la obligación de publicar ningún mensaje en específico o de leerlo entero si usas palabras altisonantes.

21 comentarios:

  1. gracias amigo muy bastante util me ha sera esto basico para empesar a tratar mas css !.

    ResponderEliminar
  2. No, no se entiende nada.

    ResponderEliminar
  3. Necesitas de aprender lo básico de CSS "como crear reglas", de otra manera no puedes aprender a diseñar con CSS y DIVs, pronto haré un tutorial más general para que los más noveles puedan aprender esto.

    ResponderEliminar
  4. Ufff....como había parido para entender sto....
    Excelente explicacion....Ya agarré luz!!!..
    ;-)

    ResponderEliminar
  5. Estupenda explicación y ejemplos.
    No obstante y, a pesar de ser principiante en CSS, echo en falta el aporte de una solución mucho más elegante y correcta a nivel semántico para el tema de los float.
    Esto es, añadiendo al div contenedor la propiedad overflow: hidden se consigue el mismo resultado sin necesidad de añadir al código html el div class="clear" que no aporta nada a nivel semántico al documento y, por tanto debemos rechazarlo salvo que no haya otra solución.

    Así pues, con este código:
    div id="contenedor"
    \ Contenido 1 \
    \ Contenido 2 \
    \ Contenido 3 \
    \

    Y estas reglas:

    #contenedor {
    background: #000;
    width: 450px;
    overflow: hidden;
    }
    #contenedor div {
    float: left;
    border: 2px solid #FF0100;
    background: #FFF;
    width: 120px;
    margin: 10px;
    }

    Se consigue el mismo resultado de una manera, a mi modo de ver, más elegante y concisa.

    Gracias.

    ResponderEliminar
    Respuestas
    1. Pero recuerda que esto lo hago porque si se agrega reglas para derecha e izquierda como flotados-izq y flotados-der se pueden asignar de esta manera.

      Eliminar
  6. Lo siento pero, en el comentario anterior no me ha escapado correctamente los caracteres especiales. Ruego al autor los corrija si lo considera de interés.

    ResponderEliminar
  7. Excelente inicio de tutorial, me intereso mucho por tu claridad al explicar. Abrazo fuerte.

    ResponderEliminar
  8. Muy bueno el tutorial recién estoy aprendiendo a utilizar los divs

    ResponderEliminar
  9. Respuestas
    1. Si quieres aprender CSS y HTML en este artículo desde luego que no, hay que poner de tu parte para aprender, no solo hacer el tonto.

      Eliminar
    2. Si sabes tanto no entiendo que haces mirando este tipo de artículos. Enhorabuena y gracias por intentar explicar tus conocimientos.

      Eliminar
  10. Esta publicacion es excelente !!! muchas gracias por compartir tus conocimientos.

    ResponderEliminar
  11. Hoy 11 de marzo de 2014, por pura casualidad encontré esta tu página y por fin entendí esto de los floats y demás chunches medio confusos a pesar de haber leido mucho sobre los divs y sus alrededores. Ciertamente la solución que ofrece Sergio, desde el ya lejano año 2011 es más elegante, sin embargo tu explicación permite que los más obtusos, como un servidor, entendamos con mayor claridad, o finalmente, esto de la flotación de los divs y por ende podamos entender el uso del overflow. Al menos a mi me pasó así, con tu explicación entendí como es esto del overflow. Gracias por compartir de manera tan clara tus conocimientos. Salvador

    ResponderEliminar
  12. Totalmente de acuerdo con el comentario de arriba. Gracias por enseñarnos a los novatos.

    ResponderEliminar
  13. Muchas gracias, buena explicación. solo 1 duda, al final al aplicar el codigo no se me repiten tantas veces hacia abajo el contenido 1, el 2 y el 3. solo aparecen 3 cajas con el fondo negro.
    y lo otro: dentro de los < div class = "flotados">Contenido 3 < / div > puedo reemplazar en este caso el "contenido 3" codigo html?, gracias nuevamente.

    ResponderEliminar
    Respuestas
    1. En flotados existe la instrucción background:#fff; que es la que da el color blanco si existe alguna instrucción previa eso puede interferir.

      Dentro de cada div puedes agregar lo que quieras, no solo texto.

      Eliminar

Samurai Jack (2017), episodio 7

Samurai Jack (2017)Ashi enfrenta a su madre, Jack a su yo interior lleno de ira.

[Leer artículo...]

Noragami entra en paro indefinido

Noragami es suspendida temporalmenteUna de las autoras no puede continuar con su trabajo al frente del manga y se ha decidido meter la historia en hiatus, lo que puede significar...

[Leer artículo...]

Tales of Zestiria y su final Yuri

El final de Tales the Zestiria The XLas aventuras de Itami y sus amigos llega a su fin con el rescate de Piña de las manos de Zorzal.

[Leer artículo...]

Warau Salesman New (2017) El vendedor sonriente

Warau Salesman New (2017) EstrenosSatoru descubre al culpable de la trama, es el momento de enfrentarse y tendrá que dar todo de sí para cambiar su suerte.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.

Anexos

Bitacoras.com