Search code examples
htmlcsstextmove

How to move the text to the right when the amount of letters or numbers increase

I´m creating a game hud with a money display. So let´s say the Player has 0 Dollar in his pocket it should look like this:

Note: That´s in the upper right corner

Position of the Text:

right: 12.00vw;
top: 1.7vw;

Now let´s be unrealistic and say the Player has 50.000.000 Dollar ins his pocket it i´ll look like this: enter image description here

But it should look like this:

enter image description here

So how can i let the text move to the right instead of to the left when the number of money in the pocket increases?

Code:

<div class="moneyhud"></div>
    <div ID="hud">
        <div id="top">
        <span id="text4">50000000 $</span>  <!-- Money -->      
    </div>
 </div>

#text4 {
    font-size: 1.5vw;
    color: rgb(53, 143, 73);
    position: absolute;
    right: 12.00vw;
    top: 1.7vw;
    text-shadow: 4px 4px 10px #313131;
}

.moneyhud {
    position: absolute;
    background-image: 
    url("https://img.rehmann.online/a/fastlife/gruengeld.png");
    background-repeat: no-repeat;
    right: 1.00vw;
    top: 2vw;
    z-index: -1;
    height: 30px;
    width: 288px;
    color: #fff;
}
Solution 

  • #text4 {
    font-size: 1.5vw;
    color: rgb(53, 143, 73);
    position: absolute;
    right: 12.00vw;
    top: 1.7vw;
    text-shadow: 4px 4px 10px #313131;
}

.moneyhud {
    position: absolute;
    background-image: 
    url("https://img.rehmann.online/a/fastlife/gruengeld.png");
    background-repeat: no-repeat;
    right: 1.00vw;
    top: 2vw;
    z-index: -1;
    height: 30px;
    width: 288px;
    color: #fff;
}
    <div class="moneyhud">
    <div id="hud">
        <div id="top">
          <span id="text4">50000000 $</span>  <!-- Money -->  
        </div>
    </div>
 </div>

    That is the code you currently have. Notice how you're relying on hard-coded values to display dynamic content. Try something like this:

    #text4 {
    font-size: 16px;
    color: rgb(53, 143, 73);
    text-shadow: 4px 4px 10px #313131;
}


.moneyhud {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 20px;
    right: 10px;
    height: 30px;
    width: 288px;
    background-image: 
    url("https://img.rehmann.online/a/fastlife/gruengeld.png");
    background-repeat: no-repeat;
    color: #fff;
}
    <div class="moneyhud">
    <span id="text4">50000000 $</span> 
 </div>

    This should give you a rough idea of how to flex-box it