27/10/2009, 07:55
|
| | | Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 15 años, 2 meses Puntos: 1 | |
| Problema con Anclas
Hola amigos!.
Tengo este codigo para mi web que permite crear anclas en el interior de una pagina y dirigirse a los mismos con efecto smooth (suave, deslizante, etc.).
Mi problema es que cuando se dirije a un ancla, no para donde yo lo coloco exactamente, sino mas arriba o mas abajo.
Y en diferentes navegadores como IE6, IE7, Firefox, Chrome, Opera tiene distintos comportamientos, o sea hay variaciones en la forma de pararse.
Aqui esta el codigo HTML: Código HTML: <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="estilo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="anchor.js"></script>
<title></title>
</head>
<body onload="replaceAnchorLinks()">
<div id="top"><a name="top"></a></div>
<div id="contenedor">
<!--Menú-->
<div id="menu">
<div id="logo"><a href="#top" onclick="smoothScroll('top'); return false"><img src="imgs/logo-sp.gif" /></a></div>
<ul>
<li><a href="#trabajos" onclick="smoothScroll('trabajos'); return false">Trabajos</a></li>
<li><a href="#servicios" onclick="smoothScroll('servicios'); return false">Servicios</a></li>
<li><a href="#contacto" onclick="smoothScroll('contacto'); return false">Contacto</a></li>
</ul>
<div id="flecha"><a href="#top" onclick="smoothScroll('top'); return false"><img src="imgs/flecha.gif" alt="Subir"/></a></div>
</div>
<!--Ilustración-->
<div id="ilustracion"></div>
<!--Contenido-->
<div id="cont1">
<!--Trabajos-->
<div id="trabajos"><a name="trabajos"></a></div>
<h1>Trabajos</h1>
<!--Logotipos-->
<div id="subtitulo1">
<h3>Logotipos</h3>
</div>
<div id="cuadro-cont">
<div id="cuadro1">
<img src="imgs/logo.gif" />
<h2><a href="#">Asd</a></h2>
</div>
<div id="cuadro1">
<img src="imgs/logo.gif" />
<h2><a href="#">Asd</a></h2>
</div>
<div id="cuadro1">
<img src="imgs/logo.gif" />
<h2><a href="#">Asd</a></h2>
</div>
</div>
<!--Diseño Web-->
<div id="subtitulo1">
<h3>Diseño Web</h3>
</div>
<div id="cuadro-cont">
<div id="cuadro1">
<img src="imgs/img.gif" />
<h2><a href="#">Asd</a></h2>
</div>
<div id="cuadro1">
<img src="imgs/img.gif" />
<h2><a href="#">Asd</a></h2>
</div>
</div>
<!--Servicios-->
<div id="servicios"><a name="servicios"></a></div>
<h1>Servicios</h1>
<div id="text-servicios1">
<h4>AsdAsdAsdAsdAsdAsdAsdAsdAsdAsdAsdAsdAsd: </h4>
</div>
<div id="text-servicios2">
<h5><img src="imgs/punto.gif"/>Diseño Web<p><img src="imgs/punto.gif"/>Diseño Gráfico<p><img src="imgs/punto.gif"/>Diseño Interactivo</h5>
</div>
<br clear="all" />
</div>
<div id="cont2">
<!--Contacto-->
<div id="contacto"><a name="contacto"></a></div>
<h1>Contacto</h1>
<form action="" method="post" name="form" cid="form">
<h6><p>Nombre</p>
<p><label><input type="text" name="nombre" id="nombre" /></label></p>
<p>E-mail</p>
<p><label><input type="text" name="mail" id="mail" /></label></p>
<p>Consulta</p>
<p><label><textarea name="mensaje" cols="30" rows="5"></textarea></label></p>
<p><label><input type="submit" name="ingresar" id="ingresar" class="submit" value="Enviar" /></label></p></h6>
</form>
<div id="contacto-2">
<h6><p>AsdAsdAsdAsdAsdAsd.</p> </h6>
<img src="imgs/linea3.gif" />
</div>
</div>
<div id="contenedor-pie">
</div>
</div>
</body>
</html> Aqui esta el codigo CSS:
Código:
@charset "utf-8";
/* CSS Document */
/* CSS Reset */
html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
:focus {
outline: 0;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
body{
font-family:"Times New Roman", Times, serif;
font-size:12px;
margin:0 auto;
padding:0;
}
*{
margin:0;
padding:0;
}
#contenedor{
background-image:url(imgs/fondo1.gif);
background-repeat:repeat-x;
background-color:#f5fbfc;
margin:0 auto;
padding:0;
}
/* Anchors */
#top{
margin:0;
padding:0;
}
#trabajos{
margin:0;
padding:0;
}
#servicios{
margin:0;
padding:0;
}
#contacto{
margin:0;
padding:0;
}
/* Menú */
#menu{
width:735px;
height:42px;
border:1px solid #FFF;
background-color:#0e283f;
padding:0;
margin-top:-1px;
position:fixed;
z-index:100;
left:50%;
margin-left:-370px;
}
* html #menu {
position:absolute;
}
#menu ul{
list-style:none;
margin:2px;
padding:10px;
}
#menu ul li {
float:left;
padding-left:15px;
padding-right:15px;
margin-left:11px;
}
#menu ul li a{
font-size:18px;
text-decoration:none;
color:#FFF;
font-weight:bold;
}
#menu ul li a:hover{
color:#C1EAFF;
}
#logo{
float:left;
margin-left:20px;
margin-right:140px;
height:32px;
width:188px;
padding:10px 0 0 0;
display:inline;
}
#flecha{
float:right;
height:42px;
width:53px;
margin:-24px 0 0 0;
padding:0;
display:inline;
}
/* Ilustracion */
#ilustracion{
background-image:url(imgs/ilustracion.gif);
background-repeat:no-repeat;
width:760px;
height:379px;
padding:0;
margin:0 auto;
}
/* Contenido */
h1{
font-family:"Times New Roman", Times, serif;
font-size:18px;
color:#FFF;
font-weight:bold;
border:1px solid #FFF;
background-color:#0e283f;
margin:0 0 0 -10px;
margin-right:550px;
padding:12px 37px;
float:left;
position:relative;
display:inline;
}
a{
font-family:"Times New Roman", Times, serif;
text-decoration:underline;
color:#0e283f;
}
#cont1{
width:718px;
background-color:#FFF;
padding:0;
margin:0 auto;
border:#CCC;
border-style: solid;
border-top-width: 0;
border-right-width: 1px;
border-bottom-width: 0;
border-left-width: 1px;
}
#cuadro-cont{
width:700px;
margin:15px 0 0 18px;
padding:0;
float:left;
display:inline;
}
#text-servicios1{
width:680px;
margin:25px 18px 0 18px;
padding:0;
float:left;
display:inline;
}
Y el Javascript :
Código:
function currentYPosition() {
if (self.pageYOffset)
return self.pageYOffset;
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
if (document.body.scrollTop)
return document.body.scrollTop;
return 0;
}
function elmYPosition(eID) {
var elm = document.getElementById(eID);
var y = elm.offsetTop;
var node = elm;
while (node.offsetParent && node.offsetParent != document.body) {
node = node.offsetParent;
y += node.offsetTop;
} return y - 60;
}
function smoothScroll(eID) {
var startY = currentYPosition();
var stopY = elmYPosition(eID);
var distance = stopY > startY ? stopY - startY : startY - stopY;
if (distance < 100) {
scrollTo(0, stopY); return;
}
var speed = Math.round(distance / 100);
var step = Math.round(distance / 25);
var leapY = stopY > startY ? startY + step : startY - step;
var timer = 0;
if (stopY > startY) {
for ( var i=startY; i<stopY; i+=step ) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY += step; if (leapY > stopY) leapY = stopY; timer++;
} return;
}
for ( var i=startY; i>stopY; i-=step ) {
setTimeout("window.scrollTo(0, "+leapY+")", timer * speed);
leapY -= step; if (leapY < stopY) leapY = stopY; timer++;
}
}
Como puedo hacer que en todos los navegadores los anclas funcionen igual?
En ningun navegador funcionan todos los anclas correctamente.
Gracias!!!. |