Member Avatar for SaroGFX

Hello lads,

So i'm struggeling with the following. I want to get the text a little bit closer to the image, but since the image has whitespace itself and I don't want to redo them all, I opted for adding a negative margin to the text.

It seemed to work, but what happens is that the text appears behind the image. I have tried googeling this problem and I've added z-indexes to both elements but nothing has helped. This is probably due to the reasonably complex nature of this template, but maybe there is an easy fix, and I would love to know and learn!

Here is the website that I'm working on and a screenshot of the problem since I obviously can't have a live version of the bug.

http://renardwatches.com/

Screenshot: https://dl.dropboxusercontent.com/u/21426520/Screen%20Shot%202016-02-08%20at%2015.03.03.png

Hope someone can help me out.

Cheers,
Saro

  • 3 Contributors
  • 4 Replies
  • 483 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by SaroGFX
Member Avatar for Sean Francis

One solution is to crop the bottom of the image so that the text appears. Another solution is to create a div. Use the image as the background of that div and put text inside that div. The HTML of that div will be like: <div><p>Text</p></div>

Member Avatar for SaroGFX

Hi Sean, the text is already placed in a div with the class info.

Member Avatar for ryantroop

in:
.thumbnail .info

with the negative margin, also add "position: relative"

Member Avatar for SaroGFX

Hi Ryan,

That works! Thank you!

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.