Foros del Web » Creando para Internet » CSS »

Problema con Anclas

Estas en el tema de Problema con Anclas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/10/2009, 08:55
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 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!!!.
  #2 (permalink)  
Antiguo 27/10/2009, 10:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con Anclas

¿Y tú crees que esto será un problema de CSS o de Javascript?
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 27/10/2009, 10:35
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Problema con Anclas

Hola!.

Para mi no tiene que ver con el javascript, porque tambien probe quitando el javascript y sigue comportandose de la misma forma.
  #4 (permalink)  
Antiguo 27/10/2009, 11:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con Anclas

Bueno, pues yo creo que CSS no puede controlar a dónde envía un ancla dentro de la página.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 27/10/2009, 12:48
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Problema con Anclas

Entonces el problema es HTML?.
  #6 (permalink)  
Antiguo 27/10/2009, 13:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con Anclas

No he probado en otros navegadores, pero esto así creo que debería funcionar en todos de la misma manera:
Cita:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="top"></div>
<div id="contenedor">
<div id="menu">
<div id="logo"><a href="#top"><img src="imgs/logo-sp.gif" /></a></div>
<ul>
<li><a href="#trabajos">Trabajos</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
<div id="flecha"><a href="#top"><img src="imgs/flecha.gif" alt="Subir"/></a></div>
</div>
<div id="ilustracion"></div>
<div id="cont1">
<div id="trabajos"></div>
<h1>Trabajos</h1>
<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>
<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>
<div id="servicios"></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">
<div id="contacto"></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>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</div>
</body>
</html>
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 27/10/2009, 14:07
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Problema con Anclas

Hola!.

Lo he probado y sigue con el mismo problema.
Puede ser que tenga algo que ver con el diseño de los divs o por como esta armada la estructura?.
  #8 (permalink)  
Antiguo 27/10/2009, 14:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con Anclas

¿Estás seguro de haberlo probado bien? Mira esto

Funciona idéntico en IE6 y 7, FF2 y 3, Chrome, Opera 10, Safari 4, es decir, el titulo de cada sección (el h1, que por cierto es erróneo), queda siempre pegado a la parte superior del navegador, que es lo que debe hacer.
__________________
Visita mi nueva web idplus.org
  #9 (permalink)  
Antiguo 27/10/2009, 14:19
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con Anclas

En ff 3.5 en vi$ta el ejercicio de Mikmoro clava el "ancla" en su sitio. Por si sirve de algo.
Y creo que en el resto de navegadores debería funcionar sin desviaciones.
Otra cosa es con el funcionamiento del js añadido.

Un saludo

ouchhhhhhhhh!! por 1 minuto
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 28/10/2009, 15:15
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Problema con Anclas

Amigos.

Funciona bien lo que posteo Mikmoro. Y me di cuenta donde esta mi problema, en la hoja de estilos.
Cuando saco el link de la hoja de estilos, funciona perfectamente. Cuando vuelvo a agregarla, deja de funcionar.

Estoy probando a modificar el codigo del css, sacando de a poco a ver que puede ser, hasta ahora no tengo buenos resultados.

Vuelvo a poner mi CSS para ver si a alguno se le ocurre donde puede estar el error.

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 */
#titulos{
	border:1px solid #FFF;
	background-color:#0e283f;
	margin:0 0 0 -10px;
	margin-right:550px;
	padding:12px 37px;
	float:left;
	position:relative;
	display:inline;
}
h1{
	font-family:"Times New Roman", Times, serif;
	font-size:18px;
	color:#FFF;
    font-weight:bold;
}
h2{
	font-family:"Times New Roman", Times, serif;
	font-size:14px;
	font-weight:normal;
	color:#0e283f;
	text-align:center;
	margin-top:8px;
}
h3{	
	font-family:"Times New Roman", Times, serif;
	font-size:18px;
	font-weight:bold;
	color:#0e283f;
}
h4{
	font-family:"Times New Roman", Times, serif;
	font-size:14px;
	font-weight:normal;
	color:#757575;
	line-height:20px;
}
h5{
	font-family:"Times New Roman", Times, serif;
	font-size:14px;
	font-weight:normal;
	font-style:italic;
	color:#0e283f;
	line-height:25px;
}
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;
}
#subtitulo1{
	width:300px;
	height:20px;
	margin:15px 0 0 18px;
	padding:0;
	float:left;
	display:inline;
}
#cuadro-cont{
	width:700px;
	margin:15px 0 0 18px;
	padding:0;
	float:left;
	display:inline;
}
#cuadro1{
	width:204px;
	height:157px;
	border:1px solid #B7B7B7;
	background-color:#D6E3E8;
	float:left;
	margin:0 15px 0 0;
	padding:10px 0 0 10px;
	display:inline;
}
#linea1{
	background-image:url(imgs/linea1.gif);
	background-repeat:no-repeat;
	width:718px;
	height:1px;
	margin:20px 0 20px 0;
	float:left;
}
#text-servicios1{
	width:680px;
	margin:25px 18px 0 18px;
	padding:0;
	float:left;
	display:inline;
}
#text-servicios2{
	width:680px;
	margin:25px 18px 25px 18px;
	padding:0;
	float:left;
	display:inline;
}

