Placer la date et l'heure avec ce code !

**cincap** · 26/08/2013, 12h46

Bonjour à toutes et à tous,

Ce topic apparemment n'était pas dans le bon forum !

En examinant le code CSS, j'ai corrigé mes erreurs et j'ai pu mettre la banderolle en noir etc.

Mais la date en réel et l'heure, niet.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
88
89
90
91
92
93
94
95
96
97
98
99
100
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>VIDEO SURVEILLANCE</title>
  <meta http-equiv="Refresh" content="10">
  <style type="text/css"> <!--
#contenu{
position:absolute;
left: 50%;
margin-left: -195px;
/* Hack CC pour IE MAC \*/
top: 50%;
margin-top: -110px;
/* fin hack CSS pour IE MAC */
}
-->
  </style>
  <style type="text/css">
#banderole {
body { background-color: #CCCCCC; } height: 60px;
}
#banderole .heure {
float: left;
.bleutext{ color: #336699; }
}
#banderole .date {
float:right;
}
#banderole .titre {
text-align: center;
}
  </style>
  <script language="javascript">
<!-- Begin
function disp_horloge(){
if (!document.layers && !document.all) return;
var date_jour=new Date()
var heure=date_jour.getHours();
var min=date_jour.getMinutes();
var sec=date_jour.getSeconds();
if (heure<10) heure="0"+heure;
if (min<10) min="0"+min;
if (sec<10) sec="0"+sec;
function don_date_jour()
{var date_jour=new Date();
date_jour=don_date_format(date_jour);
return date_jour;}
function don_date_format(d1) {
var m=new Array(13);
m[1]="Janvier"; m[2]="Février"; m[3]="Mars"; m[4]="Avril"; m[5]="Mai"; m[6]="Juin";
m[7]="Juillet"; m[8]="Aout"; m[9]="Septembre"; m[10]="Octobre"; m[11]="Novembre"; m[12]="Décembre";
var d=new Array(8);
d[1]="Dimanche"; d[2]="Lundi"; d[3]="Mardi"; d[4]="Mercredi"; d[5]="Jeudi"; d[6]="Vendredi"; d[7]="Samedi";
var mois=m[d1.getMonth()+1];
var jour=d[d1.getDay()+1];
var date=d1.getDate();
var an=d1.getYear();
if (an<200) an=1900+an;
date=jour+" "+date+" "+mois+" "+an;
return date;
}
dispTime=heure+":"+min+":"+sec;
dispdato= don_date_jour()
if (document.layers) {
document.layers.pendule.document.write(dispTime);
document.layers.pendule.document.close();
document.layers.pendule2.document.write(dispdato);
document.layers.pendule2.document.close();
}
else
if (document.all)
pendule.innerHTML = dispTime;
pendule2.innerHTML = dispdato;
setTimeout("disp_horloge()",1000);
}
// End --> </script>
</head>
<body ms_positioning="gridlayout" leftmargin="0"
 onload="disp_horloge()">
<div id="banderole">
<big><big><big><span style="color: rgb(0, 0, 153);"
 class="heure" ;="" bleutext="">12:34</span><span
 style="color: rgb(0, 0, 153);" class="date">24/08/2013</span></big></big></big>
