Jump to content

How to place text within an image or div element


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 post
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 post
Share on other sites
Posted (edited)

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 post
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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...