/* Contacto */
#cont2{
	width:718px;
	background-color:#D9EACE;
	padding:30px 0 0 0;
	margin:0 auto;
	border: #b1c1a7;
	border-style: solid; 
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px;
}
form{
	width:300px;
	margin:25px 18px 0 18px;
	padding:0;
	float:left;
	display:inline;
}
input{ 
	font-family:"Times New Roman", Times, serif;
	width:300px;
	font-size: 14px; 
	color: #0e283f; 
	background-color: #FFF; 
	border: #B1C1A7; 
	border-style: solid; 
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px;
	margin:5px 0 5px 0;
}
textarea{
	font-family:"Times New Roman", Times, serif;
	width:300px;
	font-size: 14px; 
	color: #0e283f; 
	background-color: #FFF; 
	border: #B1C1A7; 
	border-style: solid; 
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px;
	margin:5px 0 15px 0;
}
.submit{
	font-family:"Times New Roman", Times, serif;
	width:80px;
	height:35px;
	font-size: 14px; 
	color: #374C37; 
	background-color: #B1C1A7; 
	border: #FFF; 
	border-style: solid; 
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px;
}
.submit:hover{
	font-family:"Times New Roman", Times, serif;
	width:80px;
	height:35px;
	font-size: 14px; 
	color: #374C37; 
	background-color: #749c72; 
	border: #FFF; 
	border-style: solid; 
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px;
}
h6{
	font-family:"Times New Roman", Times, serif;
	font-size:14px;
	font-weight:normal;
	color:#374C37;
	line-height:20px;
}
#contacto-2{
	width:300px;
	margin:0 0 0 0;
	padding:25px 30px 0 0;
	float:right;
}
#contacto-3{
	width:300px;
	margin:0 0 0 0;
	padding:30px 30px 0 0;
	float:right;
	
}

/* Pie */
#contenedor-pie{
	background-image:url(imgs/pie-fondo.gif);
	background-repeat:repeat-x;
	height:109px;
	margin:0 auto;
	padding:0;
}
#pie{
	background-image:url(imgs/pie.gif);
	background-repeat:repeat-x;
	width:718px;
	height:109px;
	padding:0;
	margin:0 auto;
}
#logo-pie{
	width:201px;
	height:24px;
	padding:51px 0 0 20px;
	margin:0;
	float:left;
}
#facebook{
	width:143px;
	height:24px;
	padding:51px 20px 0 0;
	margin:0;
	float:right;
}
#error{
	margin:0;
	padding:10px;
}
.error{
	font-family:"Times New Roman", Times, serif;
	font-size:16px;
	font-weight:normal;
	color:#0e283f;
	line-height:25px;
}
Desde ya muchas gracias, nuevamente.
  #11 (permalink)  
Antiguo 28/10/2009, 15:48
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Problema con Anclas

Descubri que el problema es el float:left.
El problema ahora es que no se la solucion ja.

Hay alguna manera de engañar o reemplazar al float:left?.
Gracias!.
  #12 (permalink)  
Antiguo 28/10/2009, 15:51
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Problema con Anclas

Perdon. Duplique el mensaje sin querer.

Última edición por juancile; 28/10/2009 a las 15:58
  #13 (permalink)  
Antiguo 28/10/2009, 16:39
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problema con Anclas

Pues volvemos a lo mismo: es prácticamente imposible que un float left haga lo que dices, así que probemos a insertar tu CSS en el código que puse limpio y sin JS. ¿Y qué obtenemos?: que funciona perfectamente, pero que como el menú lo tienes en la cabecera con posición fixed, el titular (h1) de cada sección queda escondida detrás del menú.

Yo, de verdad, la única manera que veo de poder ayudarte es que lo subas a alguna parte y poder verlo en funcionamiento, si no, podemos estar dando palos de ciego eternamente.
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 28/10/2009, 16:49
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Problema con Anclas

Lo estoy probando aqui. Quizas viendo esto me entiendas un poco mas.

Los titulos tienen margin - porque quiero darle un efecto como si estuvieran detras del contenido como esta pagina. Lo cual intenete crearlos con la ayuda del firebug pero no pude, luego vere como hago.
  #15 (permalink)  
Antiguo 28/10/2009, 17:06
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con Anclas

El único que desfasa es "servicios"
Y tienes en el enlace:
Cita:
href="#servicios">Servicios</a>
y en el que debería ser su destino:
Cita:
<div id="titulos">
<h1>Servicios</h1>
</div>
Y por una cuestión de los floats y de que está vacio de contenidos, el div id="servicio" está posicionado junto a "trabajos" es por lo que ahí se dirige el 'ancla'. Ponle un borde y lo verás.
Añade a .servicios un "clear:both" (entre otras varias soluciones posibles y quizás más semánticas)
Lo suyo sería que lo cierres cuando acaben sus contenidos (esto es, que id=servicios englobe
Cita:
<div id="titulos">
<h1>Servicios</h1>
</div>
<div id="text-servicios1">
</div>
<div id="text-servicios2">
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 28/10/2009 a las 17:15
  #16 (permalink)  
Antiguo 28/10/2009, 17:22
 
Fecha de Ingreso: febrero-2009
Mensajes: 176
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: Problema con Anclas

Kseso?!

Funciono perfectamente con los dos comentarios que me hiciste.

Te agradezco muchisimo!.

Veo que todos los dias se aprenden cosas nuevas.
Gracias!.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:34.