<h1 style="background-color: black;" color="" rgb(0=""
 0="" 153="" class="titre"><span
 style="color: rgb(255, 255, 255);">VIDEO
SURVEILLANCE</span> </h1>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center"><font color="#00ffff">F11
pour plein &eacute;cran</font></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center"><font color="#ff0000" size="7">
</font></p>
</body>
</html>

@+,

Cincap

**Tendhor57** · 28/08/2013, 15h48

Envoyé par cincap

Ce topic apparemment n'était pas dans le bon forum !

Et je ne pense pas que ce soit un problème de CSS, quand je vois cela

Envoyé par cincap

class="heure" ;="" bleutext="">

je ne pense pas que l'on peut ecrire cela

Ensuite

Envoyé par cincap

color="" rgb(0=""
0="" 153="" class="titre">

""rgb

en général pour pas avoir de soucis on doit alterné simple et doule côte de plus pour rgb on le defini comme ceci rgb(0,0,0) ce qui nous donne avec le style:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

 style="color: rgb(80,76,101);"

Voici quellque pistes

**Candygirl** · 28/08/2013, 18h55

Bonjour,

Envoyé par cincap

En examinant le code CSS, j'ai corrigé mes erreurs et j'ai pu mettre la banderolle en noir etc.

Mais la date en réel et l'heure, niet.

Pourrais-tu expliquer un peu mieux ton problème stp, parce que là, on ne sait même pas de quoi tu parles...

Que souhaites-tu obtenir, qu'est-ce qui ne fonctionne pas ? Et après, on pourra être sûr que tu es bien sur le bon forum...

De toute manière, comme l'a relevé Tendhor57, la première chose à faire est de corriger ton code, en commençant par renseigner un doctype complet.

Les hack pour IE5 mac, c'est un peu dépassé, déjà qu'en 2007 je passais pour une outsider de m'en préoccuper encore ^^

**cincap** · 31/08/2013, 11h20

Bonjour à toutes et à tous,

En fait, j'affiche une page au format Htlm depuis une application Delphi et sur cette page j'aurai aimé afficher une bande noire avec la Date/Titre/Heure comme exemple en attache.

Je suis plus tourné langage Delphi donc excusez le débutant.

@+,

Cincap

**NoSmoking** · 31/08/2013, 14h48

Bonjour,
bien des remarques concernant le CSS et HTML mais je n'ai pas grand chose à ajouter à ce qui a été dit.

Ton problème est également fortement lié au javascript, nous sommes au XXI éme siècle, pourquoi avoir déterré un script du siècle dernier

exit document.all ou autre document.layers.

Dans le script tu écris dans pendule.innerHTML = dispTime; et pendule2.innerHTML = dispdato;, mais à quoi font référence ces éléments ???

Utilises document.getElementById( id_element) pour retrouver la référence DOM de tes éléments, mais bien sûr il faudra qu'il existe dans ton code HTML.

**cincap** · 31/08/2013, 17h19

@ NoSmoking, je ne vais pas insister puisque l'image en attache fonctionne, le seul problème est lorsque je réduisait la fenêtre, la date chevauchait le titre.

Dans le script tu écris dans pendule.innerHTML = dispTime; et pendule2.innerHTML = dispdato;, mais à quoi font référence ces éléments ???

Ce sont bien des références reprises dans code JavaScript.

Comme il n'est pas permis d'annuler ce topic comme le bouton résolu, il reste ouvert.

Désolé du dérangement mais passer la 60aine on a plus le temps de réapprendre tout.

@+,

Cincap

**NoSmoking** · 31/08/2013, 18h48

le seul problème est lorsque je réduisait la fenêtre, la date chevauchait le titre.

à la lecture de la discussion ce n'est pas forcément ce qui apparaît

Dans ce cas il te suffit de définir une largeur mini à la <div id="banderole">.
exemple rapide

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>VIDEO SURVEILLANCE</title>
<style type="text/css">
#banderole {
  background-color:black;
  min-width:720px;
}
#banderole .heure {
  color:rgb(0,0,255);
  font-size:32px;
  float:left;
}
#banderole .date {
  color:rgb(0,0,255);
  font-size:32px;
  float:right;
}
#banderole .titre {
  color:rgb(255,255,255);
  text-align:center;
}
</style>
</head>
<body>
<div id="banderole">
  <span id="date" class="date">24/08/2013</span>
  <span id="heure" class="heure">12:34</span>
  <h1 class="titre">VIDEO SURVEILLANCE</h1>
</div>
</body>
</html>

Concernant la partie javascript...je te laisse maitre...

Désolé du dérangement mais passer la 60aine on a plus le temps de réapprendre tout.

ceci n'est pas une excuse recevable

Placer la date et l'heure avec ce code !

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager