Aprendiendo a estructurar paginas con DIVs – Tutorial HTML

Bueno seguimos avanzando con la penultima leccion del curso, Manos a la obra :)

Bueno ya vimos en la leccion anterior un ejemplo de como los divs sirven para encapsular elementos en forma de cajas y tambien vimos un repaso de los elementos mas utilizados a la hora de crear una pagina web.

Ahora lo que haremos sera incluir un ejemplo de una web con dos columnas a modo de ejemplo y luego veremos porque se forma en dos columnas, la explicacion a esto es uno de los temas que mas dolores de cabeza da al principio a quienes quieren maquetar “sin tabla”, la explicacion de como funcionan las propiedades float:right/left y clear:both;

Una introduccion basica al float

Como hemos visto en todos los ejemplos generalmente los elementos de html se colocan uno abajo del otro, es decir, si uno coloca una imagen y luego un texto en un documento HTML, el resultado que obtendra es una imagen y abajo de la misma el texto. Este efecto pasa con la mayoria de los elementos en HTML.

La explicacion de porque sucede esto es que cada elemento viene con una configuracion predeterminada, y los elementos que se ubican uno debajo del otro tienen seteado por defecto la propiedad float como none.

Esto hace que los elementos se comporten de esa manera, ahora la pregunta seria ¿como hacer para que se compoten de otra forma?

La propiedad float nos permite ubicar elementos a la derecha o izquierda en vez de colocarse siempre abajo del anterior, por ejemplo para ubicarlo a la derecha, se logra seteando con float: right desde el css al elemento. Y que se coloque a la izquiera es con float: left… Aunque parezcan sencillas las cosas asi como se dicen a la hora de diseñar hay varios problemas que se presentan con este modelo, pero todo tiene solucion. La mejor forma de aprender es con experiencia diseñando una y otra vez y cuando sale un problema arreglarselas de alguna forma para solucionarlo!

Por ello veremos como hacer una web cuya forma sea de un encabezado con un menu como columna izquierda y algun contenido como columna derecha, aqui el codigo, como siempre y esta vez mas que nunca, prueben agregar cosas, quitar propiedades a ver que sucede, agregar nuevas y experimentar:

Nuevamente se aclara que en este ejemplo no se busca un diseño bello y atrativo, sino que solo las ubicaciones de los elementos, tambien aprovecho para avisar que en la proxima leccion crearemos esta pagina con todas su secciones completas y con un diseño un poco mas interesante que este. Pero antes que eso todavia faltan aprender otras cosillas.

Propiedades ID y CLASS

En el ejemplo anterior aparecieron dos elementos nuevos dentro de algunos tags (las propiedades id y class) como por ejemplo en

En el ejemplo de arriba lo que hace el identificador ID es proporcionarnos un metodo para instanciar un div en este caso el encabezado. ¿Para que sirve exactamente? bueno sirve para poder aplicarles propiedades css al elemento que se especifica, tambien es util cuando se trabaja por ejemplo con javascript pero eso es algo que aqui no lo veremos.

¿Como se instancia ese elemento desde el CSS? para instanciar el encabezado por ejemplo desde el CSS lo que hacemos el colocar # (numeral) + nombre del identificador, en nuestro ejemplo seria #encabezado{ aqui las propiedades del CSS que valen para el elemento con id = “Encabezado” }

Un ejemplo practico:

Como veran, el parrafo que contiene el ID=”rojo” se pone de color rojo porque se lo indicamos desde el CSS. Tambien podemos aclarar que elemento es es decir no solo colocar el #rojo sino que se puede colocar p#rojo lo que identifica mejor el elemento y nos permite saber mirando el codigo css que ese elemento es para un parrafo.

Los elementos ID deben ser unicos en la pagina, es decir, no puede haber dos elementos con el mismo ID en un mismo documento HTML. Si lo que deseamos es crear varios elementos que tengan un estilo de css en comun, el identificador necesariamente tiene que ser un CLASS, y la forma de instanciar un class desde CSS es con . (punto) + nombre del elemento, como en el siguiente ejemplo seria p.impar y p.par:

Basicamente esta es la mayor utilidad de estas dos propiedades MUY IMPORTANTES para el diseño de una pagina, ya que nos permite ponerles nombres a los elementos!. La utilizacion de estas propiedades funcionan para todos los elementos de html, es decir a todos los elementos les podemos colocar la propiedad ID o Class segun corresponda para poder instanciarlos, sean estos elementos divs, p, a, span, ul, li, etc…

La propiedad Clear

Esta propiedad sirve para limpiar el display de los floats anteriores, es decir para ser mas claro uno por ejemplo puede tener el caso de una presentacion deproductos en columnas de 3, entonces lo que se puede hacer es colocar divisores con un ancho del 33% y asignarles a todos un float: left, como siempre mejor que explicar es que lo vean ustedes mismos y revisen el codigo:

