Jump to content

How to place text within an image or div element


newcoder1010

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

If you use position:relative on the div that holds the image, then you can then use position: absolute on the Price and the status and use the combination of the bottom, left and right styles.

Take a look at the CSS positioning tutorial for more information.

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
×
×
  • Create New...