Foros del Web » Creando para Internet » CSS »

Caja con multiples pestañas

Estas en el tema de Caja con multiples pestañas en el foro de CSS en Foros del Web. Hola señores Estoy rediseñado mi blog basado en WP. El caso es que la mayoria –incluyendo mis antiguos blog– adolecen de tener una barra lateral ...
  #1 (permalink)  
Antiguo 28/01/2009, 22:02
Avatar de junihh  
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 13 años, 10 meses
Puntos: 7
Busqueda Caja con multiples pestañas

Hola señores

Estoy rediseñado mi blog basado en WP. El caso es que la mayoria –incluyendo mis antiguos blog– adolecen de tener una barra lateral demasiado larga, que a mi parecer lo afean. Me gustaria esa barra con una caja de multiples pestañas por ser una forma elegante e inteligente de mostrar el contenido y ahorrar espacio.

La idea es similar a la que pueden encontrar aqui. Es esa caja bajo Buscar que dice Popular, Comentarios...

No me interesa que me den el codigo, me interesa que me sugieran enlaces con tutoriales donde poder aprender a hacerlo, ya que al aprender me servira para eventualmente poder aplicar a otros trabajos mios o de mis clientes de forma mas personalizada.

Se que hay algunas web que tienen ese efecto usando javascript. Seria posible alguna version de ese efecto solo con CSS, sin necesidad de JS u obligatoriamente debe tenerlo ???

Gracias por cualquier sugerencia, links o ideas que puedan ofrecerme.
__________________
JuniHH
- Mi blog
- Mi portafolio

Última edición por junihh; 28/01/2009 a las 22:10
  #2 (permalink)  
Antiguo 28/01/2009, 23:16
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Respuesta: Caja con multiples pestañas

Más o menos se puede, el problema es que al momento de quitar el ratón de la parte hover, el objeto oculto desaparece. El javascript lo que hace es dejarle la propiedad "pegada".

Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style>a span {display: none;}
a:hover span {display: block; position: absolute; top: 200px;}
</style>
</head>

<body>
<a href="#">Hola<span>Escondido</span></a>

</body>
</html>
  #3 (permalink)  
Antiguo 28/01/2009, 23:20
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 8.954
Antigüedad: 14 años, 9 meses
Puntos: 1802
Respuesta: Caja con multiples pestañas

Acá hay una variante a ver que tal.
Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style>
a {display: block; width: 100px; height: 100px; background-color: #F00;}
a span {display: none;}
a:hover span {display: block; position: absolute; top: 100px; width: 100px; height: 100px; background-color: #0F0;}
</style>
</head>

<body>
<a href="#">Hola<span>Escondido</span></a>


</body>
</html>
Pero no podemos meter un a dentro de otro a o sea no podemos meter links dentro.
La propiedad hover a veces funciona en ciertos navegadores, en ese caso si se podría meter links en el cuadro verde, al no usar a:hover, sino div:hover, pero no es múy estándard que digamos.
  #4 (permalink)  
Antiguo 29/01/2009, 02:18
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: Caja con multiples pestañas

Mira, aquí tienes tres ejemplos de cómo se puede hacer sólo con CSS, en la sección central "ELEMENTOS", pero esos ejemplos son sólo ilustrativos, porque como te dice Rafael, no usan enlaces dentro de enlaces.

Se puede hacer, sin duda, pero para eso habría que combinar esos ejemplos con esta otra técnica

No sería demasiado difícil, pero ahí tienes material para investigar. Si me animo un día de estos lo hago y así ya se queda hecho el ejemplo.
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 29/01/2009, 07:18
Avatar de junihh  
Fecha de Ingreso: febrero-2004
Ubicación: República Dominicana
Mensajes: 997
Antigüedad: 13 años, 10 meses
Puntos: 7
Respuesta: Caja con multiples pestañas

@Rafael: Aunque no es lo que busco esta bastante interesante lo que me muestras, asi que me lo quedo ya que estoy formando una libreria de CSS para lo que sea necesite.

@Mikmoro: Esos ejemplos son muy impresionantes. Justo se encuentra lo que necesito y justo como lo queria. Ya antes habia visto el ejemplo del truco sin esquinas redondeadas pero no conocia de donde procedia. Esos ejemplos los puedo usar para mi libreria... claro, no todos para no plagiar.

A ambos muchisimas gracias por su colaboracion y ayuda, me han valido muchisimo.
__________________
JuniHH
- Mi blog
- Mi portafolio
  #6 (permalink)  
Antiguo 29/01/2009, 08:12
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: Caja con multiples pestañas

Puedes usar lo que quieras: todos los códigos de esta página son libres sin ningún tipo de licenica ni restricción.

Saludos.
__________________
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 23:02.