Foros del Web » Creando para Internet » CSS »

CSS y secciones de la web (JavaScript)

Estas en el tema de CSS y secciones de la web (JavaScript) en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 25/10/2010, 12:40
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 7 años, 1 mes
Puntos: 48
CSS y secciones de la web (JavaScript)

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.
  #2 (permalink)  
Antiguo 25/10/2010, 14:55
Avatar de angelAparicio  
Fecha de Ingreso: julio-2009
Ubicación: Sevilla
Mensajes: 307
Antigüedad: 8 años, 5 meses
Puntos: 22
Respuesta: CSS y secciones de la web (JavaScript)

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:
Ver original
  1. function mostrar (nombreCapa) {
  2. //Ocultas todo
  3. document.getElementById('capa1').style.display="none";
  4. document.getElementById('capa2').style.display="none";
  5. document.getElementById('capa3').style.display="none";
  6. document.getElementById('capa4').style.display="none";
  7.  
  8. //Muestras la que quieres
  9. document.getElementById(nombreCapa).style.display="block";
  10. }
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
__________________
Mis webs:
- Programador Web Autónomo
- Conciertos en Sevilla
  #3 (permalink)  
Antiguo 25/10/2010, 16:10
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 7 años, 1 mes
Puntos: 48
Respuesta: CSS y secciones de la web (JavaScript)

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.
  #4 (permalink)  
Antiguo 26/10/2010, 03:47
Avatar de angelAparicio  
Fecha de Ingreso: julio-2009
Ubicación: Sevilla
Mensajes: 307
Antigüedad: 8 años, 5 meses
Puntos: 22
Respuesta: CSS y secciones de la web (JavaScript)

¿Puedes poner el nuevo código en la web, para verlo en funcionamiento?
__________________
Mis webs:
- Programador Web Autónomo
- Conciertos en Sevilla
  #5 (permalink)  
Antiguo 26/10/2010, 05:54
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 7 años, 1 mes
Puntos: 48
Respuesta: CSS y secciones de la web (JavaScript)

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

http://pastebin.com/FESMsVx9

Gracias y un saludo.
  #6 (permalink)  
Antiguo 26/10/2010, 06:28
Avatar de angelAparicio  
Fecha de Ingreso: julio-2009
Ubicación: Sevilla
Mensajes: 307
Antigüedad: 8 años, 5 meses
Puntos: 22
Respuesta: CSS y secciones de la web (JavaScript)

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.
__________________
Mis webs:
- Programador Web Autónomo
- Conciertos en Sevilla
  #7 (permalink)  
Antiguo 26/10/2010, 06:51
Avatar de ayukkonen  
Fecha de Ingreso: octubre-2010
Ubicación: Sevilla
Mensajes: 355
Antigüedad: 7 años, 1 mes
Puntos: 48
Respuesta: CSS y secciones de la web (JavaScript)

MA - DRE DE DIÓS.

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

¡Muchísimas gracias!

Etiquetas: javascript, secciones
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 00:42.