0

Hey guys, I am creating a shopping basket and I have a background image set to a div that I want to position text over the top of certain parts of the image and some parts are dynamic, item quantity and total cost etc... so when these change everything I have positioned moves as I am using position relative for each anchor or paragraph tag.

So everything inside this div needs to be manually positioned but not move around when something inside the div changes, is there a better way to do this?

I would appreciate any help with this as I am quite stuck.

Many thanks!

4
Contributors
5
Replies
6
Views
5 Years
Discussion Span
Last Post by deucalion0
0

If you have set it out OK it shouldn't shift when values appear. You can specify lengths, padding, etc for the controls so that the expected outputs can fit in them without them having to resize.

Can you post up your HTML and CSS so we have get a better understanding?

1

Well you can create another div inside the div you already have and create a new CSS class and use CSS positioning attributes to ensure that no matter what else is changing/moving within the main div (the one with the bg image) that the dynamic text will stay where you require it to be.

0

@weekendrockstar is right. You can use CSS to do that... It'll make it damn easier... If you don't want anything to move around then I suggest to you to use absolute positioning. Since your content is already inside a <div>, it ain't gonna get affected! :)

0

Just remember if you go this route that the coordinates for positioning the smaller div (the one with the dynamic content) that you'll have to take into account that they will be placing the div within the location of the parent div container.

So if the main div with the background image has an absolute left positioning of 300px and you want the inner one to start 700px from the left of the page that the left positioning of the inner div should be 400px.

0

Hey guys thanks for all your input! I managed doing this by making the parent div position relative, and all inside elements position absolute, now everything works perfectly!

I appreciate all your help!!!

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.