Jump to content
Sign in to follow this  
newcoder1010

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

Share this post


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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

I got the second part working. Please advise on the status element how to float to right. Thanks! 

.views-field.views-field-title {
top: 0;
    left: 16px;
    font-size: 18px;position:absolute;

}

 

Share this post


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.

Share this post


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.

Share this post


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...
Sign in to follow this  

×
×
  • Create New...