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;
muchas gracias Andres
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
0
