mostrar etiqueta DIV

oskar5 · #1 (**permalink**) 04/01/2012, 11:09

hola todos por favor una ayuda

tengo este codigo pero quiero q la etiqueta se muestre hacia arriba es decir q aparezca hacia arriba no hacia abajo .. COMO LO HAGO?? muchas gracias porfavor muestremen con codigo como podria hacerlo.

Código:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">


</script>
<style type="text/css">
#apDiv1 {
	position:relative;
	width:240px;
	height:33px;
	z-index:1;
	transition:height 2s;
	-moz-transition:height 2s;
	-webkit-transition:height 2s;
	-o-transition:height 2s;

	background-image: url(pesta%C3%B1ainferior.png);
	}
#apDiv1:hover{
		height:337px;
		top:auto;
	}


</style>
</head>
<body>

<div id="apDiv1"></div>


</body>
</html>

C2am · #2 (**permalink**) 04/01/2012, 13:37

Hola oskar
Bueno, jugando un poco hice esto.

Espero que te sirva.
Copio el código para que quede también en el foro (por si el enlace no funciona)

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
 
 
<h3>Transiciones horizontales</h3>
<div id="horizontal">
<div id="izq">De Izquierda a Derecha</div>
 
<div id="der">De Derecha a Izquierda</div>
</div>
 
 
 
<h3>Transiciones verticales</h3>
<div id="vertical">
 
<div id="arriba">De Arriba a Abajo</div>
<div id="abajo">De Abajo a Arriba</div>
 
</div>
</body>
</html>

Y el css:

Código CSS:

Ver original#horizontal{
position:relative;
width: 200px;
height:200px;
border: 1px solid #C30;
}
 
#izq, #der, #arriba, #abajo
{
width: 100px;
height:100px;
font-size:14px;
color:#FFF;
text-align:center;
}
 
#izq
{
 position:relative; 
 background-color:red;
 transition-property:width 1s linear  2s;
/* Firefox 4 */
-moz-transition:width 1s linear 1s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}
 
#der
{   
    position:absolute;
    right:0px;
    background-color:blue;
    transition-property:width 1s linear 2s;
    /* Firefox 4 */
-moz-transition:width 1s linear 2s;
    /* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
    /* Opera */
-o-transition:width 1s linear 2s;
}
 
#izq:hover, #der:hover
{
width:200px;
}
 
#vertical{
position:relative;
width:200px;
height:200px;
border:1px solid #C30;
}
 
#arriba
{   
   position:relative;
    background-color:#F63;
    transition-property:height 1s linear 2s;
    /* Firefox 4 */
-moz-transition:height 1s linear 2s;
    /* Safari and Chrome */
-webkit-transition:height 1s linear;
    /* Opera */
-o-transition:height 1s linear 2s;
}
#abajo
{
    position:absolute;
    left:100px;
    bottom:0px;
    background-color:#939;
    transition-property:height 1s linear 2s;
    /* Firefox 4 */
-moz-transition:height 1s linear 2s;
    /* Safari and Chrome */
-webkit-transition:height 1s linear 2s;
    /* Opera */
-o-transition:height 1s linear 2s;
}
#arriba:hover, #abajo:hover
{
    height:200px;
}

PD: Si alguien lo quiere mejorar bienvenido sea. O si ve alguna bestialidad siéntase con el derecho de aportar su critica constructiva
PD: otro ejemplo con mas movimientos

oskar5 · #3 (**permalink**) 04/01/2012, 20:35

genial pero no me ha querido correr en mozilla q pasara????????

mariomon17 · #4 (**permalink**) 04/01/2012, 20:41

@C2am solo ha utilizado el prefijo privativo en su ejemplo para webkit. Si quieres que corra en Firefox, Opera, IE (arrg) debes utilizar su prefijo privativo.

Un saludo :)

PD: El segundo ejemplo esta genial. Cuando uno se pone a jugar, no se para xDD

C2am · #5 (**permalink**) 05/01/2012, 04:24

