Text over image, without affecting other texts on image - html

Question

I have an image where 3 words are on, but I can't get the 3rd on it because it will not go in the position I want it. Here's the picture with words.
#clubname {
position: absolute;
margin-left: 26%;
color: #FFF;
line-height: 0px;
font-family: 'Knul-Bold';
}
#pacoins {
position: relative;
line-height: 84px;
margin-left: 13%;
max-width:5%;
max-height:5%;
color: #FFF;
font-family: 'Knul-Bold';
font-size: 17px;
}
#myclub {
position: relative;
margin-left: 30%;
line-height: 0px;
color: #FFF;
font-family: 'Knul-Bold';
font-size: 17px;
color: black;
}
<img src="http://packsimulator.nl/img/PAClubCover.png" style="position:absolute;">
<p id="clubname">Julan FC</p>
<p id="pacoins">97.000</p>
<p id="myclub">My Club</p>
As you can see 'My Club' isn't after the blue icon. Where it should be.

Answer 1

wrap these with a container/wrap div then use position:relative/absolute
.wrap {
position: relative;
width:400px /* width of image */
}
img {
position: absolute
}
p {
position: absolute;
color: #FFF;
line-height: 0;
font-family: 'Knul-Bold';
z-index: 1;
font-size: 17px
}
#clubname {
left: 40%;
}
#pacoins{
left: 25%;
top:22px;
}
#myclub {
left: 55%;
top:22px;
}
<div class="wrap">
<img src="http://packsimulator.nl/img/PAClubCover.png" />
<a href="#profile">
<p id="clubname">Julan FC</p>
</a>
<a href="#pacoins">
<p id="pacoins">97.000</p>
</a>
<a href="#club">
<p id="myclub">My Club</p>
</a>
</div>

Answer 2

You have to use float:left;.
Change your css to be like this
#pacoins {
position: relative;
line-height: 48px;
margin-left: 20%;
max-width: 5%;
max-height: 5%;
color: #FFF;
font-family: 'Knul-Bold';
font-size: 17px;
float:left;
}
#myclub {
position: relative;
margin-left: 42%;
line-height: 84px;
font-family: 'Knul-Bold';
font-size: 17px;
color: black;
}
Working JSFiddle here https://jsfiddle.net/dotcgtuc/1/
Hope this helps.

Answer 3

You will need to position it with position: absolute;. For example
#clubname {
position: absolute;
margin-left: 26%;
color: #FFF;
line-height: 0px;
font-family: 'Knul-Bold';
}
#pacoins {
position: relative;
line-height: 84px;
margin-left: 13%;
max-width:5%;
max-height:5%;
color: #FFF;
font-family: 'Knul-Bold';
font-size: 17px;
}
#myclub {
position: absolute;
left: 40%;
top: 45px;
line-height: 0px;
color: #FFF;
font-family: 'Knul-Bold';
font-size: 17px;
color: black;
}
<img src="http://packsimulator.nl/img/PAClubCover.png" style="position:absolute;">
<p id="clubname">Julan FC</p>
<p id="pacoins">97.000</p>
<p id="myclub">My Club</p>

Answer 4

OK, you have a couple things going on here that aren't quite recommended, but with reworking your html & css I believe I've produced the result you're looking for.
First, you're embedding paragraph tags <p> in anchor tags <a> - this is only HTML5 compatible because the p is a block element while anchor is inline. I'd suggest using span tags how you have it.
Secondly, your CSS uses percentages to place these elements - so once a browser resize takes place, your elements will all be thrown off. Putting this information together, I believe we can achieve the results you are looking for:
CSS
#clubname {
position: absolute;
top: 15px;
left: 255px;
color: #FFF;
font-family: 'Knul-Bold';
}
#pacoins {
position: relative;
top: 30px;
left: 100px;
max-width:5%;
max-height:5%;
color: #FFF;
font-family: 'Knul-Bold';
font-size: 17px;
}
#myclub {
position: relative;
left: 200px;
top: 32px;
color: #FFF;
font-family: 'Knul-Bold';
font-size: 17px;
color: white;
}
HTML
<img src="http://packsimulator.nl/img/PAClubCover.png" style="position:absolute;">
<span id="clubname">Julan FC</span>
<span id="pacoins">97.000</span>
<span id="myclub">My Club</span>
Fiddle