Foros del Web » Creando para Internet » CSS »

Links con capas ocultas

Estas en el tema de Links con capas ocultas en el foro de CSS en Foros del Web. HOLA! Tengo una página en la que necesito incorporar unas preguntas con sus respectivas respuestas. Lo que quiero es que al lado izquierdo aparezca cada ...
  #1 (permalink)  
Antiguo 16/01/2009, 10:04
 
Fecha de Ingreso: agosto-2008
Mensajes: 20
Antigüedad: 9 años, 3 meses
Puntos: 0
Pregunta Links con capas ocultas

HOLA!
Tengo una página en la que necesito incorporar unas preguntas con sus respectivas respuestas.
Lo que quiero es que al lado izquierdo aparezca cada pregunta como link, y que al hacer click aparezca la respuesta al lado derecho.
En esta página que encontré

http://www.grafikas.es/web_apuntes/galerias.htm#noir

se explica cómo hacer una galería de imágenes sólo con CSS sin Javascript. Yo quiero lograr el mismo efecto pero sólo con texto.
Alguien sabe cómo lo podría hacer?

Mil Gracias de antemano.
  #2 (permalink)  
Antiguo 16/01/2009, 10:27
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Links con capas ocultas

Mikmoro ya hizo lo que quieres aquí lo tienes:

ejemplo
__________________
WFC
codigo82
  #3 (permalink)  
Antiguo 16/01/2009, 11:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Links con capas ocultas

También, si ya tienes el ejemplo en la página que has puesto (http://www.grafikas.es/web_apuntes/galerias.htm#noir
), reemplaza las imágenes por bloques de texto (p o span, por ejemplo), y liesto. Sigue el ejemplo al pie de la letra y no tendrás ningún problema.
Cada vez que en la CSS hace mención a img lo sustituyes por el span o lo que sea que acabes usando y ya está.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 16/01/2009, 12:26
 
Fecha de Ingreso: agosto-2008
Mensajes: 20
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Links con capas ocultas

Intenté hacerlo como tú dices.. Cambié la etiqueta <img> por <p>, sacando el atributo src, pero no me resulta. Además en xhtml dice que no se puede usar la etiqueta <p> dentro de <a>.
Lo otro sería convertir el texto en una imagen para ocupar este mismo código, pero no es lo óptimo.
  #5 (permalink)  
Antiguo 16/01/2009, 12:39
 
Fecha de Ingreso: agosto-2008
Mensajes: 20
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: Links con capas ocultas

Ahora me resultó: Ocupé el código del link que dejó WillyFC



</head>
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
outline: 0;
}
a {
border: 2px outset #A5A5A5;
padding: 1px 8px;
text-decoration: none;
color: #000;
margin-left: 4px;
background-color: #D4D0C8;
font-size: 13px;
font-family: Arial,Helvetica,sans-serif;
line-height: 22px;
}
a:focus, a:active {
background-color: transparent;
border: 2px inset #A5A5A5;
}
a span {
position: absolute;
top: 50px;
left: 3px;
visibility: hidden;
}
a:focus span, a:active span { visibility: visible;}
</style>
</head>
<body>
<a href="#">pregunta 1<span><p>respuesta 1</p></span></a>
<a href="#">pregunta 2<span><p>respuesta 2</p></span></a>
<a href="#">pregunta 3<span><p>respuesta 3</p></span></a>
</body>


Gracias!! Ojalá que les sirva también.
  #6 (permalink)  
Antiguo 16/01/2009, 13:01
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Links con capas ocultas



No me has dado tiempo a decir que usaras span en lugar de p (despiste por ponerte que usaras p o span).
__________________
Visita mi nueva web idplus.org
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 14:55.