Links con capas ocultas

loredis · #1 (**permalink**) 16/01/2009, 10:04

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.

willyfc · #2 (**permalink**) 16/01/2009, 10:27

Mikmoro ya hizo lo que quieres aquí lo tienes:

ejemplo

Mikmoro · #3 (**permalink**) 16/01/2009, 11:06

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

loredis · #4 (**permalink**) 16/01/2009, 12:26

Intenté hacerlo como tú dices.. Cambié la etiqueta <img> por , sacando el atributo src, pero no me resulta. Además en xhtml dice que no se puede usar la etiqueta dentro de <a>.
Lo otro sería convertir el texto en una imagen para ocupar este mismo código, pero no es lo óptimo.

loredis · #5 (**permalink**) 16/01/2009, 12:39

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 1respuesta 1</a>
<a href="#">pregunta 2respuesta 2</a>
<a href="#">pregunta 3respuesta 3</a>
</body>

Gracias!! Ojalá que les sirva también.

Mikmoro · #6 (**permalink**) 16/01/2009, 13:01

No me has dado tiempo a decir que usaras span en lugar de p (despiste por ponerte que usaras p o span).