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:
#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) :
<!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:
<!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
<!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>