Ayudenme con pestañas en 3D!!

ravalos7 · #1 (**permalink**) 07/04/2009, 16:20

Amigos, tengo una idea loca que no me ha resultado.

Estoy haciendo unas pestañas (como las típicas con ajax y css) pero en 3d, vale decir que en vez de posicionarse una al lado de la otra, vayan encima una de las otras.

He tratado de posicionar los div con css mas el uso de zindex para la profundidad pero sin resultado, pues se ubican linealmente hacia abajo, uno luego del otro y no encima que es lo que busco, a fin de cambiar su posicion dinamicamente con javascript, manipulando su zindex.

Como dijeron en el chapulin colorado... quien podra ayudarme??

Desde Chile un abrazo a la distancia,

Ricardo

safe · #2 (**permalink**) 07/04/2009, 20:58

Lo que tienes que usar son posiciones absolutas.
Un ejemplo seria el siguiente (aunque supongo que queras el efecto al reves: que el primer enlace sea el pequeño y vayan creciendo hacia "adelante"):

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Documento sin t&iacute;tulo</title>
	<style type="text/css">
	<!--
	li { position:relative; height:20px; text-align:center; width:100px; }
	a { display:block; height:20px; position:absolute; }
	a.e1 { background-color:#FF0; left:-20px; padding:20px; top:-20px; }
	a.e2 { background-color:#F60; border-bottom:2px solid #F30; border-right:2px solid #F30; left:-10px; padding:10px; top:-10px; }
	a.e3 { background-color:#C00; border-bottom:2px solid #600; border-right:2px solid #600;  }
	-->
	</style>
</head>
<body>
<ul>
	<li>
		<a href="#" class="e1">enlace 1</a>
		<a href="#" class="e2">enlace 2</a>
		<a href="#" class="e3">enlace 3</a>
	</li>
</body>
</html>

Obviamente eso es un ejemplo de como lograr que los enlaces queden uno arriba del otro, pero falta añadirle el diseño y el comportamiento....

ravalos7 · #3 (**permalink**) 07/04/2009, 21:50

Gracias Safe por tu respuesta.

Voy a probar tu ejemplo y te cuento.

Gracias!!!!!!!!!!!

caricatos · #4 (**permalink**) 08/04/2009, 00:45

Hola:

Tal vez te sirva esto: Sistema de pestañas... y accesible... no entiendo bien lo de 3D

Saludos

ravalos7 · #5 (**permalink**) 10/04/2009, 14:02

Ante todo gracias por querer ayudar amigo Caricatos.

Lo de pestañas 3d es una idea bien simple, pero que podria quedar bonito:

En Windows, cuando tienes varias ventanas abiertas y das un clic derecho sobre la barra de tareas, luego entras en organizar como cascada, todas las ventanas quedan unas sobre otras, viendose solo su barra de titulo para que al clickearla, la ventana se ponga en primer termino.

La idea de las pestañas 3d es exactamente lo mismo. Capas que se superpongan, con efecto de profundidad de tal modo que al hacer clic se vayan poniendo en primer término, exactamente igual que con las ventanas de Windows.

Saludos y gracias por su ayuda,

Ricardo