Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Cuál es la forma adecuada de resolver esta implementación... en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 12/10/2017, 12:42
 
Fecha de Ingreso: julio-2008
Mensajes: 258
Antigüedad: 15 años, 11 meses
Puntos: 9
Información Cuál es la forma adecuada de resolver esta implementación...

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.
__________________
"La diversidad de opiniones crean una perspectiva capaz de ver todas las caras del objeto"
  #2 (permalink)  
Antiguo 12/10/2017, 15:01
Avatar de xfxstudios  
Fecha de Ingreso: junio-2015
Ubicación: Valencia - Venezuela
Mensajes: 2.448
Antigüedad: 9 años
Puntos: 263
Respuesta: Cuál es la forma adecuada de resolver esta implementación...

Ve esto:

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

No esta exactamente igual, pero ya juegas tu con el css
__________________
[email protected]
HITCEL
  #3 (permalink)  
Antiguo 13/10/2017, 13:32
 
Fecha de Ingreso: julio-2008
Mensajes: 258
Antigüedad: 15 años, 11 meses
Puntos: 9
Información Respuesta: Cuál es la forma adecuada de resolver esta implementación...

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!
__________________
"La diversidad de opiniones crean una perspectiva capaz de ver todas las caras del objeto"

Última edición por winjose; 13/10/2017 a las 13:41
  #4 (permalink)  
Antiguo 16/10/2017, 07:50
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 3 meses
Puntos: 1826
Respuesta: Cuál es la forma adecuada de resolver esta implementación...

¡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
  1. <section class="app flex">
  2.     <div>
  3.       <p class="green">T</p>
  4.       <p>001<br>1607</p>
  5.     </div>
  6.  
  7.     <div>
  8.       <div class="flex">
  9.       <p class="green">T</p>
  10.       <p class="red">T</p>
  11.       </div>
  12.       <p>001<br>1607</p>
  13.     </div>
El código CSS te muestra tres cosas importantes:

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

Código CSS:
Ver original
  1. .flex {
  2.   display: -ms-flexbox;
  3.   display: flex;}
  4. .flex>* {flex-grow: 1;}
  5.  
  6. .app {width: 180px;}
  7. .app>div {
  8.   text-align: center;
  9.   border: solid 1px black;
  10.   margin: 2px;}
  11.  
  12. .green {
  13.   background-color: #0D0;}
  14. .red {
  15.   background-color: #E00;}
  16.  
  17. p {
  18.   margin: 0;
  19.   padding: 5px;
  20.   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.

Última edición por Rafael; 16/10/2017 a las 08:11
  #5 (permalink)  
Antiguo 18/10/2017, 11:50
 
Fecha de Ingreso: julio-2008
Mensajes: 258
Antigüedad: 15 años, 11 meses
Puntos: 9
Pregunta Respuesta: Cuál es la forma adecuada de resolver esta implementación...

Cita:
Iniciado por Rafael Ver Mensaje
¡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
  1. <section class="app flex">
  2.     <div>
  3.       <p class="green">T</p>
  4.       <p>001<br>1607</p>
  5.     </div>
  6.  
  7.     <div>
  8.       <div class="flex">
  9.       <p class="green">T</p>
  10.       <p class="red">T</p>
  11.       </div>
  12.       <p>001<br>1607</p>
  13.     </div>
El código CSS te muestra tres cosas importantes:

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

Código CSS:
Ver original
  1. .flex {
  2.   display: -ms-flexbox;
  3.   display: flex;}
  4. .flex>* {flex-grow: 1;}
  5.  
  6. .app {width: 180px;}
  7. .app>div {
  8.   text-align: center;
  9.   border: solid 1px black;
  10.   margin: 2px;}
  11.  
  12. .green {
  13.   background-color: #0D0;}
  14. .red {
  15.   background-color: #E00;}
  16.  
  17. p {
  18.   margin: 0;
  19.   padding: 5px;
  20.   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?
__________________
"La diversidad de opiniones crean una perspectiva capaz de ver todas las caras del objeto"
  #6 (permalink)  
Antiguo 18/10/2017, 13:32
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años, 3 meses
Puntos: 1826
Respuesta: Cuál es la forma adecuada de resolver esta implementación...

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.

Última edición por Rafael; 18/10/2017 a las 14:07
  #7 (permalink)  
Antiguo 19/10/2017, 04:14
 
Fecha de Ingreso: julio-2008
Mensajes: 258
Antigüedad: 15 años, 11 meses
Puntos: 9
Respuesta: Cuál es la forma adecuada de resolver esta implementación...

Cita:
Iniciado por Rafael Ver Mensaje
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?
__________________
"La diversidad de opiniones crean una perspectiva capaz de ver todas las caras del objeto"

Etiquetas: class, color, forma, resolver
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:00.