Qué os parece mi primera "caja de pandora"

Paramericano · #1 (**permalink**) 31/10/2010, 17:32

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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Cuadro CSS</title>
<style type="text/css">
.caja {
   width:200px;
   position:relative;
   }
.pestanya{
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none;
    padding: 10px 5px;
    }
.pestanya:hover{z-index:25; background-color:#E9E9E9}
 
.pestanya .content1, .pestanya .content2, .pestanya .content3, .pestanya .content4, .pestanya .content5 {display: none}
 
.inicio, .pestanya:hover .content1, .pestanya:hover .content2, .pestanya:hover .content3, .pestanya:hover .content4, .pestanya:hover .content5{ 
    display:inline;
    position:absolute;
    left:100%;
    top:0%;
    background-color:#E9E9E9;
    font-weight:bold;
    font-size:2em;
    text-align: center;
    width:350px;
    height:100%;
    }
</style>
</head>
<body bgcolor="orange">
<div class="caja">
<div class="pestanya">Inicio<div class="inicio">Contenido 0</div></div>
<div class="pestanya">Caja I<div class="content1">Contenido I</div></div>
<div class="pestanya">Caja II<div class="content2">Contenido II</div></div>
<div class="pestanya">Caja III<div class="content3">Contenido III</div></div>
<div class="pestanya">Caja IV<div class="content4">Contenido IV</div></div>
<div class="pestanya">Caja V<div class="content5">Contenido V</div></div>
</div>
</body>
</html>

MasterXNicoX · #2 (**permalink**) 31/10/2010, 22:24

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

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

Paramericano · #3 (**permalink**) 01/11/2010, 10:28

Cita:

Iniciado por MasterXNicoX

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.

MasterXNicoX · #4 (**permalink**) 01/11/2010, 22:18

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

Paramericano · #5 (**permalink**) 02/11/2010, 05:42

Cita:

Iniciado por MasterXNicoX

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í:

MasterXNicoX · #6 (**permalink**) 02/11/2010, 09:36

En que navegador lo estás viendo?? Porque creo que no funciona bien en todos... Por lo menos en Chrome no...

ArturoGallegos · #7 (**permalink**) 02/11/2010, 10:41

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

MasterXNicoX · #8 (**permalink**) 02/11/2010, 23:29

Como ya he dicho amigo, Uso la última actualización del Chrome... (7.0.517.41)...

ArturoGallegos · #9 (**permalink**) 02/11/2010, 23:53

jeje perdón por no leer completo y pues se me hace raro yo si pude visualizar correctamente el código del compañero

#10 (**permalink**) 03/11/2010, 03:16

A mi me salio bien, menos en IE6

Por cierto, muy bueno, solo con css!!

MasterXNicoX · #11 (**permalink**) 03/11/2010, 13:44

Si, la verdad esta muy bueno, pero no se por que no se me ve bien... :S

Anonimo12 · #12 (**permalink**) 03/11/2010, 14:01

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 =)

#13 (**permalink**) 03/11/2010, 14:04

No, asi es maquetado, supongo que con solo cambiar los hover por active o visited funcionara como tu dices

Paramericano · #14 (**permalink**) 03/11/2010, 16:05

Cita:

Iniciado por danneg

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**) 03/11/2010, 16:07

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

Paramericano · #16 (**permalink**) 03/11/2010, 16:33

Cita:

Iniciado por danneg

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**) 03/11/2010, 16:35

jaja.. mejor intentalo!! XD

BloodShadow · #18 (**permalink**) 04/11/2010, 10:36

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

Anonimo12 · #19 (**permalink**) 04/11/2010, 11:41

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