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:
.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
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
Post a Comment