CSS y secciones de la web (JavaScript)

[ayukkonen]

Hola a todos,

Estoy realizando un portal, para la asignatura correspondiente a portales de internet.

Comenzamos realizándolo únicamente en HTML, y ahora, estamos añadiendo CSS.

Antes tenía FRAMES, y ahora los he cambiado por CAPAS, claro, la única desventaja de las capas y CSS es que no permite realizar secciones, como antes con los FRAMES... Pero se nos permite utilizar un poco de JavaScript, para realizar las secciones. Pues bien, estoy tratando de hacerlo y no lo consigo hacer funcionar correctamente.

A continuación os dejo la dirección, y el código pertinente, a ver si me podéis ayudar. Os aviso que no sé nada de JavaScript.

Dirección: http://www.telefutbol.es/cssjorge

Código CSS: http://pastebin.com/v6itB1vU

Código HTML: http://pastebin.com/574z2zbR

Bueno, en el código CSS están los estilos evidentemente de todo el portal, de las capas, enlaces, etc...

En el código HTML, en la cabecera está el script que se encarga de ocultar y hacer visible las capas.

Más abajo, veréis Capa1, Capa2, ... hasta la Capa15, esas serían las secciones...

La idea sería que cada vez que se haga clic en una sección, se haga visible la capa correspondiente a esa sección, y que se oculten todas las demás...

No entiendo mucho, y ésta es la única forma que se me ha ocurrido...

Espero vuestras sugerencias, y perdonadme si he infringido alguna regla porque es mi primer post.

Saludos y gracias de antemano.

[angelAparicio]

A ver, puedes hacer algo así. Imaginemos que tienes cuatro capas o secciones:
capa1, capa2, capa3 y capa4

Pues bien, la función mostrar debería ser algo así:

Código Javascript:

function mostrar (nombreCapa) {
//Ocultas todo
document.getElementById('capa1').style.display="none";
document.getElementById('capa2').style.display="none";
document.getElementById('capa3').style.display="none";
document.getElementById('capa4').style.display="none";
 
//Muestras la que quieres
document.getElementById(nombreCapa).style.display="block";
}
 

Es decir, ocultas todas las capas y muestras la que quieres. El código se podría mejorar, pero si eres novato en Javascript, así está bien.

Para ocultar y mostrar elementos no uses visibility, usa display:
http://css.hazunaweb.com/215.php

Espero que te sirva

[ayukkonen]

angelAparicio, gracias por tu pronta respuesta.

He probado el código que me has sugerido. Lo he hecho para las 15 capas que yo utilizo. Antes por defecto me ponía las barras de desplazamiento (overflow), cosa que yo quiero que sea automático, lo cuál recojo con el "overflow: auto", ahora, desde que he puesto el código, no me lo muestra, pero eso no me importa de momento...

Parece que intenta hacer algo, pero no me muestra el contenido de la sección, es decir, el contenido de la capa que se intenta llamar...

¿Qué puede pasar? ¿Alguna sugerencia?

Gracias y un saludo.

[angelAparicio]

¿Puedes poner el nuevo código en la web, para verlo en funcionamiento?

[ayukkonen]

Por supuesto, aquí te dejo el enlace al nuevo código:

http://pastebin.com/FESMsVx9

Gracias y un saludo.

[angelAparicio]

El problema está en los estilos de la capa1, capa2, capa3, capa4, etc...

Tienes que quitar los visibility: hidden; Y en la capa2 y capa3, los margin-top. Así ya debería funcionarte.

[ayukkonen]

MA - DRE DE DIÓS.

Ya funciona al completo, muchas gracias por la ayuda, increíble.

¡Muchísimas gracias!