3 Replies - 193 Views - Last Post: 02 January 2018 - 10:39 AM

#1 lastpeony   User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 48
  • Joined: 14-October 17

Positioning health-mana bar on top of picture

Posted 02 January 2018 - 09:47 AM

Hello im developing a game for fun can you guys help me to position health and mana bars on top of characters correctly ? i showed correct positions with arrows.also my css code might be unnecessary dublicated.
Right now it looks like that:

Posted Image

<div class="progress-container player-health">
        <progress id="playerhealth" *ngIf="state==1"  id="playerhealth" value="100" max="100"></progress>
        <p class="progress-label">
          {{hp}}
        </p>
    
      </div>
      <div class="progress-containermana">
        <progress id="playermana" *ngIf="state==1"   value="100" max="100"></progress>
        <p class="progress-label">
          {{playermana}}player
        </p>
    
      </div>
      <div class="progress-container enemy-health">
        <progress id="enemyhealth" *ngIf="state==1"   id="ophealth" value="100" max="100"></progress>
        <p class="progress-label">
      {{ophp}}
        </p>
      </div>
      <div class="progress-containermana">
        <progress id="opmana" *ngIf="state==1"   value="100" max="100"></progress>
        <p class="progress-label">
          {{opmana}}op
        </p>
    
      </div>
    <div>
      <img *ngIf="state==1" width="200" height="100" class="avatarimg" src="{{playeravatar}}">
      <img *ngIf="state==1" width="200" height="100" class="op" src="{{opavatar}}">
    </div>


css:

.avatarimg{
          width: auto;
          margin-left: 20px;
          display: inline-block;
    
      }
    
      .progress-container {
      position: relative;
      display: inline-block;
    
      }
      .progress-container progress {
      background-color: #eee;
      height: 20px;
      }
    
      .progress-container progress::-webkit-progress-bar {
      background-color: #eee;
      }
    
      .progress-container progress::-webkit-progress-value {
      background-color: red;
      }
    
      .progress-container .progress-label {
      position: absolute;
      top: 2px;
      margin: 0;
      left: 60px;
      font-size: 20px;
      font-family: Minecraft;
    
      }
      .op{
          width: auto;
          margin-left: 40px;
          display: inline-block;
          -webkit-animation: bounce ease-in 5;
    animation: bounce ease-in 5;
    -webkit-animation-duration: 20000ms;
    animation-duration: 1000ms;
    
      }
    
      .progress-containermana {
      position: relative;
      display: inline-block;
    
      }
      .progress-containermana progress {
      background-color: #eee;
      height: 20px;
      }
    
      .progress-containermana progress::-webkit-progress-bar {
      background-color: #eee;
      }
    
      .progress-containermana progress::-webkit-progress-value {
      background-color: blue;
      }
      .progress-containermana .progress-label {
          position: absolute;
          top: 2px;
          margin: 0;
          left: 60px;
          font-size: 20px;
          font-family: Minecraft;
    
      }


Is This A Good Question/Topic? 0
  • +

Replies To: Positioning health-mana bar on top of picture

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14175
  • View blog
  • Posts: 56,798
  • Joined: 12-June 08

Re: Positioning health-mana bar on top of picture

Posted 02 January 2018 - 10:15 AM

I don't get what's going on in that picture. Is it you want all the reds and blues to be contained vertically? Seems like it should be good enough to put them in different divs and wrap the player image and that div in another div a piece.
Was This Post Helpful? 0
  • +
  • -

#3 lastpeony   User is offline

  • New D.I.C Head

Reputation: -1
  • View blog
  • Posts: 48
  • Joined: 14-October 17

Re: Positioning health-mana bar on top of picture

Posted 02 January 2018 - 10:32 AM

View Postmodi123_1, on 02 January 2018 - 10:15 AM, said:

I don't get what's going on in that picture. Is it you want all the reds and blues to be contained vertically? Seems like it should be good enough to put them in different divs and wrap the player image and that div in another div a piece.

yes.

0player labeled mana bar should go under 9 labeled health bar.
0op labeled mana bar should go top of ironman.
-208 labeled health bar should go top of ironman(top of 0op)

This post has been edited by lastpeony: 02 January 2018 - 10:33 AM

Was This Post Helpful? 0
  • +
  • -

#4 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14175
  • View blog
  • Posts: 56,798
  • Joined: 12-June 08

Re: Positioning health-mana bar on top of picture

Posted 02 January 2018 - 10:39 AM

Cool.. then yeah.. get your items collected in containers of divs and spans.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1