By alpha_chino on

Hi,

I have a php snippet that I want to place directly on top of an image.....Any idea of how to do this?

Thank you in advance.

⋅ Categories: Drupal 6.x

Comments

nevets’s picture

nevets commented

What do mean by placing the snippet directly on top of an image? Do you mean the actual snippet or the text/html generated by the snippet?

alpha_chino’s picture

alpha_chino commented

I mean the text generated from it.

www.westcoastkidscamp.com

This is the site, Im trying to put the php generated text below the calendar image on the right side of the screen right in the middle of the image.

Thanks in advance!

nevets’s picture

nevets commented

For a more advance solution see: http://drupal.org/project/signwriter

For a alternative structure your block html something like this

<?php $text = generated_text(); ?>
<div class="overlay-holder">
<div class="overlay-text"><?php print $text; ?></div>
<div class="overlay-image"><img  ...  /></div>
</div>

Then add this css to your themes style.css file

.overlay-holder {
  position: relative;
}

.overlay-holder .overlay-text {
  position:absolute;
  top:10px;
  left: 0px;
}

Adjust left and top to determine placement of text.

alpha_chino’s picture

alpha_chino commented

When I inputed the changes into the css the entire page went wonky. The right sidebar images ended up on the left of the screen......Any suggestions? And by the way, thank you for your reply, you are a glimpse of hope for our site in an otherwise difficult day :)

nevets’s picture

nevets commented

This worked for me

<div class="overlay-holder" style="position: relative;">
<div class="overlay-text" style="position: absolute; top: 160px; left: 50px;">Hello World</div>
<div class="overlay-image"><img src="sites/default/files/images/camp_begins.gif"/></div>
</div>

Styles are inline because I tested this on your site, I would actually apply them in style.css.
I started with what you had in the block, the image tag was very wonky and may have been a source of problems.

Top and left values are a starting point, you will need to adjust.

nevets’s picture

nevets commented

To modify the font size change

.overlay-holder .overlay-text {
  position:absolute;
  top:10px;
  left: 0px;
}

to

.overlay-holder .overlay-text {
  position:absolute;
  top:10px;
  left: 0px;
  font-size: 1.2em;
}

Values greater than 1 for font size will increase it.