Foros del Web » Creando para Internet » CSS »

Qué os parece mi primera "caja de pandora"

Estas en el tema de Qué os parece mi primera "caja de pandora" en el foro de CSS en Foros del Web. Aquí va mi primera obra de arte, simplemente es copiar y pegar a un archivo html vacío. Ahora mismo la llamo "caja que muestra diferentes ...
  #1 (permalink)  
Antiguo 31/10/2010, 18:32
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 7 años, 4 meses
Puntos: 8
Qué os parece mi primera "caja de pandora"

Aquí va mi primera obra de arte, simplemente es copiar y pegar a un archivo html vacío.
Ahora mismo la llamo "caja que muestra diferentes temas" y es puro CSS.

Qué os parece?


Código HTML:
Ver original
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3. <title>Cuadro CSS</title>
  4. <style type="text/css">
  5. .caja {
  6.    width:200px;
  7.    position:relative;
  8.    }
  9. .pestanya{
  10.     z-index:24; background-color:#ccc;
  11.     color:#000;
  12.     text-decoration:none;
  13.     padding: 10px 5px;
  14.     }
  15. .pestanya:hover{z-index:25; background-color:#E9E9E9}
  16.  
  17. .pestanya .content1, .pestanya .content2, .pestanya .content3, .pestanya .content4, .pestanya .content5 {display: none}
  18.  
  19. .inicio, .pestanya:hover .content1, .pestanya:hover .content2, .pestanya:hover .content3, .pestanya:hover .content4, .pestanya:hover .content5{
  20.     display:inline;
  21.     position:absolute;
  22.     left:100%;
  23.     top:0%;
  24.     background-color:#E9E9E9;
  25.     font-weight:bold;
  26.     font-size:2em;
  27.     text-align: center;
  28.     width:350px;
  29.     height:100%;
  30.     }
  31. </head>
  32. <body bgcolor="orange">
  33. <div class="caja">
  34. <div class="pestanya">Inicio<div class="inicio">Contenido 0</div></div>
  35. <div class="pestanya">Caja I<div class="content1">Contenido I</div></div>
  36. <div class="pestanya">Caja II<div class="content2">Contenido II</div></div>
  37. <div class="pestanya">Caja III<div class="content3">Contenido III</div></div>
  38. <div class="pestanya">Caja IV<div class="content4">Contenido IV</div></div>
  39. <div class="pestanya">Caja V<div class="content5">Contenido V</div></div>
  40. </div>
  41. </body>
  42. </html>

Última edición por Paramericano; 31/10/2010 a las 18:37
  #2 (permalink)  
Antiguo 31/10/2010, 23:24
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 9 años, 6 meses
Puntos: 28
Respuesta: Qué os parece mi primera "caja de pandora"

Yo uso Google Chrome y veo:

---------------------
Inicio
Contenido 0
---------------------
Caja I
Contenido I
---------------------
Caja II
Caja III
Caja IV
Caja V
---------------------

y al Pasar el Mouse ensima de las palabras; los fondos de las mismas cambian de Gris Oscuro a Gris Claro...

-------------------------------------------------------------------

Si es eso lo que querías lograr está bueno...
Pero no le veo mucha utilidad jeje...

-------------------------------------------------------------------
__________________
Adivino del Foro y Admirador de Sabios
  #3 (permalink)  
Antiguo 01/11/2010, 11:28
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 7 años, 4 meses
Puntos: 8
Respuesta: Qué os parece mi primera "caja de pandora"

Cita:
Iniciado por MasterXNicoX Ver Mensaje
Yo uso Google Chrome y veo:

---------------------
Inicio
Contenido 0
---------------------
Caja I
Contenido I
---------------------
Caja II
Caja III
Caja IV
Caja V
---------------------

y al Pasar el Mouse ensima de las palabras; los fondos de las mismas cambian de Gris Oscuro a Gris Claro...

-------------------------------------------------------------------

Si es eso lo que querías lograr está bueno...
Pero no le veo mucha utilidad jeje...

-------------------------------------------------------------------
Estoooo..., acabo de probarlo en Chrome y a mí si me funciona. Por lo que dices tú, algo te sale mal, quizás no lo has copiado todo bien.
  #4 (permalink)  
Antiguo 01/11/2010, 23:18
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 9 años, 6 meses
Puntos: 28
Respuesta: Qué os parece mi primera "caja de pandora"

Lo copié tal cual amigo... por eso me pareció raro... je...

Mira, te pongo una Imágen de la parte del contenido, lo demás lo veo Naranja...



Uso la última actualización del Chrome... (7.0.517.41)...
__________________
Adivino del Foro y Admirador de Sabios
  #5 (permalink)  
Antiguo 02/11/2010, 06:42
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 7 años, 4 meses
Puntos: 8
Respuesta: Qué os parece mi primera "caja de pandora"

Cita:
Iniciado por MasterXNicoX Ver Mensaje
Lo copié tal cual amigo... por eso me pareció raro... je...

Mira, te pongo una Imágen de la parte del contenido, lo demás lo veo Naranja...



Uso la última actualización del Chrome... (7.0.517.41)...
Pues qué raro!!! Yo allí donde lo pongo me sale así:

  #6 (permalink)  
Antiguo 02/11/2010, 10:36
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 9 años, 6 meses
Puntos: 28
Respuesta: Qué os parece mi primera "caja de pandora"

En que navegador lo estás viendo?? Porque creo que no funciona bien en todos... Por lo menos en Chrome no...
__________________
Adivino del Foro y Admirador de Sabios
  #7 (permalink)  
Antiguo 02/11/2010, 11:41
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Qué os parece mi primera "caja de pandora"

que versión del chrome usas? yo uso la 7.0.5 y funciona bien :)

