Mettre à gauche, l'heure, au centre le titre, et à droite la date

**cincap** · 24/08/2013, 17h00

Bonjour à toutes et à tous,

j'aurai aimé pouvoir mettre dans la banderolle du titre l'heure à gauche et la date à droite et le titre au centre naturellement.

J'utilise ce code qui fonctionne pour le titre, mais l'heure et la date sont décalée vers le haut.

H1 à H3 est renseigné dans la balise style :

Code css :

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

1
2
3
4
h1 { font-family: Tahoma; color: #FFFFFF; font-size: 20pt; background-color: #000000; }
h2 {FONT-SIZE: 12pt; COLOR: #0000FF; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #000000;}
h3 {FONT-SIZE: 12pt; COLOR: #0000FF; FONT-FAMILY: Tahoma; BACKGROUND-COLOR: #000000;}
table { border: 1px solid #000000; }

Dans la balise body :

Code html :

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

1
2
3
<H2 id="pendule" style="position:absolute;left:15;top:0;"></H2>
<H3 id="pendule2" style="position:absolute;right:15;top:0;"></H3>
<H1 align="center">VIDEO SURVEILLANCE</H1>

Si quelqu'un avait une approche, merci d'avance.

@+,

Cincap

**SylvainPV** · 24/08/2013, 20h21

Bonjour,

- h1, h2 et h3 sont des tags indiquant des titres de différentes importances. Ici seul l'élément central peut-être assimilé à un titre. Il vaut donc mieux utiliser un span pour la date et l'heure
- il ne faut pas mélanger les styles en inline (dans le HTML) et dans les feuilles de style externes. Il vaut mieux tout mettre en externe dans ton fichier CSS
- faire un sélecteur par tag est une très mauvaise idée. Ecris un sélecteur plus précis, par exemple en ciblant la zone parente (celle que tu appelles banderole, par exemple #banderole span.date
- L'attribut align dans le h1 est déprécié en plus d'être inutile dans le cas présent. Tu peux le supprimer
- les noms des tags et propriétés CSS doivent être écrits en minuscules
- avec un position:absolute, tes éléments risquent de se superposer les uns sur les autres. Il vaut mieux utiliser float:left sur l'heure, float:right sur la date, et text-align:center sur le titre.

http://jsfiddle.net/ejDZq/

Code html :

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

1
2
3
4
5
<div id="banderole">
    <span class="heure">12:34</span>
    <span class="date">24/08/2013</span>
    <h1 class="titre">VIDEO SURVEILLANCE</H1>
</div>

Code css :

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
#banderole {
    background: #ccc;
    height: 120px;
}
 
#banderole .heure {
    float: left;
}
 
#banderole .date {
    float:right;
}
 
#banderole .titre {
    text-align: center;
}

Enfin, il ne s'agit pas d'une question Javascript mais CSS, merci de poster dans le bon forum la prochaine fois.

**cincap** · 25/08/2013, 05h57

Bonjour à toutes et à tous,

@ SylvainPV, merci pour ton aide et tes conseils ainsi que l'exemple, la date doit être celle du jour, et l'heure aussi, le fond du titre doit être en noir, je vais voir à ce sujet.

C'est à partir de mon programme en Delphi que sur un de mes modules, le code Html est interprété, donc peu habitué avec ce code en Css ou JavaScript.

A toutes fin, j'ai tenté de le placer sur ma page de test avant de l'intégrer à mon programme et je n'ai pas le résultat escompté comme dans ton exemple.

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
 
<!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> 
<div id="banderole">
<span class="heure">12:34</span>
<span class="date">24/08/2013</span>
<h1 class="titre">VIDEO SURVEILLANCE</H1>
</div>
  </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()">
#banderole {
background: #ccc;
height: 120px;
}
#banderole .heure {
float: left;
}
#banderole .date {
float:right;
}
#banderole .titre {
text-align: center;
}
<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>

Je continue à voir le pourquoi.

Bon Week end à tous.

Edit : j'ai examiné ton code et j'ai constaté une inversion de ton code proposé dans ma page !

@+,

Cincap

**cincap** · 25/08/2013, 06h26

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

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>

Edit : comment faire pour diriger ce poste vers CSS ?

Je persiste.

@+,

Cincap

**cincap** · 26/08/2013, 07h26

Bonjour à toutes et à tous.

Je n'ai pas trouvé comment intégrer la fonction date et heure dans le code CSS.

A moins que cela ne soit pas possible ?

@+,

Cincap

Mettre à gauche, l'heure, au centre le titre, et à droite la date

JavaScript

Vue hybride

Discussions similaires

Partager

Partager