Position Images with links CS-Cart

[texas697]

I am working on a cs-cart site. I have a image with round circles. I then have other images that are round circles. I need to position the circle images over the first image circles. The problem is when I use position: absolute everything works great but when the browser changes resolutions the buttons move. when I use the position: relative the images stay in there place but the links do not work.
thrivegoods.net/?store_access_key=testing
click on Marketplace Info and go to bottom of the page

<p>
 <img src="http://thrivegoods.net/images/MAIN PAGES/menumainmarketplace.jpg" class="MenuMarketplaceBanner" style="background-color: initial;">
</p>

<p>
 <a href="http://thrivegoods.net/artist-info?action=preview"><img src="http://thrivegoods.net/images/MAIN%20PAGES/BUTTONS/roundinfoforartists.jpg" class="RoundInfoForArtists" alt="RoundInfoForArtists"></a>
</p>

.RoundAccountabilityButton {
 position: absolute;
  top: 1185px;
  left: 489px;
  z-index: 3;
 }

.MenuMarketplaceBanner {
 position: relative;
 z-index: 1;
  }

`

[Paulie_D]

Perhaps you could make a reduced case in Codepen.io but this

.RoundAccountabilityButton {
 position: absolute;
  top: 1185px;
  left: 489px;
  z-index: 3;
 }

has some very large numbers which indicates to me that there is a layout issue. You shouldn’t need to position something that much.

[texas697]

problem is I am limited to what can be done because of the way the site is setup. I don’t understand the reduced case? How do I do that?

[Paulie_D]

I don’t understand the reduced case? How do I do that?

You just give us enough code to demonstrate the problem in a controlled environment (such as Codepen.io) without us having to root around through your site with developer tools to try and figure out the ‘problem’.

I have no idea what this image is doing..

http://thrivegoods.net/images/MAIN%20PAGES/menumainmarketplace.jpg

Is it supposed to be a background or what?

[texas697]

got it, thanks
http://codepen.io/anon/pen/DnvBf
I placed the “Impact Areas” pic in the correct position

[Paulie_D]

I’m trying hard not to criticise too much but surely you aren’t seriously trying to use the whole image like that.

The page should be broken up into much smaller pieces….you even have text in the image and there is no way that should be there.

I think these giant images you have are examples for reference purposes meant to be sliced up into individual images.

It just doesn’t make sense as it currently stands.

[texas697]

Don’t worry about the criticism, I didn’t build this thing. just trying to help a friend.

[Paulie_D]

Then I think you’re sunk to be honest.

The whole site isn’t making sense to me.

You might be able to find someone willing to go through the whole thing with a fine-tooth comb but, to be honest, it something I’d be expecting to charge money for.

In fact, I’d recommend a complete re-write of the code.

[Author]

Posts