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?

Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
1
  • Works fine with the addition of a z-index for the text. Thanks!
    – Per Enström
    Commented Apr 26, 2011 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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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