Jump to content

How to place text within an image or div element


newcoder1010
 Share

Recommended Posts

Hello,

HTML:

<div class="prop-row">
 <div class="views-field views-field-title">

<span class="field-content">

<a href="/node/159" hreflang="en">7x Euclid Avenue Building</a>

</span>

</div>

<div class="views-field views-field-field-main-image">

<div class="field-content">  

<img src="/sites/default/files/styles/medium/public/2020-03/town-homes_0.png?itok=_sxYxuaG" width="200" height="200" alt="ggfdg" typeof="foaf:Image" class="img-responsive">


</div>

</div>

<div class="views-field views-field-field-house-selling-price">

<div class="field-content">$45,345</div>

</div>

<div class="views-field views-field-field-status">

<div class="field-content">Active</div></div>

 </div>

 

How can I place the price at bottom left corner of the image and place the status at the bottom right corner of the image?

https://docs.google.com/document/d/19hif-4iyf2iMqWEnz0mIKjhKcBxwvZ_f07r11Ux8_8I/edit?usp=sharing

Please advise!

Edited by newcoder1010
Link to comment
Share on other sites

I made progress. 

.prop-row {
    position: relative;
}

.views-field.views-field-field-status {
    position: absolute;
    width: 100px;
    float: right;
    margin-top: -30px;
}

.views-field-field-house-selling-price {
    position: absolute;
    width: 100px;
    float: left;
    margin-top: -30px;
}

Both are now inside prop-row element. But status is sitting on top of price. I cant see the price. I do not have any control on html. How can I push status to the right side?

Edited by newcoder1010
edit
Link to comment
Share on other sites

Float does not work with absolute positioning, you should use the top, right, bottom and left rules to move an element with absolute position.

Instead of left:16px, you would use right:16px to move it 16px from the right of the container.

Link to comment
Share on other sites

On 3/21/2020 at 6:19 AM, newcoder1010 said:

One more question. Right now, image is sitting below the title. How can I place the title above the image? Please see the second image in the link.

Try using z-index for this one. Higher numbers go on top of lower ones.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...