CSS - El menú horizontal no me desordene las pestañas del contenedor

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

El menú horizontal no me desordene las pestañas del contenedor

Publicado por Luis Diego (3 intervenciones) el 03/03/2021 22:05:02
Imagen1

Hola, como se hace para que el menu horizontal no me desordene las pestañas del contenedor. Les agradezco a ustedes que son profesionales una ayuda

saludos
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

El menú horizontal no me desordene las pestañas del contenedor

Publicado por joel (252 intervenciones) el 04/03/2021 07:58:20
Hola Luis, sin ver el código fuente se hace difícil de saber porque razón te sucede... a simple vista parece que el problema es de algún estilo de la parte del menú que se despliega... tienes la web publicada en internet para poder revisarla?
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: 8
Ha aumentado su posición en 2 puestos en CSS (en relación al último mes)
Gráfica de CSS

El menú horizontal no me desordene las pestañas del contenedor

Publicado por Luis Diego (3 intervenciones) el 05/03/2021 00:33:56
Este es mi codigo css del menu

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
*{
  margin: 0;
  padding: 0;
}
div#linea1{
    margin-bottom: auto;
    margin-top: 0px;
	width: 100%;
   	display: block;
	height: 30px;
    background-color:#a7da4e;
}
div#Encabezado{
	width: 100%;
	height: 90px;
	margin-top: 0px;
	margin-bottom: 0px;
	background-color:#389F85;
	padding: 0px;
}
/*formato menu*/
 
header{
  font-family: Helvetica;
  width: 100%;
  margin: 0 auto;/* 0=lo pega arriba / auto=lo centra */
  }
footer {
  border-top: 5px solid #a7da4e;
  background-color: #389F85;
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-top: 3px;
 
}
 
/* FORMATO DE MENU */
 
/* MENU RAIZ */
 
ul{
  list-style: none;
}
 
#menu li>a{
  background-color: #389F85;
  color: white;
  padding: 5px;
  margin-top: 1px;
  margin-left: 1px;
  display: block;
  text-decoration: none;
  min-width: 100px;
  font-size: 12px;
  border-radius:5px 0px 5px 0px;
  z-index:1000;
}
#menu li>a:hover{
  color: #000;
  background-color: #a7da4e;
}
#menu>li{/* Menu  */
  float: left;
  text-align:center;/* alineacion del texto */
}
/* SUB MENU */
#menu>li>ul{
    display: none;
    font-size: 11px;
    text-align: left;
    position: relative;
 
 
}
#menu>li:hover>ul {
    display:block;
}
div#usuario{
    width: auto;
    height: auto;
    margin-top:5px;
    margin-bottom: 5px;
    margin-right: 10px;
    font-size: 12;
    font-family: sans-serif;
    border-radius:5px 0px 5px 0px;
    border:0px solid;
    border-color: #a7da4e;
    float: left;
    display:block;
    padding: 1px;
}
div#box2{
    width: auto;
    height: auto;
    margin-top:5px;
    margin-bottom: 5px;
    margin-right: 10px;
    font-size: 12;
    font-family: sans-serif;
    border-radius:5px 0px 5px 0px;
    border:1px solid;
    border-color: #a7da4e;
    float: left;
    display:block;
    padding: 1px;
}
div#logoSistema{
    width: auto;
    height: auto;
    margin-top:5px;
    margin-bottom: 5px;
    margin-right: 10px;
    font-size: 12;
    font-family: sans-serif;
    border-radius:5px 0px 5px 0px;
    border:0px solid;
    border-color: #a7da4e;
    float: right;
    display:block;
    padding: 5px;
}
.BoxGeneral{
    width:auto;
    height: auto;
    float: left;
    position: absolute;
    left:195px;
    right: 195px;
    padding:6px 16px;
    border:1px solid #92D050;
    border-radius:10px 0px 10px 0px;
    display:block;
    background-color:#fff;
    margin-top:10px;
    color: #f1f3f4;
    text-decoration-line: none;
    text-align: left;
    font-family: sans-serif;
    font-size:12;
    z-index:-1000;
 
}
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

