0

how can i place my outcome text field placed in the image

enter image description here

the code i made:

> echo "<img id='image' src='http://i.imgur.com/qqzaa4N.png'></a> <p id='text'>€ ".$row['total']."</p>";

I was thinking about div class but that did not work i'm getting

Parse error: syntax error, unexpected '<'

the end result needs to be something like this one: https://i.stack.imgur.com/TWror.png


It did work after I changed my css to:

#image {
  position: absolute;
  margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 200px;
}
#text {
  z-index: 100;
  margin: auto;
  position: relative;
  color: white;
  font-size: 24px;
  font-weight: bold;
    left: 0;
    right: 0;
    top: 350px;
    bottom: 0;
}

And my script to:

echo '<img id="image" src="http://i.imgur.com/qqzaa4N.png"></a> <p id="text">€ '.$row['total'].'</p>';
Deniz
  • 107
  • 2
  • 15

3 Answers3

2

you did not specify exactly what you want, but if you want to place the text over the image try to write the code bellow, don't forget to replace 42 with the value you want row['total'].

.container {
    position: relative;
    width: 50%;
}
.image-text{
  position: absolute;
  top: 20px;
  left: 80%;
}
<div class='container'>
<img id='image' src='http://i.imgur.com/qqzaa4N.png'>
<p class='image-text' id='text'>€ 42</p>
</div>
berserck
  • 499
  • 4
  • 19
1

You can use css.

<style>
.container {
position: relative;
border: 1px solid #DDDDDD;
width: 200px;
height: 200px;

}.tag {

position: absolute;
bottom:0;
right: 0;
width: 100px;
height: 50px;
border: 3px solid #73AD21;
}
 </style>

<div class="container">
<div class="tag">Featured</div>
<img src="yourimagesoucre">
</div>
liquidacid
  • 108
  • 1
  • 9
0

write this instead

echo '<img id="image" src="http://i.imgur.com/qqzaa4N.png"></a> <p id="text">€ '.$row['total'].'</p>';
ahhmarr
  • 2,296
  • 4
  • 27
  • 30