código probado en IE8, FF 3.612, Safari 5.0.2 y todo muy bien
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #8 (permalink)  
Antiguo 03/11/2010, 00:29
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 9 años, 6 meses
Puntos: 28
Respuesta: Qué os parece mi primera "caja de pandora"

Como ya he dicho amigo, Uso la última actualización del Chrome... (7.0.517.41)...
__________________
Adivino del Foro y Admirador de Sabios
  #9 (permalink)  
Antiguo 03/11/2010, 00:53
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.827
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Qué os parece mi primera "caja de pandora"

jeje perdón por no leer completo y pues se me hace raro yo si pude visualizar correctamente el código del compañero
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #10 (permalink)  
Antiguo 03/11/2010, 04:16
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 4 meses
Puntos: 48
Respuesta: Qué os parece mi primera "caja de pandora"

A mi me salio bien, menos en IE6






Por cierto, muy bueno, solo con css!!
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #11 (permalink)  
Antiguo 03/11/2010, 14:44
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 9 años, 6 meses
Puntos: 28
Respuesta: Qué os parece mi primera "caja de pandora"

Si, la verdad esta muy bueno, pero no se por que no se me ve bien... :S
__________________
Adivino del Foro y Admirador de Sabios
  #12 (permalink)  
Antiguo 03/11/2010, 15:01
 
Fecha de Ingreso: abril-2009
Ubicación: En foros del web, normalmente en Web general, HTML y CSS.
Mensajes: 258
Antigüedad: 8 años, 8 meses
Puntos: 3
Respuesta: Qué os parece mi primera "caja de pandora"

Está muy bien el trabajillo, pero una cosa: ¿Es cosa mia o cuando quitas el ratón de encima de la caja retorna a "Inicio"?, estaría bien que al seleccionar una caja se mantuviera en ella.

Buen trabajo, saludos =)
__________________
¿Por qué Anónimo?, porque como está el mundo no podemos considerarnos humanos...
  #13 (permalink)  
Antiguo 03/11/2010, 15:04
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 4 meses
Puntos: 48
Respuesta: Qué os parece mi primera "caja de pandora"

No, asi es maquetado, supongo que con solo cambiar los hover por active o visited funcionara como tu dices
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #14 (permalink)  
Antiguo 03/11/2010, 17:05
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 7 años, 4 meses
Puntos: 8
Respuesta: Qué os parece mi primera "caja de pandora"

Cita:
Iniciado por danneg Ver Mensaje
No, asi es maquetado, supongo que con solo cambiar los hover por active o visited funcionara como tu dices
En efecto, "hover" funciona así: sólo cuando pasas el cursor por encima. Y las cajas todas funcionan ahora mismo con hover.
No sé qué pasaría probando con visited, o active. Tengo que probarlo...
  #15 (permalink)  
Antiguo 03/11/2010, 17:07
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 4 meses
Puntos: 48
Respuesta: Qué os parece mi primera "caja de pandora"

pues pas que cuando pasas el cursor no se cambia, pero cuando selecciones algun item se cambia y mantiene su posicion hasta cambiar de seleccion
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #16 (permalink)  
Antiguo 03/11/2010, 17:33
Avatar de Paramericano  
Fecha de Ingreso: agosto-2010
Mensajes: 137
Antigüedad: 7 años, 4 meses
Puntos: 8
Respuesta: Qué os parece mi primera "caja de pandora"

Cita:
Iniciado por danneg Ver Mensaje
pues pas que cuando pasas el cursor no se cambia, pero cuando selecciones algun item se cambia y mantiene su posicion hasta cambiar de seleccion
A si? Ah, pues casi que mejor y todo, jeje.
  #17 (permalink)  
Antiguo 03/11/2010, 17:35
Avatar de danneg  
Fecha de Ingreso: agosto-2009
Ubicación: Todo un mundo de posibilidades
Mensajes: 856
Antigüedad: 8 años, 4 meses
Puntos: 48
Respuesta: Qué os parece mi primera "caja de pandora"

jaja.. mejor intentalo!! XD
__________________
- Daniel García (@dannegm)
- [follow me | fork me on github...]
  #18 (permalink)  
Antiguo 04/11/2010, 11:36
Avatar de BloodShadow  
Fecha de Ingreso: marzo-2010
Ubicación: El Salvador
Mensajes: 393
Antigüedad: 7 años, 8 meses
Puntos: 52
Respuesta: Qué os parece mi primera "caja de pandora"

mmmm no se si este mensaje es anterior o despues del que acabo de estar viendo donde dices "QUE VIVAN LAS TABLAS".... si este es el ultimo, pues te felicito y espero sigas aprendiendo, si el otro es el ultimo... es xq te rendiste y no aprendiste nada de css jajaja
  #19 (permalink)  
Antiguo 04/11/2010, 12:41
 
Fecha de Ingreso: abril-2009
Ubicación: En foros del web, normalmente en Web general, HTML y CSS.
Mensajes: 258
Antigüedad: 8 años, 8 meses
Puntos: 3
Respuesta: Qué os parece mi primera "caja de pandora"

El otro tema es posterior, se rindió después de hacer esto (según las fechas de los mensajes)

Ánimo que se aprende a base de práctica
__________________
¿Por qué Anónimo?, porque como está el mundo no podemos considerarnos humanos...

Etiquetas: primera
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 11:15.