El menú horizontal no me desordene las pestañas del contenedor

Publicado por joel (252 intervenciones) el 05/03/2021 16:17:30
Lo siento mucho luis, pero solo con el CSS no lo se reproducir.
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: 8
Ha aumentado su posición en 2 puestos en CSS (en relación al último mes)
Gráfica de CSS

El menú horizontal no me desordene las pestañas del contenedor

Publicado por Luis Diego (3 intervenciones) el 10/03/2021 16:28:30
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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
<html>
    <title>Supervision: Usuarios</title>
	<meta charset="utf-8"/>
<!--INDICAR LOS ARCHIVOS CSS QUE UTILIZARA LA PAGINA-->
    <link rel="stylesheet" type="text/css" href="../estilos/estilo_menu.css">
    <link rel="stylesheet" type="text/css" href="../estilos/estilo_formularios.css">
    <link rel="stylesheet" type="text/css" href="../estilos/estilo_pestana.css">
    <link rel="stylesheet" type="text/css" href="../estilos/estilo_texto.css">
<!--INDICAR LOS ARCHIVOS FUENTES QUE UTILIZARA LA PAGINA-->
    <link rel="stylesheet" href="fonts/style.css">
<!--INDICAR LOS ARCHIVOS JS QUE UTILIZARA LA PAGINA-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="../java/pestanas.js"></script>
 
<!--BARRA DE USUARIO ESTA REPLICARSE EN TODAS LAS PAGINAS-->
<div id="Encabezado">
        <div id="logosistema">
            <a title="Home" href="index.html"><img src="../imagenes/imagen1.png" width="200" height="70" /></a>
        </div>
     <div id="usuario">
        <h1>NOMBRE DEL SISTEMAl v1.0</h1>
        <h3>Proceso que lo utiliza</h3>
 
        <TxtUserBox><span class="icon-user"></span>USUARIO: nombre usuario</TxtUserBox><!--INFORMACION DEL USUARIO CONECTADO-->
        <TxtUserBox><span class="icon-office"></span>COMPAÑIA DEL USUARIO + ROL</TxtUserBox><!--INFORMACION DEL USUARIO CONECTADO-->
        <TxtUserBox><span class="icon-map2"></span>ZONA DEL USUARIO</TxtUserBox><br><!--INFORMACION DEL USUARIO CONECTADO-->
    </div>
</div>
<!--BARRA DE MENU PRINCIPAL REPETIRSE EN LAS PAGINAS-->
 <header>
  <div id="linea1">
      <nav>
        <ul id="menu">
          <li><a href=""><span class="icon-cog"></span>Mantenimiento</a>
            <ul>
              <li><a href="">Mantenimiento1</a></li>
              <li><a href="">Mantenimiento2</a></li>
              <li><a href="">Mantenimiento3</a></li>
              <li><a href="">Mantenimiento4</a></li>
              <li><a href="">Mantenimiento5</a></li>
              <li><a href="">Mantenimiento6</a></li>
              <li><a href="">Mantenimiento7</a></li>
              <li><a href="">Mantenimiento8</a></li>
            </ul>
          </li>
          <li><a href=""><span class="icon-clipboard"></span>Administrativo</a>
            <ul>
              <li><a href="">Administrativo1</a></li>
              <li><a href="">Administrativo2</a></li>
              <li><a href="">Administrativo3</a></li>
              <li><a href="">Administrativo4</a></li>
              <li><a href="">Administrativo5</a></li>
            </ul>
          </li>
          <li><a href=""><span class="icon-location2"></span>Supervisor</a>
            <ul>
              <li><a href="punto_venta.html">Negocios</a></li>
              <li><a href="">Negocios1</a></li>
              <li><a href="">Negocios2</a></li>
              <li><a href="">Negocios3</a></li>
              <li><a href="">Negocios4</a></li>
            </ul>
          </li>
          <li><a href=""><span class="icon-briefcase"></span>Ejecutivos</a>
            <ul>
              <li><a href="">Ejecutivos1</a></li>
            </ul>
          </li>
          <li><a href=""><span class="icon-books"></span>Adm. Contrato</a>
 
          </li>
         <li><a href=""><span class="icon-user-tie"></span>Gerencia</a>
 
          </li>
          <li><a href=""><span class="icon-stats-dots"></span>Reportes</a>
            <ul>
              <li><a href="">Reportes1</a></li>
              <li><a href="">Reportes2</a></li>
              <li><a href="">Reportes3</a></li>
              <li><a href="">Reportes4</a></li>
              <li><a href="">Reportes5</a></li>
              <li><a href="">Reportes6</a></li>
              <li><a href="">Reportes7</a></li>
            </ul>
          </li>
             <li><a href=""><span class="icon-flag"></span>Marca</a>
            <ul>
              <li><a href="">Marca1</a></li>
              <li><a href="">Marca2</a></li>
              <li><a href="">Marca3</a></li>
              <li><a href="">Marca4</a></li>
              <li><a href="">Marca5</a></li>
            </ul>
            </li>
            <li><a href=""><span class="icon-gift"></span>Premios</a>
            <ul>
              <li><a href="">Premios1</a></li>
              <li><a href="">Premios2</a></li>
              <li><a href="">Premios3</a></li>
            </ul>
          </li>
        </ul>
      </nav>
      </div>
    </header>
 
 
 
<!--LO QUE CAMBIA ES EL BODY DE LAS PAGINAS-->
<body>
<body onload="javascript:cambiarPestanna(pestanas,pestana1);">
      <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
        <div class="contenedor">
 
            <div id="pestanas">
                <ul id=lista>
                    <li id="pestana1"><a href='javascript:cambiarPestanna(pestanas,pestana1);'>Perfil</a></li>
                    <li id="pestana2"><a href='javascript:cambiarPestanna(pestanas,pestana2);'>Contacto</a></li>
                    <li id="pestana3"><a href='javascript:cambiarPestanna(pestanas,pestana3);'>Organizacion</a></li>
                    <li id="pestana4"><a href='javascript:cambiarPestanna(pestanas,pestana4);'>Seguridad</a></li>
                    <li id="pestana5"><a href='javascript:cambiarPestanna(pestanas,pestana5);'>Facturacion</a></li>
 
                </ul>
            </div>
 
 
 
<div id="contenidopestanas">
<div id="cpestana1">
 
<fieldset>
 <legend>Datos personales</legend>
    <etiqueta>Tipo ID:</etiqueta><select name="menu" tabindex='3'>
      <option value="1" selected>Nacional</option>
      <option value="2">DIMEX</option>
      <option value="3">Pasaporte</option>
</select><br>
<etiqueta>Identificacion:</etiqueta><input type="text" name="Identificacion" size="30" placeholder="Doc. Identificacion" tabindex='4'><br>
<etiqueta>Nombre:</etiqueta><input type="text" name="nombre" size="30" placeholder="Nombre, 1 Apellido, 2 Apellido"><br>
<etiqueta>Genero</etiqueta><select name="menu">
  <option value="1">Masculino</option>
  <option value="3">Otro</option>
</select><br>
<etiqueta>Nacionalidad</etiqueta><select name="menu">
   <option value="2">Extranjero</option>
  </select><br>
<etiqueta>Nacimiento:</etiqueta><input type="date" name="fecha">
 <etiqueta>Subir Foto<input type="file" name="foto_usuario"></etiqueta>
</fieldset><br>
 
