Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » Ayuda con posicionamiento de cajas

CSS - Ayuda con posicionamiento de cajas

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 10
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con posicionamiento de cajas

Publicado por Diego (5 intervenciones) el 12/01/2020 22:56:04
Hola, buenos dias.

Recien estoy empezando con la programacion, seguramente sera muy sencillo para la mayoria de ustedes.
Mi problema es que estoy tratando de estructurar el encabezado de una pagina pero no me posiciona unas cajas de la manera que quiero.

Adjunto el codigo y la imagen por las dudas para que vean de que hablo. Quiero hacer que lo que esta en tonos de verde quede donde esta lo amarillo. El tema es que el contenedor de los botones 5 y 6 me los ubica justo seguido del contenedor de los botones 3 y 4, y no mas arriba como se ve.

Aguardo respuestas. Gracias!


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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Esquema de prueba</title>
 
 
<style>
 
    .body {
        width: 1090px;
        margin: 0 auto;
    }
 
    .contenedor {
        width: 1090px;
        margin: 0 auto;
        background-color: peru;
    }
 
    .cabecera {
        width: 1090px;
        height: 66px;
        margin: auto;
        background-color: yellow;
    }
 
    .nombredelsitio {
        width: 198px;
        height: 56px;
        font-size: 0.6cm;
        background-color: orange;
        float:left;
    }
 
    .botones12 {
        width: 155px;
        height: 56px;
        background-color: rgb(255, 192, 75);
        float:left;
        text-align: center;
    }
    .boton1 {
        width: 128px;
        height: 19px;
        font-size: 0.23cm;
        background-color:powderblue;
        float:left;
    }
    .boton2 {
        width: 128px;
        height: 19px;
        font-size: 0.23cm;
        background-color:powderblue;
        float:left;
    }
 
    .logo {
        width: 125px;
        height: 32px;
        background-color: orange;
        float:left;
        text-align: right;
    }
 
    .secciondeslizable {
        width: 250px;
        height: 32px;
        background-color: rgb(255, 192, 75);
        float:left;
    }
 
    .botones34 {
        width: 375px;
        height: 24px;
        background-color: purple;
        float:left;
    }
    .boton3 {
        width: 174px;
        height: 24px;
        font-size: 0.23cm;
        background-color:powderblue;
        float:left;
        text-align: center;
    }
    .boton4 {
        width: 174px;
        height: 24px;
        font-size: 0.23cm;
        background-color:powderblue;
        float:right;
        text-align: center;
    }
 
    .botones56 {
        width: 138px;
        height: 56px;
        background-color: green;
        float:left;
    }
    .boton5 {
        width: 113px;
        height: 19px;
        font-size: 0.23cm;
        background-color: rgb(0, 187, 0);
        float:left;
    }
    .boton6 {
        width: 113px;
        height: 19px;
        font-size: 0.23cm;
        background-color: rgb(0, 187, 0);
        float:left;
    }
 
    .usuario {
        width: 224px;
        height: 56px;
        background-color: rgb(0, 168, 0);
        float:left;
        font-size: 0.2343cm;
    }
 
    .espacio {
        width: 1090px;
        height: 10px;
        background-color: rgb(0, 187, 0);
        float:left;
    }
 
 
 
 
    .contenido {
        width: 1090px;
        height: 900px;
        background-color: aliceblue;
    }
 
    .piedepagina {
        width: 1090px;
        height: 113px;
        clear: both;
        background-color: blue;
        bottom: 0px;
    }
 
 
</style>
 
</head>
<body class="body">
 
   <div class="contenedor">
 
      <div class="cabecera">
          <div class="nombredelsitio"> <h3>Nombre del Sitio</h3> </div>
          <div class="botones12">
              <div class="boton1"> <h3>Boton 1</h3> </div>
              <div class="boton2"> <h3>Boton 2</h3> </div>
          </div>
          <div class="logo"> <h3>Logo</h3> </div>
          <div class="secciondeslizable"> <h3 >Seccion deslizable</h3 ></div>
          <div class="botones34">
              <div class="boton3"> <h3>Boton 3</h3> </div>
              <div class="boton4"> <h3>Boton 4</h3> </div>
          </div>
          <div class="botones56">
              <div class="boton5"> <h3>Boton 5</h3> </div>
              <div class="boton6"> <h3>Boton 6</h3> </div>
          </div>
          <div class="usuario"><h3>Nombre Usuario</h3></div>
          <div class="espacio"></div>
      </div>
    </div>
 
    <div class="contenido"></div>
    <div class="piedepagina"></div>
 
 
 
</body>
</html>


Asi es como se ve...

problema-con-encabezado
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
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con posicionamiento de cajas

Publicado por joel (252 intervenciones) el 13/01/2020 08:08:14
Hola Diego, el problema es que el .botones34 tiene una anchura que no cabe a continuación del .secciondeslizable por lo que se pone debajo. Por esta razón el .botones56 esta a la altura de .botones34.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-1
Comentar
sin imagen de perfil
Val: 10
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con posicionamiento de cajas

Publicado por Diego (5 intervenciones) el 13/01/2020 17:27:40
Pero no entiendo, todo esta metido en el contenedor amarillo, y .botones56 entra perfectamente al lado de .secciondeslizable, ya que aparte también entraría .usuario y tendrían que encajar a la perfección. No se si estoy entendiendo algo mal o que.
El alto de .botones56 eso si es mas alto que el de .secciondeslizable, pero no creo que eso influya, sino tampoco me tendria que haber dejado ponerlo ahi, ya que tambien supera la altura de .botones34
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
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con posicionamiento de cajas

