CSS - CSS pantalla orden

 
Vista:
sin imagen de perfil
Val: 5
Ha disminuido su posición en 11 puestos en CSS (en relación al último mes)
Gráfica de CSS

CSS pantalla orden

Publicado por Jorge (2 intervenciones) el 22/08/2019 14:31:57
Buenas tardes, en la primera imagen tengo la interfaz de una pantalla la cual necesito modificar de modo que la barra de navegación en vez de estar arriba se posiciones abajo. Se utilizan cajas flexibles, adjunto el codigo del layout, la parte que representa a la barra de navegacion es #navbar.


PrimerPantallazo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#navbar {
  margin-left: 1.125rem;
  margin-right: 1.125rem;
  height: 4rem;
}
#navbar .btnBack,
#navbar .btnHome,
#navbar .btnInfo,
#navbar .btnSettings,
#navbar .btnGridMode,
#navbar .btnListMode {
  left: 0;
  position: relative;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  border: 1px solid #B4B4B4;
}
 
#navbar .navbar-table {
  width: 100%;
  border-bottom: 1px solid #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

Lo modifique de tal forma que consegui bajar la barra de navegacion,


Pero no consigo que se centre los botones de la barra, para conseguir que bajar realice lo siguiente, y entonces es como si no llegara a ejecutar la parte de #navbar .navbar-table :

Segundo_Pantallazo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#navbar {
  margin-left: 1.125rem;
  margin-right: 1.125rem;
  height: 4rem;
  position: absolute;
  bottom: 0;
}
#navbar .btnBack,
#navbar .btnHome,
#navbar .btnInfo,
#navbar .btnSettings,
#navbar .btnGridMode,
#navbar .btnListMode {
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  border: 1px solid #B4B4B4;
}
 
#navbar .navbar-table {
  width: 100%;
  border-bottom: 1px solid #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

Gracias de antemano por su tiempo.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 5
Ha disminuido su posición en 11 puestos en CSS (en relación al último mes)
Gráfica de CSS

CSS pantalla orden

Publicado por Jorge (2 intervenciones) el 22/08/2019 15:47:31
El codigo es el siguiente.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar