Anclajes duda!!

[danipz]

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!

[pzin]

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.

[danipz]

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...

[pzin]

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.

[danipz]

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...

[pzin]

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:

<a href="#unacosa"></a>
<a href="#otracosa"></a>
<a href="#algomas"></a>
 

Y tus elementos:

Código HTML:

<div id="unacosa" class="ancla"></div>
<div id="otracosa" class="ancla"></div>
<div id="algomas" class="ancla"></div>
 

Y luego simplemente le indicas el relleno superior:

Código CSS:

.ancla {
  padding-top: 200px;
}
 

[danipz]

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... :(

[pzin]

Es lo segundo que te dije.

Iniciado por pzin

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.

[danipz]

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