Foros del Web » Creando para Internet » HTML »

Anclajes duda!!

Estas en el tema de Anclajes duda!! en el foro de HTML en Foros del Web. Hola! Estoy maquetando una web y tengo un problemilla con los anclajes. La web esta montada así: Resumiendo, #cabecera y #menu fixed y el #cuerpo ...
  #1 (permalink)  
Antiguo 17/10/2013, 01:30
 
Fecha de Ingreso: noviembre-2010
Mensajes: 16
Antigüedad: 11 años, 9 meses
Puntos: 0
Anclajes duda!!

Hola!

Estoy maquetando una web y tengo un problemilla con los anclajes.
La web esta montada así:




Resumiendo, #cabecera y #menu fixed y el #cuerpo es el q tiene todo el contenido.

Para desplazarse por el contenido o bien usas las barra de navegación; o a través del menú y la idea era crear anclajes en diferentes partes de el #cuerpo ...

Menu1 / anclaje 1
item 1
item 2
item 3
Menu2 / anclaje 2
item 1
item 2
item 3
Menu3 / anclaje 3
item 1
item 2
item 3

pero me pasa esto cuando por ejemplo clicko el 1er anclaje:





Es decir, llama al anclaje pero me lo pone arriba del todo y queda tapado por la cabecera, es decir no me lo carga dentro del div sino en la página (no se si me explico bien).

No tengo muy claro si la solución tiene relación con los divs o no, o si se puede hacer que las llamadas a los ancajes los baje un poco (si ahora los llama a top:0; que los llamara a top:50, por decir algo...)

Si alguien tiene alguna idea sobre como solucionarlo... se lo agradecería :)

salud!
  #2 (permalink)  
Antiguo 17/10/2013, 01:43
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años
Puntos: 2114
Respuesta: Anclajes duda!!

Lo más simple que se me ocurre es aplicar padding-top al elemento que hace de ancla.

Si por lo que sea eso te rompe el diseño, entonces seguramente no te quede otra que tirar de JavaScript.
  #3 (permalink)  
Antiguo 17/10/2013, 02:45
 
Fecha de Ingreso: noviembre-2010
Mensajes: 16
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Anclajes duda!!

ya lo había probado con estas dos formas...

#cuerpo {
position: absolute;
top: 195px;
left: 200px;
}

#cuerpo {
padding-top:195px;
padding-left: 200px;
}

y no funciona ninguna...

de JavaScript voy pez total...
  #4 (permalink)  
Antiguo 17/10/2013, 02:53
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años
Puntos: 2114
Respuesta: Anclajes duda!!

Pero el padding-top sería para aplicarlo a los elementos que hagan de ancla, como dije. Y le das una valor igual al que tiene de alto #cabeza.

No trabajes con posiciones absolutas para la maquetación, es una práctica bastante mala.
  #5 (permalink)  
Antiguo 17/10/2013, 03:04
 
Fecha de Ingreso: noviembre-2010
Mensajes: 16
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Anclajes duda!!

lo primero q puse es el padding, pero luego por probar mire con el absolut... lo dejo en padding pues :)

por otro lado, despues de responderte pensé un poco y vi a lo q te referías, pero no acabo de sacarlo... lo estoy haciendo así:

html:
<a name="ancla1">
<a name="ancla2">
<a name="ancla3">

css:
#cuerpo a {padding-top: 200px;} /*no hay enlaces dentro de #cuerpo*/

pero solo me funciona con el primero... supongo q a nivel individual tb se podría hacer (cada uno con su padding), pero no lo acabo de ver... ¿alguna pista? ^^

<a name="ancla2" class="x"> así tampoco me tira...
  #6 (permalink)  
Antiguo 17/10/2013, 03:22
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años
Puntos: 2114
Respuesta: Anclajes duda!!

Usa highlight cuando publiques código.

Los anclas en HTML5 se hacen según el identificador del elemento, ya no se usan <a name>.

Tendrías los enlaces así:
Código HTML:
Ver original
  1. <a href="#unacosa"></a>
  2. <a href="#otracosa"></a>
  3. <a href="#algomas"></a>

Y tus elementos:
Código HTML:
Ver original
  1. <div id="unacosa" class="ancla"></div>
  2. <div id="otracosa" class="ancla"></div>
  3. <div id="algomas" class="ancla"></div>

Y luego simplemente le indicas el relleno superior:

Código CSS:
Ver original
  1. .ancla {
  2.   padding-top: 200px;
  3. }
  #7 (permalink)  
Antiguo 17/10/2013, 03:36
 
Fecha de Ingreso: noviembre-2010
Mensajes: 16
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Anclajes duda!!

pero esto funcionaría solo si hubiera un enlace...

y, en mi caso, es una "lista seguida" con varios enlaces, si lo ponemos así, entre los elementos queda el relleno por lo q no queda bien gráficamente... :(
  #8 (permalink)  
Antiguo 17/10/2013, 04:00
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.487
Antigüedad: 20 años
Puntos: 2114
Respuesta: Anclajes duda!!

Es lo segundo que te dije.

Cita:
Iniciado por pzin Ver Mensaje
Si por lo que sea eso te rompe el diseño, entonces seguramente no te quede otra que tirar de JavaScript.
Tendrás que tirar de JavaScript, cancelar el evento del enlace y que haga scroll hacia el elemento menos la altura de la cabecera.
  #9 (permalink)  
Antiguo 17/10/2013, 05:33
 
Fecha de Ingreso: noviembre-2010
Mensajes: 16
Antigüedad: 11 años, 9 meses
Puntos: 0
Respuesta: Anclajes duda!!

oks... me pasaré por el apartado de javascript... pq de html y css aun controlo algo, pero de java, nadadenada...

de todas formas, muchas gracias :)

Etiquetas: página
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 01:40.