2

I use Drupal 6 with Views 6.x-2.10.

I have a spotlight region on my page where I want to display a picture and a description of the next upcoming event.

I want the description text to be on top of the image, in a div with half transparent background, sort of [---image--[description]-].
The image and description are fetched with a view. How do I style it so that one field in the view (the description) is on top of the picture field?

It would be easy to do if I could get the content in <div class="picture"><div class="description"></div></div>, but the view puts a hell of a lot of other divs around it, making it impossible to have the description inside of the picture div.

What should I do?

3

I find that the easiest and simplest solution is pure css. All you need to know, is the height of the box with text, then it's a simple matter of using margin-top: -?px; and creating a background with opacity. One option could be an image.

  • Works fine with the addition of a z-index for the text. Thanks! – Per Enström Apr 26 '11 at 11:01
1

I have found using position:relative; instead of negative margins works more uniform in all browsers, you may want to try this if margin-top is giving you some issues in IE.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.