HTML - ventana flotante oculta a la derecha

 
Vista:
sin imagen de perfil

ventana flotante oculta a la derecha

Publicado por andres (2 intervenciones) el 19/11/2015 23:42:23
Hola ante todo soy novato en esto mis conocimiento sobre programación son muy básicos.
Tengo una web y me han dado un código para una ventana flotante escondida en el extremo derecho de la pantalla con un texto que dice información. Al poner el mouse encima esta ventana se desplaza y enseña toda la información.
Puse el código en mi web y funciono de maravilla, el problema es el siguiente:
En mi monitor se ve perfectamente pero en otros monitores más pequeños desaparece de la pantalla. Como puedo lograr que funcione independientemente del tamaño del monitor.
En resumen que siempre quede en el mismo sitio independiente del tamaño de la pantalla
Creo que me he enredado un poco pero no sé explicarlo de otra forma, Les dejo en html;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<DOCTYPE HTML>
<html>
 
<head>
<meta charset="uft-8">
<title>Ventana flotante</title>
<style type="text/css">
<body>
{
    overflow-x:hidder;
}
.vFlotante
{
    position:absolute;
    left:141%;
    top:3%;
    width:280px;
    height:400px;
    transition:all .4s ease-in;
    -webkit-transition:all .4s ease-in;
    -moz-transition:all .4s ease-in;
    -o-transition:all .4s ease-in;
}
.vFlotante:hover
{
    left:118%;
}
.titulo
{
   transform:rotate(270deg);
  -webkit-transform:rotate(270deg);
  -moz-transform:rotate(270deg);
  -o-transform:rotate(270deg);
 }
</style>
<body>
<div  class="vFlotante">
      <hgroup style="display:inline-block;">
         <h1 class-"titulo">
			INF</h1>
      </hgroup>
		<p style="display:inline-block; margin-left:34px; margin-right:1px; margin-top:0px" align="center">
		<font face="Tahoma" size="3"><b>Información</b></font></p>
		<p style="display:inline-block; margin-left:34px; margin-right:3px; margin-top:6px" align="right">
		<span class="Apple-style-span">
		<span style="font-family: Arial, 'Arial Unicode MS', Helvetica, sans-serif; color: #303F50; letter-spacing: normal">
		aquí el texto</span></span></p>
</div>
</body>
</html>





muchas gracias Andres
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Angel Komander

ventana flotante oculta a la derecha

Publicado por Angel Komander (101 intervenciones) el 20/11/2015 00:25:49
por que mejor no creas uno desde 0? o buscas uno que funcione bien como deseas?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

ventana flotante oculta a la derecha

Publicado por xve (1543 intervenciones) el 20/11/2015 08:23:30
Hola Andres, tienes un montón de errores en el código.... te lo he modificado un poco, aunque es mejorable, te puede servir...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE HTML>
<html>
 
<head>
	<meta charset="uft-8">
	<title>Ventana flotante</title>
	<style>
	.vFlotante
	{
		position:fixed;
		right:-258px;
		top:0;
		width:280px;
		height:400px;
		transition:all .4s ease-in;
		-webkit-transition:all .4s ease-in;
		-moz-transition:all .4s ease-in;
		-o-transition:all .4s ease-in;
	}
	.vFlotante:hover
	{
		right:0;
	}
	.vFlotante>div:last-child{padding-left:30px;}
	.titulo
	{
		transform:rotate(270deg);
		-webkit-transform:rotate(270deg);
		-moz-transform:rotate(270deg);
		-o-transform:rotate(270deg);
		display:inline-block;
		margin-top:10px;
		font-weight:bold;
	}
	</style>
</head>
 
<body>
	<div class="vFlotante">
		<div class="titulo">INF</div>
		<div>
			<p>
				<b>Información</b>
			</p>
			<p>
				aquí el texto
			</p>
		</div>
	</div>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

ventana flotante oculta a la derecha

Publicado por andres (2 intervenciones) el 20/11/2015 12:14:16
Muchas gracias xve me sirvió era lo que necesitaba, me ha sido de gran utilidad / saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar