Foros del Web » Creando para Internet » HTML »

Ayuda HTML barra de navegacion.

Estas en el tema de Ayuda HTML barra de navegacion. en el foro de HTML en Foros del Web. Hola! Soy nuevo en esto de hacer paginas web. Me he leido las FAQ sobre el tema y no hay nada relacionado. Expongo mi caso. ...
  #1 (permalink)  
Antiguo 31/01/2011, 05:28
 
Fecha de Ingreso: enero-2011
Mensajes: 5
Antigüedad: 6 años, 10 meses
Puntos: 0
Ayuda HTML barra de navegacion.

Hola!

Soy nuevo en esto de hacer paginas web. Me he leido las FAQ sobre el tema y no hay nada relacionado.

Expongo mi caso.

Tengo una pagina web sencillita con una barra de navegacion y unos div que tienen texto.
La idea que quiero conseguir es que si pincho en algunas de las opciones de la barra de navegacion los div que tienen texto cambien automaticamente.

He buscado en internet y la opcion que he encontrado para solucionarlo es con JavaScrip y de hecho medio funciona, pero a mi lo que realmente me interesa es conseguirlo via html.

¿Alguien sabria explicarme como hacerlo??

Muchas gracias de antemano.
  #2 (permalink)  
Antiguo 31/01/2011, 09:13
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Ayuda HTML barra de navegacion.

Hola:

La única forma de hacerlo con HTML es mediante frames, cosa desaconsejable desde le punto de vista de la indexación en buscadores.

Saludos.

  #3 (permalink)  
Antiguo 31/01/2011, 11:00
 
Fecha de Ingreso: enero-2011
Mensajes: 5
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: Ayuda HTML barra de navegacion.

Muchas gracias por la respuesta.

¿Podrías explicarte un poco mas?

Un saludo!.
  #4 (permalink)  
Antiguo 31/01/2011, 11:31
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Ayuda HTML barra de navegacion.

Una etiqueta <frame> o <iframe> que se conocen también con el nombre de marcos muestran el contenido de otra página web (otro HTML) dentro de una ventana de nuestra página.
Puedes consultar cualquier manual de HTML para más información. Sería demasiado extensa una explicación más detallada.
Usando esta posibilidad, basta con añadir en el enlace de tu barra de navegación la dirección de la página que quieres que aparezca en la ventana/marco añadiendo el atributo target con el nombre del marco donde quieres que aparezca.
  #5 (permalink)  
Antiguo 31/01/2011, 12:31
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.821
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Ayuda HTML barra de navegacion.

mmm no se si este bien o mal hacer esto pero es algo que yo haria si no puedo usar java

Código CSS:
Ver original
  1. html,body{margin:0;padding:0;font:13px 'trebuchet MS'; color:#333;}
  2. a{color:#036;text-decoration:none;}a:hover{color:#f02;}
  3. #Menu{margin:20px;padding:0;list-style:none;}
  4. #Content{margin:20px;overflow:hidden;}
  5. #Content,#Content div{width:400px; height:200px;padding:0;line-height:18px;}

Código HTML:
Ver original
  1. <ul id="Menu">
  2.     <li><a href="#Item1">Item 1</a></li>
  3.     <li><a href="#Item2">Item 2</a></li>
  4.     <li><a href="#Item3">Item 3</a></li>
  5.     <li><a href="#Item4">Item 4</a></li>
  6. </ul>
  7. <div id="Content">
  8.     <div id="Item1"><strong>Contendio 1</strong><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  9.     <div id="Item2"><strong>Contendio 2</strong><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  10.     <div id="Item3"><strong>Contendio 3</strong><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  11.     <div id="Item4"><strong>Contendio 4</strong><br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  12. </div>
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #6 (permalink)  
Antiguo 31/01/2011, 12:46
 
Fecha de Ingreso: enero-2011
Mensajes: 5
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: Ayuda HTML barra de navegacion.

Muchas gracias.

La idea la he cogido, mañana lo pruebo y comento los resultados.

Un saludo!.
  #7 (permalink)  
Antiguo 31/01/2011, 13:00
 
Fecha de Ingreso: enero-2011
Mensajes: 5
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: Ayuda HTML barra de navegacion.

Jejeje, al final he hecho la prueba ahora, y no es exactamente lo que busco. Me explico:

Salvo que esté en un error tu lo que haces es que la pagina principal muestras todos los item, y luego, segun pinches en el en los diferentes <li> vas al que has pinchado.

Yo lo que quiero es que solo aparezca uno y segun vaya pinchando en los diferentes <li> ese item que aparezca se borre y se sustituya por el que he seleccionado.

¿Me he explicado?

Gracias!.
  #8 (permalink)  
Antiguo 31/01/2011, 13:18
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.821
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Ayuda HTML barra de navegacion.

o no lo probaste bien o me estas adivinando el efecto que quise hacer...

ok en el html tiene todo los divs con texto visibles pero tanto al div padre como al hijo le di la misma altura por lo que solo es visible un div a la vez y según escojas en la lista se mostrara unicamente el que selecciones....
te dejo un link al ejemplo funcional de lo que yo pretendí hacer
http://bit.ly/ehjwBs

si no es lo que buscas (aunque realmente me lo saque de la manga) tu única alternativa es usar ajax para cargar contenido externo sin recargar la pagina... o crear varias paginas que dudo sea lo que necesitas
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #9 (permalink)  
Antiguo 31/01/2011, 18:21
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Ayuda HTML barra de navegacion.

La solución que te han dado es bastante simple y funcionaría con otros contenidos dentro de los div.
Yo normalmente utilizo javascript para hacer lo mismo cambiando la propiedad visibility o display de las capas al hacer click en los enlaces.
Creo que lo usaré alguna vez.
  #10 (permalink)  
Antiguo 02/02/2011, 04:11
 
Fecha de Ingreso: enero-2011
Mensajes: 5
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: Ayuda HTML barra de navegacion.

Gracias por las respuestas. Al final he conseguido lo que quería pero opté por la opción de javascript.

El ejemplo anterior valia, pero no quería tener apariencia de texto, aunque estoy de acuerdo que yo tambien lo usaré.

Lo del tema del display, es otra cosa con la que voy a jugar, pero a su debido tiempo.

¿ Tendríais un ejemplo (de lo del display) a mano para echarle un vistazo (ejemplo de la función javascript, me refiero)?

En cualquier caso, no pasa nada.

Muchas gracias.
  #11 (permalink)  
Antiguo 02/02/2011, 21:19
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 6 años, 11 meses
Puntos: 36
Respuesta: Ayuda HTML barra de navegacion.

Imagina el siguiente ejemplo con dos imágenes.

<img id="v1" src="img1.gif" onclick="document.getElementById('v2').style.visib ility='hidden'" />
<img id="v2" src="img2.gif" />

El script de la primera hace que al pulsar sobre ella la segunda ('v2') se oculte. Una tercera podría volver a hacerla visible con el mismo script sustituyendo 'hidden' por 'visible'.
Sencillo ¿no?
Hay bastante documentación sobre JavaScript por la red si quieres aprender y encontrar ejemplos.

Etiquetas: barra, navegacion
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:23.