elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Recopilación Tutoriales y Manuales Hacking, Seguridad, Privacidad, Hardware, etc


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  2 columnas horizontales responsive
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: 2 columnas horizontales responsive  (Leído 6,328 veces)
WIитX


Desconectado Desconectado

Mensajes: 1.026


WINTX


Ver Perfil WWW
2 columnas horizontales responsive
« en: 26 Junio 2016, 21:52 pm »

Hola, estoy intentando hacer 2 columnas responsive pero seque no hay manera e probado creando una table y demás a ver si podes echarme una mano

Código
  1. <div id="contenedor_contenido">
  2.  <table class="table table-striped">
  3.    <tr>
  4.      <td class="left">
  5.        <!-- COLUMNA IZQUIERDA !-->
  6.          <div class="column1">
  7.  
  8.              <div class="titulo">
  9.                Esto es un título de prueba
  10.              </div>
  11.  
  12.              <div class="imagen_portada">
  13.              </div>
  14.              <div class="descarga">
  15.              </div>
  16.  
  17.          </div>
  18.      </td>
  19.  
  20.      <td class="derecha">
  21.        <!-- COLUMNA DERECHA !-->
  22.          <div class="column2-twitter">
  23.  
  24.          </div>
  25.  
  26.          <div class="twitter">
  27.          </div>      
  28.    </td>
  29.  </tr>
  30. </div>

Código
  1. .left {
  2.  max-width: 860px;
  3.  height: auto;
  4.  background-color: rgb(255, 255, 255);
  5.  margin-top: 20px;
  6.  border-top-left-radius: 3px;
  7.  border-top-right-radius: 3px;
  8.  border-top: 5px solid rgb(65, 185, 74);
  9.  float: left;
  10.  margin-right: 10px;
  11.  color: #636161;
  12.  border-left: 1px solid rgba(107, 107, 107, 0.11);
  13.  border-right: 1px solid rgba(107, 107, 107, 0.11);
  14.  border-bottom: 1px solid rgba(107, 107, 107, 0.11);
  15.  margin-bottom: 20px;
  16. }
  17.  
  18. .derecha {
  19.  float: right;
  20.  max-width: 310px;
  21.  height: auto;
  22.  background-color: white;
  23.  margin-top: 20px;
  24.  border-top-left-radius: 3px;
  25.  border-top-right-radius: 3px;
  26.  border-top: 5px solid rgb(255, 90, 64);
  27.  border-left: 1px solid rgba(107, 107, 107, 0.11);
  28.  border-right: 1px solid rgba(107, 107, 107, 0.11);
  29.  border-bottom: 1px solid rgba(107, 107, 107, 0.11);
  30.  margin-bottom: 20px;
  31. }
  32.  
  33. .column1 {
  34.  max-width: 845px;
  35.  color: #4e4e4e;
  36.  padding-left: 20px;
  37.  padding-top: 20px;
  38.  padding-bottom: 20px;
  39.  padding-right: 20px;
  40.  text-align: justify;
  41. }

Este es el código T.T a ver si podes ayudarme

|              HEADER           |

| columna 1 | | Columna 2|


En línea

"Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)
xiruko


Desconectado Desconectado

Mensajes: 438


Ver Perfil
Re: 2 columnas horizontales responsive
« Respuesta #1 en: 26 Junio 2016, 22:22 pm »

Hola, estás usando Bootstrap? Lo digo por lo de table table-striped...

Si es así, para hacer dos columnas que de tablet para abajo se vea una debajo de otra, simplemente haz esto:

Código
  1. <div class="container">
  2.   <div class="row">
  3.      <div class="col-sm-6" id="columna_izquierda"></div>
  4.      <div class="col-sm-6" id="columna_derecha"></div>
  5.   </div>
  6. </div>

Si no usas Bootstrap, deberás usar media queries para conseguir un comportamiento responsive. Siguiendo con el HTML que he puesto arriba, sería algo así:

Código
  1. div#columna_izquierda {
  2.   float: left;
  3.   width: 50%;
  4. }
  5. div#columna_derecha {
  6.   float: right;
  7.   width: 50%;
  8. }
  9. @media (max-width: 700px) {
  10.   div#columna_izquierda,
  11.   div#columna_derecha {
  12.      float: none;
  13.      width: 100%;
  14.   }
  15. }

Saludos!


En línea

WIитX


Desconectado Desconectado

Mensajes: 1.026


WINTX


Ver Perfil WWW
Re: 2 columnas horizontales responsive
« Respuesta #2 en: 27 Junio 2016, 23:06 pm »

Hola, muchas gracias por su pronta respuesta!

Sí, uso boostrap e probado el código que me has pasado pero las columnas son 50% y 50% sin embargo yo quiero que la columna izquierda sea más ancha que la derecha, pero al mover los % la derecha se me baja abajo

Un saludo y gracias :S
En línea

"Es más divertido hacerse pirata que unirse a la marina." (Steve Jobs)
xiruko


Desconectado Desconectado

Mensajes: 438


Ver Perfil
Re: 2 columnas horizontales responsive
« Respuesta #3 en: 28 Junio 2016, 11:01 am »

