CSS d'une image avec javascript

**fidraman** · 26/05/2012, 16h59

bonjour
j'ai un tout petit problème concernant l'affichage de l'heure en javascript à l'aide de CSS :
voila mon code complet de la page :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<html>
<head>
<style type="text/css">
.clockStyle {
        padding:3px;
        color:black;
        font-family:"Segoe UI", Gadget, sans-serif;
    font-size:16px;
        letter-spacing: 2px;
        display:inline;
        background-image:url(myBG.png);
    background-repeat: no-repeat;       
}
 
</style>
</head>
<body>
<h2>Adam's Javascript CSS Digital Clock Tutorial</h2>
<div id="clockDisplay" class="clockStyle"></div>
<script type="text/javascript" language="javascript">
function renderTime() {
        var currentTime = new Date();
        var diem = "AM";
        var h = currentTime.getHours();
        var m = currentTime.getMinutes();
    var s = currentTime.getSeconds();
        setTimeout('renderTime()',1000);
    if (h == 0) {
                h = 12;
        } else if (h > 12) { 
                h = h - 12;
                diem="PM";
        }
        if (h < 10) {
                h = "0" + h;
        }
        if (m < 10) {
                m = "0" + m;
        }
        if (s < 10) {
                s = "0" + s;
        }
    var myClock = document.getElementById('clockDisplay');
        myClock.textContent = h + ":" + m + ":" + s + " " + diem;
        myClock.innerText = h + ":" + m + ":" + s + " " + diem;
}
renderTime();
</script>
</body>
</html>

et pour l'image c'est attachée avec le fichier HTML
alors mon problème est que l'image ne s'affiche pas en sa totalité
l'image background est designé avec photoshop avec une forme d'un bouton, mais à l'aperçu de la page le bouton s'affiche en moitié seulement.
je suis un débutant en CSS et j'arrive pas depuis hier à régler le problème.

Merci DEVELOPPERS

**NoSmoking** · 26/05/2012, 17h14

Bonjour,
il te suffit de définir une largeur et une hauteur compatible avec les dimensions de l'image background.

Le conteneur, sans autre précision de taille, n'occupe que l'espace minimal nécessaire.

Comme tu utilises un display:inline;, cela ne fonctionnera pas il te faut au moins mettre un display:inline-block;.

**fidraman** · 26/05/2012, 19h32

Envoyé par NoSmoking

Bonjour,
il te suffit de définir une largeur et une hauteur compatible avec les dimensions de l'image background.

Le conteneur, sans autre précision de taille, n'occupe que l'espace minimal nécessaire.

Comme tu utilises un display:inline;, cela ne fonctionnera pas il te faut au moins mettre un display:inline-block;.

Merci bien cela a fonctionné parfaitement !!
j'ai changé

Code :

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

display:inline;

par :

Code :

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

display:block;

l'image est apparu complètement mais le texte que j'ai généré en javascript (l'heure) n'est pas centré au milieu de l'image.
comment faire svp pour le faire centrer sur l'image !?
Merci bien
Cordialement

**NoSmoking** · 27/05/2012, 17h57

Comment centrer horizontalement n'importe quel élément en CSS ?

CSS d'une image avec javascript

CSS

Vue hybride

Discussions similaires

Partager

Partager