Alignment of the image on another image css angularjs

Question

I am new to angularjs and html css. I am creating app for 1st time in the app there is one list and the row of the list needs to have following:

Background Image (kind of banner image) --- coming from server api
Grey image Strip at bottom of the row above backgroundImage. ---static for all row placed at bottom.
Title for that row content. ---- The Title will be on the grey image strip
Short Description of that row content.--- The desc will be on the grey image strip

The problem is the grey image strip is not getting aligned properly when i check on the chrome it show properly when i check on firefox the alignment gets screwed.

As the application is made for mobile devices the UI needs to be responsive.

How can i make the grey image strip responsive.

Following is the demo image of how the row should look. The 1st section mentioned in image is the banner image which will be placed on background. 2nd section is the grey strip image which will be placed at bottom and will contain title and desc text on it.

The grey strip image is not getting aligned properly in responsive environment. enter image description here

Following is the code for the gray strip and the banner image.

<ul ng-repeat = "images in temples" style = "list-style: none; margin-left : 0%">
<li><img src= "{{images}}" ng-click="showTempleDetails('/templeDetails',$index)" style="position:relative">
<img src="img/transparentbgstrip.png">
</div></li>
</ul>

I don't really get what you are asking but: 1. use ng-src=images instead of {{images}}, 2. why don't you put the grey line with css?, and lastly, why would you say images in temples the current iteration variable is in plural. I suggest you name things in a clear way, like temple in temples. and you have a closing div</div> without opening it. — Eduard Gamonal
– Eduard Gamonal, Commented Apr 28, 2014 at 10:56
the div opened just above the ul when i hard code the values of margin- bottom or bottom for the second one, the whole image looks great in CHROME, not so good in FIREFOX and in firefox responsive it overlaps in the center of the image PLEASE HELP — Niranjan Balkrishna Prajapati
– Niranjan Balkrishna Prajapati, Commented Apr 28, 2014 at 12:12

Sagar Devanga · Accepted Answer · 2014-04-28 12:08:56Z

1

Make the parent element RELATIVE and whatever you want to place over that image as ABSOLUTE then make this change in the above code

Make ul tag RELATIVE

and the strip image ABSOLUTE and add this

left:0px; bottom:0px;

answered Apr 28, 2014 at 12:08

Sagar Devanga

2,82930 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Alignment of the image on another image css angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related