Cuál es la forma adecuada de resolver esta implementación...

winjose · #1 (**permalink**) 12/10/2017, 12:42

Hola, buenas a todos:

Estoy realizando los estilos para generar la app que adjunto al mensaje.

He utilizado "div" para cada una de las cajitas. Quizás alguien pueda ayudarme con una metodología mejor.
Lo que he hecho básicamente es, emplear 4 divs para generar las 4 columnas principales, y luego he ido añadiendo divs para cada una de las divisiones internas.

Código HTML:

<section id="app" class="container">
    <div class="row">
      <div class="col-md-12" STYLE="background-color:brown ;border: gray 2px solid; ">Sección CUERPO</div>

      <div class="servicio">

        <div class="box1">
          <div class="tick"></div>
          <div class="id_sh"></div>
        </div>

        <div class="box2">
          <div class="reloj"></div>
        </div>

        <div class="box3"> 
          <div class="cambio1"></div>
          <div class="cambio2"></div>                                
          <div class="id_me"></div>
        </div>

        <div class="box4">  
          <div class="sabor"></div>
        </div> 

      </div>
    </div>
    </div>
  </section>

El problema es que me estoy haciendo un lío con la posición de cada uno de los div para lograr el resultado final.

Un saludo a todos. Y gracias de antemano.

xfxstudios · #2 (**permalink**) 12/10/2017, 15:01

Ve esto:

https://codepen.io/xfxstudios/pen/GMBzvw

No esta exactamente igual, pero ya juegas tu con el css

winjose · #3 (**permalink**) 13/10/2017, 13:32

Ya he conseguido implementarlo correctamente en CSS. No obstante me surgen un par de dudas. La primera es saber si ustedes piensan que mi metodología es adecuada o si por el contrario, existe alguna más óptima. Y la segunda duda es en cómo centrar el texto verticalmente.

Adjunto el código. Un saludo y gracias.

Código:

  <section id="app" class="container">

      <div class="col-md-12" id="contenedor_padre">
    
        <div class="container" id="box1">
          <div class="container" id="tick">
          <p class="tick">T</p>
          </div>
          <div class="container" id="id_sh">
          <p class="id_sh1">001</p>
          <p class="id_sh2">170810</p>
          </div>
        </div>

        <div class="container" id="box2">
          <div class="container" id="reloj">
          <p class="reloj">01:30</p>
          </div>
        </div>

        <div class="container" id="box3"> 
          <div class="container" id="cambio_1">1</div>
          <div class="container" id="cambio_2">2</div>                                
          <div class="container" id="id_m">M17</div>
        </div>

        <div class="container" id="box4">  
          <div class="container" id="sab">UUU/MMM</div>
        </div>
  </section>

Y aquí el CSS:

Código:

/* Contenedor padre que hará filas */

div#contenedor_padre {
  padding: 4px;
  margin: 0px;
  width: 100%;
  height: 250px;
  background: white;
  border: gray 2px solid

}

/* Subcontenedores(4) con los atributos para cada servicio  */

div#box1{
  margin-right: 1%;
  margin-bottom: 2%;
  padding: 1px;
  float:left;
  width: 20%;
  height: auto;
  background-color: black;
 
 
}
div#box2{
  margin-right: 1%;
  margin-bottom: 2%;
  padding: 1px;
  float:left;
  width: 29%;
  height: auto;
  background: black;

}
div#box3{
  margin-right: 1%;
  margin-bottom: 2%;
  padding: 1px;
  float:left;
  width: 19%;
  height: auto;
  background: black;

}
div#box4{
  margin-bottom: 2%;
  padding: 1px;
  float:left;
  width: 29%;
  height: auto;
  background: black;

}

/*Estilo de cada uno de los divs dentro de un BOX */

/*BOX 1*/

div#tick {

  width: 100%;
  height: 30px;
  float: top;
  background-color: #51B01B;
  border: 1px solid black;
  vertical-align: middle;
}

p.tick {

font-size: 17px;
font-weight: bold;
color:black;
text-align: center;
vertical-align: middle;

}

div#id_sh {
  float: bottom;
  width: 100%;
  height: 70px;
  background: white;
  border: 1px solid black;
  
}

p.id_sh1 {

font-size: 17px;
color:black;
text-align: center;
margin-top: 15px;



}

p.id_sh2 {

font-size: 12px;
color:black;
text-align: center;
margin-top: 0px;

}

/*BOX 2*/

div#reloj {
  width: 100%;
  height: 100px;
  background: #DDDEDD;
  border: 1px solid black;

}

p.reloj {
  font-size: 20px;
  color:black;
  text-align: center;
  margin-top: 35px;

}

/*BOX 3*/

div#cambio_1 {
  float: left;
  width: 50%;
  height: 30px;
  background: #51B01B;
  border: 1px solid black;
}

div#cambio_2 {
  float:right;
  width: 50%;
  height: 30px;
  background: #8F1C0E;
  border: 1px solid black;
}

div#id_m {
  float:left;
  width: 100%;
  height: 70px;
  background: #DDDEDD;
  border: 1px solid black;
}

/*BOX 4*/

div#sab {
  width: 100%;
  height: 100px;
  background: #DDDEDD;
  border: 1px solid black;
}

