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


I am trying to create a page that shows time The font I am using is ':' ugly so I want to replace it with an image. However, when the time between 9:59 to 10:00 is in the example, then there are vacancies. Here are some of my codes:

  .image {position: absolute; Width: 30px; Height: Multiplied 90px; Background-image: url ("2dots.png"); Repeat Background: No Repetition; Background size: 50%; Margin top: 30px; Left: 50%; Margin-left: -49px; Z-index: -1; } # Timings {font-size: 99px; Width: 300px; Left: 50%; Margin top: 0px; Margin-left: -40px; } & Lt; Div id = "time" & gt; & Lt; Div class = "image" & gt; & Lt; / Div & gt; & Lt; / Div & gt; Function updateClock () // update time within # seconds second second  

Do not want to juggle with such a positioning.

You should just set .image to display: inline-block , then place it between hours and minutes:

< Previous> .image {width: 30px; Height: Multiplied 90px; Background-image: url ("2dots.png"); Repeat Background: No Repetition; Background size: 50%; }
  & lt; Div id = "time" & gt; & Lt; Span id = "hours" & gt; 12 & lt; / Span & gt; & Lt; Div class = "image" & gt; & Lt; / Div & gt; & Lt; Span id = "minutes" & gt; 30 & lt; / Span & gt; & Lt; / Div & gt;  

Then, just set the hour / minute of the current time at the appropriate time.
Surely, you can add only seconds after this, if you need it.

However, a different option is , which shows a different font for the colon:

  span {font- Family: Arial; } .colon {font-family: Tahoma; }  
  & lt; Div id = "time" & gt; & Lt; Span id = "hours" & gt; 12 & lt; / Span & gt; & Lt; Span class = "colon" & gt;: & lt; / Span & gt; & Lt; Span id = "minutes" & gt; 30 & lt; / Span & gt; & Lt; / Div & gt; (General colon)  

or, from:

  span {font-family: Arial; } #hours: after {content: ':'; Font-family: Tahoma; }  
  & lt; Div id = "time" & gt; & Lt; Span id = "hours" & gt; 12 & lt; / Span & gt; & Lt; Span id = "minutes" & gt; 30 & lt; / Span & gt; & Lt; / Div & gt; (Normal colon :)  


Comments

Popular posts from this blog

java - Can't add JTree to JPanel of a JInternalFrame -

javascript - data.match(var) not working it seems -

javascript - How can I pause a jQuery .each() loop, while waiting for user input? -