Hola,

Antes de nada deberías echarle un vistazo a la documentación oficial de Bootstrap... http://getbootstrap.com/css/#grid

Respecto a tu duda, para hacer la izquierda más ancha, deberás aumentar el valor de su clase sm a la vez que reduces el de la derecha. Recuerda que en una fila, las columnas siempre deben sumar 12.

Por ejemplo:

Código
  1. <div class="container">
  2.   <div class="row">
  3.      <div class="col-sm-8" id="columna_izquierda"></div>
  4.      <div class="col-sm-4" id="columna_derecha"></div>
  5.   </div>
  6. </div>

Saludos!
En línea

gAb1


Desconectado Desconectado

Mensajes: 731


Ver Perfil
Re: 2 columnas horizontales responsive
« Respuesta #4 en: 29 Junio 2016, 02:24 am »

Hola, no te recomiendo usar el float, es muy sucio y hay que estar usando hacks, y usarlo en cada elemento...

Yo uso flexbox y hace exactamente lo mismo, solo que no necesitas ir limpiando nada ni poner divs extras, simplemente se pone display inline-flex en el div padre (o flex si necesitas tener un absolute dentro) y todos los elementos que tengas dentro se alinean horizontalmente, dependiendo del ancho que tengan. Y para que no se amontonen usas flex-wrap: wrap y se reparten por filas (no más del 100% del ancho del padre en cada fila).

Respecto a bootstrap, no te recomiendo usar un framework entero, ya que seguramente no necesitarás ni la mitad de todo lo que tiene, lo único útil que les veo son el sistema de columnas, que simplemente son clases con un width %. Con eso y flexbox yo no necesito (de momento) usar frameworks.

Ahora, si solo estás haciendo pruebas y aprendiendo no hay ningún problema, me refiero para producción. O a menos que estés en un proyecto muy grande y la web va tener mil cosas y vás a usar practicamente todo lo que ofrece dicho framework, entonces si que vale la pena usarlo.


Edito: Si no me equivoco esto es lo que estabas buscando no? https://jsfiddle.net/y5x3jyc9/2/ Ni un solo float  ;D

Código
  1. <header>HEADER</header>
  2. <main>
  3.    <div class="left">Columna 1</div>
  4.    <div class="right">Columna 2</div>
  5.    <footer>Footer 2016</footer>
  6. </main>

Código
  1. * {
  2.    -webkit-box-sizing: border-box;
  3.    -moz-box-sizing: border-box;
  4.    box-sizing: border-box;
  5. }
  6.  
  7. html,
  8. body {
  9.    width: 100%;
  10.    height: 100%;
  11.    text-align: center;
  12.    margin: 0;
  13. }
  14.  
  15. header {
  16.    border: 1px solid grey;
  17.    width: 100%;
  18.    height: 15%;
  19.    margin-bottom: 10px;
  20. }
  21.  
  22. main {
  23.    border: 1px solid grey;
  24.    width: 100%;
  25.    height: calc(85% - 10px);
  26.    padding: 10px;
  27.    display: flex;
  28.    flex-wrap: wrap;
  29. }
  30.  
  31. .left {
  32.    border: 1px solid grey;
  33.    width: calc(70% - 10px);
  34.    margin: 0 10px 10px 0;
  35. }
  36.  
  37. .right {
  38.    border: 1px solid grey;
  39.    width: calc(30% - 10px);
  40.    margin: 0 0 10px 10px;
  41. }
  42.  
  43. footer {
  44.    border: 1px solid grey;
  45.    width: 100%;
  46.    height: 15%;
  47. }

Ahora sobre el tema del scroll, es algo muy facil, puedes ponerlo donde quieras, si quieres que se muestre el header siempre (sin tener que usar javascript) puedes ocultar el overflow en el body y mostrarlo solo en el main, de esta manera solo hace scroll este elemento: https://jsfiddle.net/y5x3jyc9/3/

Código
  1. html, body { overflow: hidden }
  2.  
  3. main { overflow-y: scroll }

O dejarlo normal: https://jsfiddle.net/y5x3jyc9/4/

A tu gusto ;)
« Última modificación: 29 Junio 2016, 03:38 am por gAb1 » En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
fifa football 20005 aparecen rayas horizontales
Juegos y Consolas
damandar2 0 1,361 Último mensaje 14 Marzo 2006, 02:00 am
por damandar2
Lineas Horizontales En Portatil Fujitsu Siemens Amilo A1667g
Hardware
pablo378 6 6,308 Último mensaje 5 Febrero 2011, 00:05 am
por Artikbot
Versión Responsive...
Sugerencias y dudas sobre el Foro
Kami 5 4,711 Último mensaje 24 Marzo 2014, 06:13 am
por flacc
diseño responsive
Desarrollo Web
kakashi20 3 2,494 Último mensaje 14 Abril 2014, 23:30 pm
por EFEX
Pasar web a responsive
Desarrollo Web
softmel 2 2,285 Último mensaje 10 Febrero 2015, 23:37 pm
por luchi
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines