Jump to content

How to place a class on top of other class


newcoder1010
 Share

Recommended Posts

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

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

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...