fixed y relative
Publicado por cris (8 intervenciones) el 07/06/2021 14:36:53
Hola! Estoy intentando posicionar dos textos: fecha y hora. Lo puedo hacer de varias formas, pero me gustaría hacerlo asignandole a la hora una posición "fixed" y a la fecha una posición "absolute" de modo que pueda colocar la hora en una posición determinada de la pantalla y la fecha en otra posición, cuya referencia sea la posición de la hora.
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EMT Fechay hora</title>
<script type="text/javascript">
function startTime(){
today=new Date();
h=today.getHours();
m=today.getMinutes();
m=checkTime(m);
document.getElementById('reloj').innerHTML=h+":"+m;
t=setTimeout('startTime()',200);}
function checkTime(i)
{if (i<10) {i="0" + i;}return i;}
function startDate(){
var meses = new Array ("01","02","03","04","05","06","07","08","09","10","11","12");
var diasSemana = new Array("Diumenge","Dilluns","Dimarts","Dimecres","Dijous","Divendres","Dissabte");
var f=new Date();
document.getElementById('fecha').innerHTML=diasSemana[f.getDay()] + ", " + (f.getDate() < 10 ? '0' : '') + f.getDate() + "/" + meses[f.getMonth()] + "/" + f.getFullYear();}
window.onload=function(){startDate();startTime();}
</script>
<style>
body { /* Ruta relativa o completa a la imagen */background-image: url(fondo.png);
/* Centramos el fondo horizontal y verticalmente */background-position: center center;
/* El fonde no se repite */background-repeat: no-repeat;
/* Fijamos la imagen a la ventana para que no supere el alto de la ventana */background-attachment: fixed;
/* El fonde se re-escala automáticamente */ /* Color de fondo si la imagen no se encuentra o mientras se está cargando */background-color: #FFF;
/* Fuente para el texto */text-align: center;
color: #000;
font-family: "Times New Roman", Times, serif;
}.fecha_hora {
font-size:60px;
font-family: Arial;
color: #696969;
} #reloj { position:fixed; top:330px; left:185px; } #fecha { position:absolute; top:0px; left:0px; }</style>
</head>
<body>
<div id="reloj" class="fecha_hora"></div>
<div id="fecha" class="fecha_hora"></div>
</body>
</html>
Valora esta pregunta
0