newcoder1010 Posted December 10, 2015 Share Posted December 10, 2015 Hi, I dont have the html yet. I am listing some items. Three fields get listed: title, img, price. Currently, I see title first row, image second row and price third row. Instead of the placing price on the 3rd row, I like to place the price over the image. I have the below css classes for title and image: .view-display-id-block .views-field-title { width: 100%; margin-top:10px; font-size:15px;margin-right:10px; } .view-display-id-block img{ width: 90%; height:200px;margin:10px;margin-left:0px; } Now, I have one more class under the same parent '.view-display-id-block'. Class name for price: views-field-field-discount-price. How can I put the price on the image using css? Link to comment Share on other sites More sharing options...
newcoder1010 Posted December 10, 2015 Author Share Posted December 10, 2015 HTML: <div class="view view-mobile-view view-id-mobile_view view-display-id-block"> <div class="view-content"> <div class="item-list"> <ul> <li class="views-row views-row-1 views-row-odd views-row-first"> <div class="views-field views-field-title"> </div> <div class="views-field views-field-field-main-image"> <div class="field-content"> <img typeof="foaf:Image" class="img-responsive" src="fault/files/1_2.jpg" width="640" height="360" alt=""></div> </div> <div class="views-field views-field-field-discount-price"> <div class="field-content">$2</div> </div></li> <li class="views-row views-row-2 views-row-even"> ..... </div> Link to comment Share on other sites More sharing options...
dsonesuk Posted December 10, 2015 Share Posted December 10, 2015 You might get away with margin-top: -50px; on price container, other than that you would have to use position: relative; on li element, and position: absolute; with adjustment to top: left: and z-index properties on price container to have it overlap image. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now