A no desesperar si no entienden algo, lo que hice fue decirle por medio de CSS que todos los elementos div que se encuentran adentro de el div con id contenedor tengan ciertas propiedades, es decir para instanciar todos los divs de adentro de un elemento especifico lo que se hace es:

elemento#nombre elementos{} o elemento.nombre elementos{}

en este caso: div#contenido div{} /*nos dice las propiedades que les ponemos a TODOS los divs contenidos en div#contenido */

Por otro lado a cada elemento se asigno un ancho de 252px y les digo que tengan un float: left, lo que los ubica uno al lado del otro con un margen ademas para que se separen. Y la linea

contenido div h2{text-align: center;} nos dice que simplemente centremos los titulos de cada producto.

Bueno ademas de todo esto que dije antes quizas las personas que son muy observadoras se dieron cuenta que pusimos que el fondo de contenido sea de color #F1F5F8 y en realidad se ve de color #cccccc, PUES ESTO ES UN ERROR CLASICO QUE BUSQUE QUE SUCEDA, al colocar elementos en float y no cerrarlos con un Clear: both, entonces el div contenedor no se comportara normalmente estirandose todo lo que necesitamos, por el contrario quedara asi como lo estas viendo. La solucion es bastante sencilla, Quizas hay mejores, yo siempre he utilizado que al elemento siguiente que existe le colocamos un clear: both y el problema esta resuelto.

Si no hay elemento me invento un div de un pixel de ancho y le coloco el clear both, aunque hay otras soluciones yo siempre termine aplicando esta que no es la mas elegante de todas pero bueno.

Aqui la pagina con el problema resuelto:

Bueno ademas de para solucionar ese problema el clear both nos sirve para decirle que se termine algun float, es decir como habran visto el elemento se ubica a la izquierda siempre por lo que si uno quiere especificamente empezar de nuevo el listado no puede, otra vez un ejemplo:

Firjarse que en este ejemplo organice las notebooks por marca, y parece que todo es normal pero si se fijan cada vez que dice Notebooks es un H2 , si van al css veran que los H2 de adentro del div contenido tienen la propiedad Clear: both;, este es el momento de decir, ¿que pasa si lo saco?, pues yo les digo saquenlo y compruebenlo, de esta forma podran entender mejor para que sirve el Clear: both;

Bueno, Creo que esta leccion se hizo algo larga, por lo que la dejamos aca y como recomendacion les propongo que armen distintas estructuras webs, con los que se les ocurra y vallan viendo como solucionar los problemas, basicamente esto se aprende por el famoso metodo prueba y error, porque no vale la pena aprenderse todas las variaciones posibles, sino que a medida que se aparecen ver como resolverlas y con el tiempo uno se termina acostumbrando.

Por otra parte las propiedades float y clear estan incluidas para TODOS los elementos HTML y funcionan de igual forma que en los divs :)

Espero que nos veamos en la proxima leccion!

Siguiente Lección >>

>> Indice de Contenido <<