Hola oskar, hola y gracias mariomon.
Tal como dice mariomon para que funcione en otros navegadores (el segundo ejemplo) tienes que agregar los perfijos tal como está en el primer ejemplo.

-moz- para Firefox, -o- para Opera. Para IE me parece que no funciona (transition) por ejemplo.
Para IE, según estuve leyendo modernz parece ser la solución, o al menos un buen parche.

Saludos

mariomon17 · #6 (**permalink**) 05/01/2012, 07:57

Cita:

Iniciado por C2am

Para IE me parece que no funciona (transition) por ejemplo.
Para IE, según estuve leyendo modernz parece ser la solución, o al menos un buen parche.

Aqui se puede ver que solo funciona a partir de la version 10 (y con prefijo privativo): http://caniuse.com/#search=transition

Modernizr solo sirve para detectar si transitions es compatible en ese navegador, no es un polyfill.

Un saludo ;)

C2am · #7 (**permalink**) 05/01/2012, 08:16

Gracias por la aclaración de Modernizr, estás en lo cierto.
saludos

oskar5 · #8 (**permalink**) 25/01/2012, 11:13

no entiendo yo veo q si los pusiste igual no me funka en fox

oskar5 · #9 (**permalink**) 25/01/2012, 12:03

hola todos gracias por sus comentarios me estan acercando mas a lo que deseo hacer ahora tengo otros problemillas:

modificando lo q me han explicado he logrado que la etiqueta div tenga un fondo q seria el diseño q quiero q se despliegue pero el objetivo es q dentro de esta tambien hayan otras pequeñas DIV´s q tengan logos como los de blogs por ejemplo pero como empezando el efecto de transition la Div q los contiene esta en una dimension mas pequeña no puedo poner las de adentro en una posicion adecuada y si redimensiono la grande entonces qdarian como por debajo ed la pantalla eso las haria verse antes de q todo el efecto suceda..... q podria hacer para ocultarlas cuando la grande este aun sin aparecer??

Cita:

#abajo
{
width: 381px;
height:50px;
font-size:14px;
color:#FFF;
text-align:center;
}

#abajo
{
position:absolute;
left:109px;
bottom:144px;
transition:height 1s;
-moz-transition:height 1s;
-webkit-transition:height 1s;
-o-transition:height 1s;
background-image: url(pesta%C3%B1ainferior.png);
}

#abajo:hover
{
height:600px;
}
#apDiv1 {
position:absolute;
left:86px;
top:315px;
width:62px;
height:38px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:163px;
top:315px;
width:65px;
height:43px;
z-index:2;
}
</style>
</head>
<body>

<div id="abajo">

<img src="imagenes estructura/imagenes de HOME/blogs (5).png" width="47" height="40" />
<img src="imagenes estructura/imagenes de HOME/blogs (3).png" width="48" height="44" />

</div>

</body>
</html>

oskar5 · #10 (**permalink**) 25/01/2012, 16:25

he logrado mas cosas ahora el visibility no me funciona lo pongo hidden y en el evento hover lo pongo visible pero se queda invisible por q no se muestra??
ayuda porfavor y si quito el visibility y solo hago el efecto con el opacity se ve genial es lo que quiero pero entonces los elementos qdan por debajo del limite de la pagina es decir: este elemento completo q esta en los post de arriba osea <div id="abajo"> lo quiero poner en el pie de la pagina entonces si solo uso opacity con esta apdiv2 queda por debajo de todo haciendo q el scroll de toda la pagina me baje mucho mas dañandome la estetica

Cita:

#apDiv2 {
display:none;
visibility:hidden;
opacity:0;
transition:opacity 1s linear;
-moz-transition:opacity 1s;
-webkit-transition:opacity 1s;
-o-transition:opacity 1s;

transform:translate(2px,290px);
-moz-transform:translate(2px,290px);
-webkit-transform:translate(2px,290px);
-o-transform:translate(2px,290px);

}

#abajo:hover, #apDiv2:hover
{
height:600px;
visibility:visible;
opacity:1;

}