I wanted to do some UI-Design and came across a little problem. Basically the tag should be the background of that
tag -which is only red so that it can be found more easily-.
HTML-Code:
<div class="tournament">
<p>
<GET system.template.tournament.date> <progress id="value" max="8"></progress>
</p>
<button>Information</button>
</div>
<p class="playerNumber">
<span id="players">4</span>/<span id="max">8</span> <span id="plural">Players</span> in
</p>
CSS-Code:
.tournament {
background-color: #202020;
width: 98%;
margin-left: 1%;
margin-top: 15px;
height: 121px;
}
.tournament p {
text-align: left;
position: absolute;
margin-top: 48px;
margin-left: 20px;
}
.tournament button {
margin-left: 90%;
margin-top: 43px;
border-radius: 100px;
width: 135px;
height: 35px;
border-color: #666666;
}
.tournament progress {
border-color: #666666;
background-color: #202020;
width: 285%;
height: 45px;
position: absolute;
margin-top: -10px;
margin-left: 80%;
}
progress::-moz-progress-bar { background: #151515; }
progress::-webkit-progress-value { background: #151515; }
progress { color: #151515; }
.playerNumber {
text-align: left;
color: red;
margin-left: 30%;
margin-top: -50px;
z-index: 200;
}
Basically that p-element shows some information related to that progressbar. In this case it says "4/8 Players in" which is refered to the tournament. Thats why the progressbar is 50%-full.
Its not a problem if you have a solution that comes without a
-tag but allowes me to write something on the progressbar.
Why am i asking here?
you need to put the .playerNumber
element inside the .tournament
element.
just adjust the positions using, top
, left
css props for .playerNumber
element...
then you would need this css and...
.playerNumber {
text-align: left;
color: red;
left: 300px;
top: 10px;
z-index: 3;
display:block;
}
.tournament progress {
border-color: #666666;
background-color: #202020;
width: 285%;
height: 45px;
position: absolute;
margin-top: -10px;
margin-left: 0px;
z-index: 2;
}
...and html like this
<div class="tournament">
<p>
<GET system.template.tournament.date> <progress id="value" max="8"></progress>
</p>
<button>Information</button>
<p class="playerNumber">
<span id="players">4</span>/<span id="max">8</span> <span id="plural">Players</span> in
</p>
</div>