<fieldset>  <legend>Calidades</legend>
 <etiqueta>Estado Civil:</etiqueta><select name="menu">
  <option value="1" selected>Solteria</option>
  <option value="2">Matrimoni</option>
  <option value="3">Union Libre</option>
  <option value="4">Divorciado</option>
  <option value="5">Viudo</option>
</select><br>
<etiqueta>Escolaridad:</etiqueta><select name="menu">
  <option value="1" selected>Primaria Incompleta</option>
  <option value="2">Primaria Completa</option>
  <option value="3">Secundaria Incompleta</option>
  <option value="4">Secundaria Completa</option>
  <option value="5">Estudios Universitario</option>
  <option value="6">Bachiler</option>
  <option value="7">Licenciatura</option>
  <option value="8">Maestria</option>
  </select><br>
<etiqueta>Ingreso Promedio</etiqueta><select name="menu">
  <option value="1">$1.00 -> $100.000.00</option>
  <option value="2">$100.000 -> $250.000.00</option>
  <option value="3">$250.000 -> $500.000.00</option>
  <option value="4">$500.000 -> $750.000.00</option>
  <option value="5">$750.000 -> $1.000.000.00</option>
  <option value="6">$1.000.000</option>
</select><br>
<etiqueta>Hijos</etiqueta><select name="menu">
  <option value="1">Si</option>
  <option value="2">No</option>
</select><br>
<etiqueta>Lugar de Trabajo</etiqueta><select name="menu">
  <option value="1">Sector Privado</option>
  <option value="2">Sector Publico</option>
</select><br>
</fieldset>
<a class="button" onclick="usrpas()"><button1>Continuar<txtenfasis> 1 de 5</txtenfasis></button1><br>
</div>
 
<div id="cpestana2">
<fieldset>  <legend>Medio de Contacto</legend>
<etiqueta>Tipo:</etiqueta><select name="menu">
    <option value="1">Movil Personal</option>
    <option value="2">Movil Laboral</option>
    <option value="3">Fijo Residencial</option>
    <option value="4">Fijo Laboral</option>
    <option value="5">Email Personal</option>
    <option value="6">Email Laboral</option>
</select><br>
<etiqueta>Numero Telefonico:</etiqueta><input type="text" name="Identificacion" size="30" placeholder="0000-0000"><br>
<etiqueta>Email:</etiqueta><input type="text" name="Identificacion" size="30" placeholder="usuario@dominio.com"><br>
</fieldset>
 
<fieldset>  <legend>Direcciones</legend>
<etiqueta>Tipo:</etiqueta><select name="menu">
    <option value="1">Residencial</option>
    <option value="2">Laboral</option>
    <option value="3">Otro</option>
</select><br>
<etiqueta>Provincia:</etiqueta><select name="menu">
    <option value="1">Provincia1</option>
    <option value="2">Provincia2</option>
    </select><br>
<etiqueta>Canton:</etiqueta><select name="menu">
    <option value="1">Programar por Provincia</option>
</select><br>
<etiqueta>Distrito:</etiqueta><select name="menu">
    <option value="1">Programar por Canton</option>
</select><br>
<etiqueta>Barrio:</etiqueta><select name="menu">
    <option value="1">Programar por Distrito</option>
</select><br>
<etiqueta>Otras Señas:</etiqueta><input type="text" name="Identificacion" size="30" placeholder="Use Referencias y Puntos Cardinales"><br><etiqueta>GPS:</etiqueta><input type="text" name="Identificacion" size="30" placeholder="latitud;longitud"><br>
</fieldset>
<a class="button" onclick="usrpas()"><button1>Continuar<txtenfasis> 2 de 5</txtenfasis></button1><br>
                </div>
<div id="cpestana3">
 
<fieldset>  <legend>Roles en Sistema</legend>
<etiqueta>Rol:</etiqueta><select name="menu">
    <option value="1">Administrador</option>
    <option value="2">Supervisor</option>
    <option value="3">Ejecutivo</option>
    <option value="4">Adm.Contrato</option>
    <option value="5">Gerencia</option>
    <option value="5">Marca</option>
