positioning text over an image

[balkbio]

Hi there, please help. I am new at this but have been doing a lot of reading on the subject and cannot figure out what the problem with my code is. I want to float some text over a specific part of an image (absolute positioning with respect to the image, right? So I used nested divs), and I want that image to be centered on the page. Here is the code and I can’t figure out for the life of me why it’s not working:

Code:

body {background: white;
color: black;
font-size: 14px;
font-family: Helvetica,san-serif;
text-align: center}
.image {position: relative;
align: center;}
.image .text {position: absolute;
top: 15px;
left: 380px;
width: 558px;
text-align: justify;
line-height: 125%;
font-family: Courier}

Code:

Balk Biological Consulting was founded in 2006 by biologist Michelle L. Balk, in Encinitas, CA. After spending

five years at Dudek & Associates, Inc. (now just “Dudek”) learning the ropes, Ms. Balk decided to hang out her own

shingle.

As our specialty is botany, we spend much of our field time conducting special-status plant species surveys and

vegetation mapping throughout California. See our services page for more information on

what we do and where we work.

It looks ok on my screen until I resize the browser window–then the text moves around. But with the nested divs shouldn’t the text positioning be relative to the position of the image? What is wrong with the code?

By the way, if I take out the "position: relative" for the image, the image is still centered on the page (because it inherits the text-align: center" styling??) but the text jumps around even worse, I guess because it doesn’t "see" that there is even an image?

Please please help me. You’ll have my undying gratitude.

I attached a screen shot of what I am trying to get this to look like (sorry it’s not online yet so I can’t send you to a site)…looks fine on my browser until I resize the page–so I know the text isn’t positioned relative to the image like I want it to be.

Thank you!

Michelle

[dcp3450]

Given your description the screen shot is the way you want it to look and there is only an issue when you resize. Correct?

Can you also upload a screen shot of what happens when it messes up?

It looks like you want the text to stay beside the image. Try this don’t use the absolute positioning. Try this instead:

set .image to display: block and remove the relative positioning. use margins to center (google "center div with margins")

create a class that has your image and float it float it left such as
.imageToUse
{
background: transparent url(collage_about_us_cropped_resized.jpg) no-repeat top left;
height: xx px;
width: xx px;
float: left;
}

remove the absolute positioning for the text. and use padding / margins to position your text relative to .image and .imageToUse

Tried to help you with your code but leave enough holes so you can do some research and learn this stuff better. There are a few ways to learn this stuff:

ask, research, play, and practice. You did the first part, I’m pushing you to the second part.

Hope this helps.

[balkbio]

Hi dcp, thank you very much for your reply. I tested it on my friend’s computer, which is a different screen size, and it is a problem there. If you look more closely at the screen shot (which shows how the page is supposed to look) you’ll see the text is on top of an image–I increased the transparency of the right side of the image (under the text) in Photoshop so that I could put text on the image and the viewer would be able to read the text. So I do want the text on the image, not next to it. (Although if I continue to struggle with this, I might end up with the text next to the image.)

I’ll go and try to play with this some more–I’ve been away from it for a full 24 hours so I should have some patience for it again.

Thanks again for your help!

Michelle

[Author]

Posts