Member Avatar for deucalion0

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
  • 144 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by deucalion0
Member Avatar for hericles

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?

Member Avatar for weekendrockstar

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.

Member Avatar for dantinkakkar

@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! :)

Member Avatar for weekendrockstar

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.

Member Avatar for deucalion0

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.