Así es como se vería: El problema surge como pueden ver en cómo centrar verticalmente los textos (sin generar más divs que ya no se ni qué nombres ponerles xD)

Link por si no se ve correctamente: http://es.tinypic.com/r/swydd5/9

Sal2!

Rafael · #4 (**permalink**) 16/10/2017, 07:50

¡SIMPLICIDAD!

Para que te des una idea, acá están las dos primeras cajtas, y no me digas que no se ve bonito el código limpio:

https://codepen.io/RafaelO/pen/BwGBjY

Código HTML:

Ver original<section class="app flex">
    <div>
      <p class="green">T</p>
      <p>001<br>1607</p>
    </div>
 
    <div>
      <div class="flex">
      <p class="green">T</p>
      <p class="red">T</p>
      </div>
      <p>001<br>1607</p>
    </div>
</section>

El código CSS te muestra tres cosas importantes:

1) ¡Anidar!
2) Reutilizar
3) El Flexbox

Código CSS:

Ver original.flex {
  display: -ms-flexbox;
  display: flex;}
.flex>* {flex-grow: 1;}
 
.app {width: 180px;}
.app>div {
  text-align: center;
  border: solid 1px black;
  margin: 2px;}
 
.green {
  background-color: #0D0;}
.red {
  background-color: #E00;}
 
p {
  margin: 0;
  padding: 5px;
  font-family: verdana;}

Y ya el código está largo para mostrarte letra sans serif, pero lo importante y la lógica ya está definida.

En este caso de plano no uses medidas relativas, usa medidas fijas.

Evidentemente tu código necesita elaborarse más. Pero la clave está en esos tres puntos, anidar, reutilizar y flexbox: https://www.google.com.mx/search?q=flexbox

P.D. No adjuntes una imagen, necesitas adjuntar un editor de código como el Codepen o JsFiddle.

winjose · #5 (**permalink**) 18/10/2017, 11:50

Cita:

Iniciado por Rafael

¡SIMPLICIDAD!

Para que te des una idea, acá están las dos primeras cajtas, y no me digas que no se ve bonito el código limpio:

https://codepen.io/RafaelO/pen/BwGBjY

Código HTML:

Ver original<section class="app flex">
    <div>
      <p class="green">T</p>
      <p>001<br>1607</p>
    </div>
 
    <div>
      <div class="flex">
      <p class="green">T</p>
      <p class="red">T</p>
      </div>
      <p>001<br>1607</p>
    </div>
</section>

El código CSS te muestra tres cosas importantes:

1) ¡Anidar!
2) Reutilizar
3) El Flexbox

Código CSS:

Ver original.flex {
  display: -ms-flexbox;
  display: flex;}
.flex>* {flex-grow: 1;}
 
.app {width: 180px;}
.app>div {
  text-align: center;
  border: solid 1px black;
  margin: 2px;}
 
.green {
  background-color: #0D0;}
.red {
  background-color: #E00;}
 
p {
  margin: 0;
  padding: 5px;
  font-family: verdana;}

Y ya el código está largo para mostrarte letra sans serif, pero lo importante y la lógica ya está definida.

En este caso de plano no uses medidas relativas, usa medidas fijas.

Evidentemente tu código necesita elaborarse más. Pero la clave está en esos tres puntos, anidar, reutilizar y flexbox: https://www.google.com.mx/search?q=flexbox

P.D. No adjuntes una imagen, necesitas adjuntar un editor de código como el Codepen o JsFiddle.

Qué grande. Muy buena respuesta. Voy a ponerme al lío. No conocía este framework. Me surge ahora la siguiente duda: ¿Bootstrap o Flex?. Porque tengo toda la maquetación de la app en Bootstrap, pero es más atractivo el modo en el que Flex trata los datos (más simple). ¿Qué me recomiendan?

Rafael · #6 (**permalink**) 18/10/2017, 13:32

Combina lo que necesites combinar, usa lo que requieras, lo que no.... pues no.

Flex no es un framework, es un simple class que yo inventé, asignándole la propiedad flexbox de css igual que puse un class red para el color por ejemplo.

winjose · #7 (**permalink**) 19/10/2017, 04:14

Cita:

Iniciado por Rafael

Combina lo que necesites combinar, usa lo que requieras, lo que no.... pues no.

Flex no es un framework, es un simple class que yo inventé, asignándole la propiedad flexbox de css igual que puse un class red para el color por ejemplo.

A ver si me aclaro. Perdona mi ignorancia pero estoy aprendiendo CSS y tengo mucho trabajo por delante.

Este enlace crea el Layout de una página mediante Flexbox:
http://falconmasters.com/demos/layout_flexbox/

Al redimensionar el navegador (Safari V10.0.0.3) los elementos/div se superponen y no se visualiza correctamente el Layout. Aquí es dónde entraría la funcionalidad de Bootstrap mediante el uso del grid ¿me equivoco?. Por esta casuística, interpreto que mediante flex lo que hago es diseñar las clases (posición etc) de los elementos del layout que a su vez estarán recogidos en los div definidos usando bootstrap, y así redimensionar el layout para distintos dispositivos ¿no?