javascript - Positioning of an image relative to a div within a div -

javascript - Positioning of an image relative to a div within a div -

i'm trying create page displays time. ':' of font i'm using ugly want replace image. when time goes illustration 9:59 10:00 there spacing issues. here of code:

.image{ position: absolute; width:30px; height:90px; background-image: url("2dots.png"); background-repeat: no-repeat; background-size:50%;margin-top:30px; left:50%; margin-left:-49px; z-index:-1; } #time { font-size: 99px; width:300px; left:50%; margin-top:0px; margin-left:-40px; } <div id="time"><div class="image"></div></div> function updateclock() //updates time ever sec within #time every sec

you don't want juggle positioning that.

you should set .image display: inline-block, place in between hours , minutes:

.image{ width:30px; height:90px; background-image: url("2dots.png"); background-repeat: no-repeat; background-size:50%; } <div id="time"> <span id="hours">12</span> <div class="image"></div> <span id="minutes">30</span> </div>

then, set current time's hours / minutes in proper spans. of course, can add together seconds after it, if need.

however, different alternative utilize <span> displays different font, colon:

class="snippet-code-css lang-css prettyprint-override">span{ font-family: arial; } .colon{ font-family: tahoma; } class="snippet-code-html lang-html prettyprint-override"><div id="time"> <span id="hours">12</span><span class="colon">:</span><span id="minutes">30</span> </div> (normal colon : )

or, @paulie_d's suggestion:

class="snippet-code-css lang-css prettyprint-override">span{ font-family: arial; } #hours:after{ content: ':'; font-family: tahoma; } class="snippet-code-html lang-html prettyprint-override"><div id="time"> <span id="hours">12</span><span id="minutes">30</span> </div> (normal colon : )

javascript jquery html css