Publicado por joel (252 intervenciones) el 13/01/2020 21:16:35
Diego, ves disminuyendo la anchura de la capa .botones34 y veras como todo encaja perfectamente.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
-1
Comentar
sin imagen de perfil
Val: 10
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con posicionamiento de cajas

Publicado por Diego (5 intervenciones) el 13/01/2020 22:58:51
Recien entendi que hablabas de esos botones, lo vi apurado me hice un poco mezcla.
Pero en realidad los botones34 están bien ubicados como quedaron ahí debajo de .secciondeslizable, el problema es que no entiendo por que .botones56 (el rectangulo verde oscuro) se ubica al lado de .botones34 y no al lado de .deslizable que es lo que quiero, osea al lado del naranja.
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
sin imagen de perfil
Val: 10
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con posicionamiento de cajas

Publicado por Diego (5 intervenciones) el 14/01/2020 00:09:48
Asi esta:

el-problema


Y asi es como quiero que quede (obviamente la imagen es editada )

como-quiero-que-quede
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
Imágen de perfil de juan jose
Val: 165
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con posicionamiento de cajas

Publicado por juan jose (57 intervenciones) el 14/01/2020 04:31:44
solucionado, necesitabas un div que contuviese lo del centro, puesto que invadia la derecha.

debes de aprender bien html, y css, por ejemplo, no hace falta crear tantas clases, tienes la etiqueta header, main, footer

debes de poner en un archivo css los estilos y adjuntarlo al html, ect....

salu2

esq


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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Esquema de prueba</title>
 
 
<style>
 
    .body {
        width: 1090px;
        margin: 0 auto;
    }
 
    .contenedor {
        width: 1090px;
        margin: 0 auto;
        background-color: peru;
    }
 
    .cabecera {
        width: 1090px;
        height: 66px;
        margin: auto;
        background-color: yellow;
    }
 
    .nombredelsitio {
        width: 198px;
        height: 56px;
        font-size: 0.6cm;
        background-color: orange;
        float:left;
    }
 
    .botones12 {
        width: 155px;
        height: 56px;
        background-color: rgb(255, 192, 75);
        float:left;
        text-align: center;
    }
    .boton1 {
        width: 128px;
        height: 19px;
        font-size: 0.23cm;
        background-color:powderblue;
        float:left;
    }
    .boton2 {
        width: 128px;
        height: 19px;
        font-size: 0.23cm;
        background-color:powderblue;
        float:left;
    }
    .centro{
        width: 375px;
        height: 56px;
        background:blue;
        float:left;
    }
    .logo {
        width: 125px;
        height: 32px;
        background-color: orange;
        float:left;
        text-align: right;
    }
 
    .secciondeslizable {
        width: 250px;
        height: 32px;
        background-color: rgb(255, 192, 75);
        float:left;
    }
 
    .botones34 {
        width: 375px;
        height: 24px;
        background-color: purple;
        float:left;
    }
    .boton3 {
        width: 174px;
        height: 24px;
        font-size: 0.23cm;
        background-color:powderblue;
        float:left;
        text-align: center;
    }
    .boton4 {
        width: 174px;
        height: 24px;
        font-size: 0.23cm;
        background-color:powderblue;
        float:right;
        text-align: center;
    }
 
        .botones56 {
        width: 138px;
        height: 56px;
        background-color: green;
        float:left;
    }
    .boton5 {
        width: 113px;
        height: 19px;
        font-size: 0.23cm;
        background-color: rgb(0, 187, 0);
        float:left;
    }
    .boton6 {
        width: 113px;
        height: 19px;
        font-size: 0.23cm;
        background-color: rgb(0, 187, 0);
        float:left;
    }
 
    .usuario {
        width: 224px;
        height: 56px;
        background-color: rgb(0, 168, 0);
        float:left;
        font-size: 0.2343cm;
    }
 
    .contenido {
        width: 1090px;
        height: 900px;
        background-color: aliceblue;
    }
 
    .piedepagina {
        width: 1090px;
        height: 113px;
        clear: both;
        background-color: blue;
        bottom: 0px;
    }
 
 
</style>
 
</head>
<body class="body">
    <div class="contenedor">
        <div class="cabecera">
            <div class="nombredelsitio"> <h3>Nombre del Sitio</h3> </div>
            <div class="botones12">
                <div class="boton1"> <h3>Boton 1</h3> </div>
                <div class="boton2"> <h3>Boton 2</h3> </div>
            </div>
            <div class="centro">
                <div class="logo"> <h3>Logo</h3> </div>
                <div class="secciondeslizable"> <h3 >Seccion deslizable</h3 ></div>
                <div class="botones34">
                    <div class="boton3"> <h3>Boton 3</h3> </div>
                    <div class="boton4"> <h3>Boton 4</h3> </div>
                </div>
            </div>
                <div class="botones56">
                    <div class="boton5"> <h3>Boton 5</h3> </div>
                    <div class="boton6"> <h3>Boton 6</h3> </div>
                </div>
                <div class="usuario"><h3>Nombre Usuario</h3></div>
            </div>
            <div class="espacio"></div>
    </div>
    <div class="contenido"></div>
    <div class="piedepagina"></div>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil
Val: 10
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Ayuda con posicionamiento de cajas

Publicado por Diego (5 intervenciones) el 14/01/2020 05:32:19
Ahh ya entendí, claro...

Lo había "solucionado" moviendo los botones56 y usuario con una posición relativa y desplazando desde el bottom, pero como me decís es lo mejor y mas correcto.

Si, como decía antes esta recién fue mi primer prueba por eso no sabia esto de las cajas bien. Lo de las class me imagino, debe haber maneras mas cómodas. Sin duda que tengo que aprender un montón pero se que es un camino de ida.

Mil gracias Juan Jose!

Saludos!
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