Menubar

miércoles, 11 de noviembre de 2015

Flow Layout con HTML + CSS

HTML  Hasta hace unos diez años atrás de lo único que teníamos que preocuparnos los desarrolladores de sitios web era de que, nuestra web funcionara sin problemas en internet explorer y firefox (o netscape, aunque eso se usó en años más anteriores, para el 2005 ya era poco relevante), de que estuviera instalado Macromedia Flash (se podía recurrir a JavaScript para detectarlo y si no estaba entonces ofrecer contenido alterno o proporcionar un medio para descargarlo) y de que no se cayera a cada rato nuestro servidor.

  Pero hoy en día el panorama es otro. Adobe Flash ahora parece haber muerto y si no ha muerto es odiado por muchos "expertos en el tema", con la llegada de los celulares y demás dispositivos que se conectan a internet los diseños clásicos para web son totalmente incompatibles, por lo que terminamos haciendo dos diseños: uno para el navegador convencional y otro para ejecutarse en un celular o tableta. Claro, no todos queremos trabajar doble, por lo que hay algunos trucos que podemos usar para simplificar el trabajo, y así mostrar correctamente el contenido, tanto en la versión normal, como en la versión móvil.

  Una forma de mostrar el contenido correctamente es simular el panel "Flow Layout" que existe en entornos como Java o VB.Net. Para ello podemos usar el siguiente código fuente que en parte se baja en una pregunta similar planteado en el portal Stack Overflow (https://stackoverflow.com/questions/6838888/flow-layout-behavior-using-plain-old-html).

<html>
<head>
<style type="text/css">
.flow ul
{
    float: left;
}

.flow li
{
    list-style: none;
}
</style>
</head>
<body>
    <form>
    <div class="flow"><ul><li><input type="button" value="botón 1"></li></ul></div>
    <div class="flow"><ul><li><input type="button" value="botón 2"></li></ul></div>
    <div class="flow"><ul><li><input type="button" value="botón 3"></li></ul></div>
    <div class="flow"><ul><li><input type="button" value="botón 4"></li></ul></div>
  </form>
</body>
</html>

  Como pueden ver, este código muestra cuatro botones en pantalla, todos ellos en línea recta, pero, si se redimensiona el tamaño de la ventana (tamaño menor), los botones se reacomodan y así, si el espacio es poco o mucho los botones se muestran correctamente, permitiendo visualizar el contenido correctamente en un dispositivo tradicional (navegador de escritorio) o en un dispositivo móvil.

Procedencia de las imágenes:
File: Icono HTML
URL: https://www.returngis.net/wp-content/uploads/2013/05/HTML-logo.jpg
Licencia: Creative Commons

¿Te gustó este post?, entonces si lo deseas puedes apoyarnos para continuar con nuestra labor, gracias.


publicidad:
Compartir:
Temas relacionados:
Caritas para las respuestas:
Escriba el código en la respuesta para insertar divertidas caritas en sus respuestas.
:) :( ;) :D :-/ :x :P :-* =(( :-O X( :7 B-) #:-S :(( :)) =)) :-B :-c :)] ~X( :-h I-) =D7 @-) :-w 7:P 2):) :!! \m/ :-q :-bd ^#(^

No hay comentarios.:

Publicar un comentario

Votar por nosotros en Hispatop
Votar por nosotros en La Blogoteca
Comunidad Kynamio
Directorio de blogs, ¡agrega el tuyo!
Programas para el mantenimiento de Windows
Blog de seguridad informatica