</select><br>
    <etiqueta>Contraseña:</etiqueta><input type="password" name="Identificacion" size="30" placeholder="Contraseña"><br>
    <etiqueta>Valida Contraseña:</etiqueta><input type="password" name="Identificacion" size="30" placeholder="Valida Contraseña"><br>
</fieldset>
<fieldset>  <legend>Nivel Organizacional</legend>
<etiqueta>Nivel I:</etiqueta><select name="menu">
    <option value="1">Empresas</option>
</select><br>
<etiqueta>Nivel II:</etiqueta><select name="menu">
    <option value="1">Segun Nivel I</option>
</select><br>
<etiqueta>Nivel III:</etiqueta><select name="menu">
    <option value="1">Segun Nivel II</option>
</select><br>
<etiqueta>Nivel IV:</etiqueta><select name="menu">
    <option value="1">Segun Nivel III</option>
</select><br>
<etiqueta>Autorizador:</etiqueta><select name="menu">
    <option value="1">Segun Nivel IV</option>
</select><br>
</fieldset>
        <a class="button" onclick="usrpas()"><button1>Continuar<txtenfasis> 3 de 5</txtenfasis></button1><br>
</div>
 
<div id="cpestana4">
<fieldset><legend>Accesos a Pantallas</legend>
 
<fieldset>
  <legend>Mantenimiento</legend>
   <p>
    <input type="checkbox" name="p1" value="Si"> Mantenimiento1<br>
    <input type="checkbox" name="p1" value="Si"> Mantenimiento2<br>
    <input type="checkbox" name="p1" value="Si"> Mantenimiento3<br>
    <input type="checkbox" name="p1" value="Si"> Mantenimiento4<br>
    <input type="checkbox" name="p1" value="Si"> Mantenimiento5<br>
    <input type="checkbox" name="p1" value="Si"> Mantenimiento6<br>
  </p>
</fieldset>
<fieldset>
  <legend>Administrativo</legend>
   <p>
    <input type="checkbox" name="p1" value="Si"> Administrativo1<br>
    <input type="checkbox" name="p1" value="Si"> Administrativo2<br>
    <input type="checkbox" name="p1" value="Si"> Administrativo3<br>
    <input type="checkbox" name="p1" value="Si"> Administrativo4<br>
    <input type="checkbox" name="p1" value="Si"> Administrativo5<br>
   </p>
</fieldset>
<fieldset>
  <legend>Supervisor</legend>
   <p>
    <input type="checkbox" name="p1" value="Si"> Supervisor1<br>
    <input type="checkbox" name="p1" value="Si"> Supervisor2<br>
    <input type="checkbox" name="p1" value="Si"> Supervisor3<br>
    <input type="checkbox" name="p1" value="Si"> Supervisor4<br>
    <input type="checkbox" name="p1" value="Si"> Supervisor5<br>
   </p>
</fieldset>
</fieldset>
<a class="button" onclick="usrpas()"><button1>Continuar<txtenfasis> 4 de 5</txtenfasis></button1><br>
</div>
<div id="cpestana5">
 
                   hola mundo
                </div>
                <div id="cpestana7">
                  <p>Se puede incluir cualquier tag html sin problemas, como por ejemplo html embebido con object.</p>
                   <object width="1000" height="400" data="https://codepen.io/isc7" type="text/html"></object>
                </div>
            </div>
 
 
        </div>
    <body></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
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

El menú horizontal no me desordene las pestañas del contenedor

Publicado por joel (252 intervenciones) el 12/03/2021 18:12:30
Hola Luis, una manera simple, es cambiar el estilo de #menu>li>ul, de
1
position: relative;
a
1
position:absolute;

Coméntanos si te sirve, ok?
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