20 comments

  1. Pingback: Tutorial XHTML/CSS facil – Aprendé a crear paginas web | Blog de la Web

  2. jorge

    acavo dar otra pasada a esta leccion ya que me habia quedado con dudas, pero voy bien a practicar en lo que llega la siguiente leccion !!

  3. dacho

    |Author

    @jorge, lo que podes hacer mientras tanto es ver este articulo:

    http://www.blogdelaweb.com.ar/reemplazo-de-texto-por-imagenes-mediante-css/

    Que te da una herramienta basica para el diseño, y te muestra como colocarle fondo a los elementos de HTML con la propiedad background de CSS.

    Podes probar colocandole degrades y otras cosas a las distintas paginas que creaste en el tutorial o crear una pagina propia e ir jugando con todo.

    De eso se trata aprender a maquetar web, de jugar con los elementos que el HTML y el CSS nos proveen para dar un diseño creativo y profesional a las paginas.

    Si realizaste todas las lecciones ya estas preparado para intentar aprender por tu cuenta :)

  4. dacho

    |Author

    Ademas de eso si te interesa todo el mundo de la web podes mirar el tutorial de Posicionamiento al que le falta muchisimo porque lo empece hace muy poco pero tiene informacion util que seguro te servira en un futuro.

  5. dacho

    |Author

    @jorge, la diferencia entre ID y CLASS es que:

    ID: se utiliza si es un elemento unico
    CLASS: Se Utiliza cuando el elemento se puede llegar a repetir o se repite mejor dicho.

    Definido de otra forma, no debe haber dos elementos con el mismo ID en la pagina, con class no hay problema!…

    Son Reglas del HTML :)

  6. Pingback: Elementos para el armado de estructuras mas complejas / Tutorial HTML | Blog de la Web

  7. Solo puedo decir que con este tutorial que me lo he comido como si fuera uno de mis libros favoritos, es lo mejor que he visto en muuuuuuucho tiempo a modo de tutorial. No solo he recordado html que ni me acrodaba, sino que encima he aprendido todo de forma practica. Te mereces un premio por este tutorial. Me metí un batacazo en clases con Mysql, php, html y no me meti en css por lo pesado que se me hacian los tutoriales terminando aborrenciendolo, no habia nada entertenido. Sin embargo este tutorial me ha sorprendido, estoy encantado con el. De todos los tutoriales y explicaciones de profesores ( que a fin de cuentas deberían saber enseñar y no tienen ni idea van como si ya supieras todo, este tutorial me ha enseñado bastante mas que en 2meses otrs pdf, libros y profesores juntos.

  8. Tengo una dudilla y se trata del ultmo codigo, hago lo que dices del clearboth pero de alguna manera me sale el mismo error que en el antepenultimo codigo, sale azul y la ultima sección donde solo hay 2 cuadros toshiba sale en blanco.

  9. arts

    He conseguido de alguna manera subsanar lo que me salia mal poniendo simplemente un hight en el contenido, pero no me gusta mucho esa solución. Me parece un poco chapucera, como restringir las dimensiones de la pagina, claro esta que como soy tan noobie aun en esto no se si esque realmente hay que darle las dimensiones fijas o hay otra forma de hacer mas dinamica xDD.

  10. arts

    Tenía otra preguntilla, esta ya es mas general, respecto a los 3 tipos de formas que hay de poner el css hay una que es en archivos individuales solo de css para despues hacerle un link a la página en cuestión donde afectarán, pero quería saber si esque es mejor, mas optimizada, mas rapida si tiene algún inconveniente, si esta forma es mejor o no.

    Espero qcon ansias tus proximos tutoriales, me han gustado muchisimo.

  11. dmozop

    hola dacho,

    quería comentarte que me sucede lo mismo que a arts: en el ultimo código por alguna razón que aun no he encontrado el color del background asignado para la sección (#F1F5F8 un azul claro) no cubre por completo la sección. Sino que llega hasta antes de la ultima linea de cuadros (los dos cuadros de toshiba). hice la prueba añadiendole al código mas linea de cuadros (mas computadores) y siempre el color terminan antes de los últimos. me gustaría saber porque esta pasando esto.

    PD: la solución que encontré fue colocarle al background del el mismo color que tiene el para que se vea uniforme, aunque esta solución no me parece la mas adecuada.

    Otra vez te mando mis agradecimientos por tu colaboración.

    Saludos,

  12. dmozop

    dacho,

    Al parecer encontré cual es la falla, lo que pasa es que por alguna razon el comando background considera que el layer o div termina en la ultima etiqueta de texto que esta escrito dentro de este que en este caso es el ultimo que es el que nombra a “notebooks toshiba” y hasta ahi pone el color. Otra solución un poco mas elegante que encontré fue colocar despues de los ultimos div de toshiba una etiqueta de parrafo () vacia, y en las instrucciones de css coloque esto: #contenido p{clear: both;}, para hacerle creer al programa que lo ultimo escrito esta por debajo de los div y coloque el color hasta el final.

  13. dmozop

    vuelvo a redactarte los 2 últimos comentarios que salieron incompletos para que entiendan cual es la situación:

    1)hola dacho,

    quería comentarte que me sucede lo mismo que a arts: en el ultimo código por alguna razón que aun no he encontrado el color del background asignado para la sección <div=”contenido” > (#F1F5F8 un azul claro) no cubre por completo la sección. Sino que llega hasta antes de la ultima linea de cuadros (los dos cuadros de toshiba). hice la prueba añadiendole al código mas linea de cuadros (mas computadores) y siempre el color terminan antes de los últimos cuadros. me gustaría saber porque esta pasando esto.

    PD: la solución que encontré fue colocarle al background del<div=”centro” > el mismo color que tiene el <div=”contenido” > para que se vea uniforme, aunque esta solución no me parece la mas adecuada.

    Otra vez te mando mis agradecimientos por tu colaboración.

    Saludos,

    2)dacho,

    Al parecer encontré cual es la falla, lo que pasa es que por alguna razon el comando background considera queel layer o div termina en la ultima etiqueta de texto que esta escrito dentro de este, que en este caso es el ultimo <h3 > que es el que nombra a “notebooks toshiba” y hasta ahi pone el color. Otra solución un poco mas elegante que encontré fue colocar despues de los ultimos div de toshiba una etiqueta de parrafo (<p ></p >) vacia, y en las instrucciones de css coloque esto: #contenido p{clear: both;},para hacerle creer al programa que la ultima etiqueta de texto esta por debajo de los div y coloque el color hasta el final.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">