HTML - Pestañas se mueven al hacer click

   
Vista:

Pestañas se mueven al hacer click

Publicado por carlos (3 intervenciones) el 21/03/2013 20:56:16
Estoy haciendo un sitio en internet, en la barra de navegación, tengo el problema que se mueven las pestañas cuando hago click sobre ellas, ese es el problema, explicado un poco más sería (espero ser claro) :
" cuando hago click en las pestañas, que están a la derecha, se desplazan hacia ese lado las que están a la izquierda de dicha pestaña, "luego" al hacer click en una pestaña que se ubica a la izquierda de la pestaña activa, se desplazan a la izquierda, las que están a la derecha de la pestaña que hice click "

Gracias por todo.

estilo-general.css:
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
#navegacion {
	background-color:#000000;
	width:1000px;
	height:42px;
	float:left;
	min-height:35px;
	}
#navegacion ul{
	padding:0px;
	margin:0px;
	list-style:none;
	}
 
#navegacion li{padding:0px; 
	margin: 2px 6px 2px 6px;
	list-style:none;
	float:left;
	}
#navegacion li a{font-family:tahoma;
	font-size:12px;
	color:#313131; 
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	line-height:35px;
	float:left;
	width:105px;
	height:35px;
	background: url(button-color.jpg) no-repeat;
	background-position:bottom;
	padding:1px 4px 0px 4px;
	}
 
 
.activo  {font-family:tahoma;
	font-size:12px;
	color:#313131; 
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	line-height:35px;
	float:left;
	width:105px;
	height:35px;
	background: url(button-blanco.jpg) no-repeat; 						background-position:bottom;
	padding:1px 4px 1px 4px;
	}
#navegacion li a:hover{height:35px; 
	text-decoration:underline;
	color:#313131;
	}


Pestaña.html (sería el inicio) :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="tipo_contenido"  http-equiv="content-type" content="text/html;  charset=utf-8">
	<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<style type="text/css">
	BODY {
	font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 10px 0px 10px 0px;
	text-align: center;
	background-color : #E6F3F4;	
	}
</style>
</head>
<body>
<div id="navegacion"  >
	<ul>
  		<li class="activo">INICIO</li>
		<li><a href="pestaña1.html">PESTAÑA 1</a></li>
		<li><a href="pestaña2.html">PESTAÑA 2</a></li>
	</ul>
	</div>
</body>
</html>


Pestaña1.html:

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="tipo_contenido"  http-equiv="content-type" content="text/html;  charset=utf-8">
	<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<style type="text/css">
	BODY {
	font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 10px 0px 10px 0px;
	text-align: center;
	background-color : #E6F3F4;
 
	}
</style>
</head>
 
<body>
<div id="navegacion"  >
	<ul>
  		<li><a href="pestaña.html">INICIO</a></li>
		<li class="activo">PESTAÑA 1</li>
		<li><a href="pestaña2.html">PESTAÑA 2</a></li>
	</ul>
	</div>
</body>
</html>


Pestaña2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="tipo_contenido"  http-equiv="content-type" content="text/html;  charset=utf-8">
	<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<style type="text/css">
	BODY {
	font: 8pt Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 10px 0px 10px 0px;
	text-align: center;
	background-color : #E6F3F4;
	}
</style>
</head>
<body>
<div id="navegacion"  >
	<ul>
  		<li><a href="pestaña.html">INICIO</a></li>
		<li><a href="pestaña1.html">PESTAÑA 1</a></li>
		<li class="activo">PESTAÑA 2</li>
	</ul>
	</div>
</body>
</html>
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 xve

Pestañas se mueven al hacer click

Publicado por xve (1178 intervenciones) el 22/03/2013 08:43:36
Hola Carlos, he probado tu código, y a mi no se me mueva nada¿?... nos puedes indicar con mas detalle a que te refieres?
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

Pestañas se mueven al hacer click

Publicado por carlos egor@argentina.com (3 intervenciones) el 22/03/2013 21:03:42
Hola Xve,
gracias por responder, te hago llegar una copia de lo que se ve, te pongo las pestañas una abajo de la otra para que vea que la "pestaña 2" estan bien, la de arriba y la de abajo coinciden, en cambio las pestañas "inicio" y "pestaña1" estan desplazadas hacia la derecha, un poco pero si te fijas se ve, y da un aspecto no agradable al navegar, es como que se mueven para un lado.
Espero haber sido claro en la explicación.
Muchas gracias por tu ayuda.
Saludos.
Carlos

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 xve

Pestañas se mueven al hacer click

Publicado por xve (1178 intervenciones) el 24/03/2013 13:08:04
Carlos, comenta la linea:
padding:1px 4px 0px 4px;
de la clase:
#navegacion li a

Creo que lo veras correctamente... coméntanos, 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

Pestañas se mueven al hacer click

Publicado por Carlos (3 intervenciones) el 24/03/2013 18:26:40
Hola Xve,
Había puesto los valores de padding de "#navegacion li a " y el de ".activo" iguales (entre tantas cosas que probé), ahora, como vos me dijiste, comenté el de "#navegacion li a " mientras que el ".activo" lo dejé igual y funciona bien.....pero no deberían tener los mismos valores para que se vean iguales los dos?, en que estoy confundido?

Muchas gracias por tu ayuda.
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