PDA

View Full Version : Resolved positioning text over an image



balkbio
Jan 20th, 2010, 04:29 AM
Hi folks, I can't figure out why this code doesn't work. I have an image I want centered on the page, and then I want text to sit on top of the image (shoved over on the left of the image a bit, but still on top of the image). It looks ok until I resize the browser window, at which point the text stays absolutely positioned with respect to the window, NOT the image like I wanted.

The code:


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



<div class="image">
<img src="collage_about_us_cropped_resized.jpg" alt="photo collage" />
<div class="text">
<p>Balk Biological Consulting was founded in 2006 by biologist Michelle L. Balk, in Encinitas, CA. After spending five years at Dudek & Associates, Inc. (now Dudek Engineering + Environmental) learning the ropes, Ms. Balk decided to hang out her own shingle.</p>
<p>As our specialty is botany, we spend much of our field time conducting special-status plant species surveys and vegetation mapping throughout California. We also perform wetlands delineatons, limited general wildlife surveys, and construction monitoring.</p>
</div>
</div>

I'm posting a screen shot of what this is supposed to look like...until I resize my browser window and it all falls apart...

Any help would be greatly appreciated!

Thanks,
Michelle

Doctor_Varney
Jan 20th, 2010, 05:24 AM
Well, the text will stay put because it's absolutely positioned... Not the best recipe for a layout like this.

You appear to have set the image class both relative and absolute, which doesn't make a lot of sense.


.image {position: relative;}
.image .text {position: absolute;


I'd be inclined to use that faded background image in the background property of a div, instead. You can use background positioning and then apply margins to your p to position the text inside it.

From the screenshot I can't tell how many images you're using in there, so it's hard to suggest code without causing confusion. You need to either post the URL or a more complete version of your code.

Regards

Dr. V

balkbio
Jan 20th, 2010, 05:40 AM
Thanks for your reply, Dr. Varney.

Since I used nested divs, doesn't this mean that the text should position absolutely with respect to the parent div (in this case, the image)?

By the way, it's just one image even though it looks like several--it's a photo collage made in Picasa and then brought into Photoshop where I lightened up the right-hand 80% or so of the image so that text would be readable when placed on top of it.

I'm sorry I can't post the URL because the site isn't online yet.

Thanks for the suggestion of making the image a background for the div. I might just try that so I can finally move on with life. But it's maddening to me why my code won't work as written!

Thanks again,
Michelle

boogily
Jan 20th, 2010, 03:35 PM
There may be a better method than this since I am newer to this, but since you've had no responses, You might want to try this. Nest some divs and take away the absolute and relative positioning. I've just made the option to change the style right on the div for now

<div id="imageContainer" style=(insert overall width and height of your photobox and even have it as a background image, not sure what you're trying to accomplish visually here)... >

<div id="text" style="margin-left:...fill in the blank; width=... fill in the blank; height:... fill in the blank">
"Balk ... fill in text here ... "
<-- end "text" -->
</div>

<-- end "image container -->
</div>

Place the "image container" div naturally where it is supposed to go, or use some margins to place it correctly. You shouldn't need any positioning this way. I could be off because I am unsure on what you are trying to accomplish, but I hope it helps

Doctor_Varney
Jan 20th, 2010, 07:46 PM
Since I used nested divs, doesn't this mean that the text should position absolutely with respect to the parent div (in this case, the image)

Good point, though the different positioning types will still be invoked in the one element, which to me, does not make logical sense. My best answer is, I don't know. I've tried nested stuff like that myself and come unstuck; hence the simpler background method.


By the way, it's just one image even though it looks like several--it's a photo collage made in Picasa and then brought into Photoshop where I lightened up the right-hand 80% or so of the image so that text would be readable when placed on top of it.

Oh, I see. I assumed you had a faded image in one column and a stack of strong images to the left, to make it look like just those in the first column were illuminated. So if it's one image, this is even easier. Img expressed as background property of the div, then your paragraph can be margined left to expose the four clear images. Might want to give that p a width of it's own, too.


I'm sorry I can't post the URL because the site isn't online yet.

Fair enough. I never post to server until I'm finished, either.


Thanks for the suggestion of making the image a background for the div. I might just try that so I can finally move on with life. But it's maddening to me why my code won't work as written!

I'm not exactly new to this, so I have a lot of maddening experiences under my belt - but still no cool website. You can count me as a newbie. I see people tearing their hair out every day in here.

By the way - I'm sure I was talking to Boogily yesterday - whose balkbio? And Boogily is suddenly offering advice to balkbio...?! I assume now you've gone so mad with this, you're talking to yourself!? :D

Kind Regards

Dr. V

balkbio
Jan 21st, 2010, 04:49 AM
Hi boogily, thank you for your response. Those nested divs really give me fits, apparently. I ended up using Dr. Varney's advice (and I see it is also one of your ideas) to just make the image a background image of the parent div. Then I just specified the size of the image in pixels and added some padding (so that the child div--which is the text box) ended up in the correct place, and viola, it works.

Thanks again looking at my post and helping with this!

balkbio
Jan 21st, 2010, 04:59 AM
And the padding, by the way, was specified inside the styling for the child div--took me a while to figure that out too!

balkbio
Jan 21st, 2010, 05:13 AM
Hi again Dr. Varney,

You might have read my reply to boogily already but if not I just wanted to let you know that the page is behaving now! (For the moment anyway!) I ended up taking your advice and making the image the background of a div, and then nesting the text inside of it. I got the text into the proper position by specifying the top and left padding for the child div. I had to specify relative positioning for both parent and child divs...which still confuses me, honestly, because of what I've read. Here's a quote from CSS: The Missing Manual 2nd Edition (2009) page 363:


Whenever you use absolute positioning to place an element on the page, the exact position depends upon tghe positioning of any other tags the styled element is nested in. Here are the rules in a nutshell:
- A tag is positioned relative to the browser window if it has an absolute position and [emphasis theirs] it's not inside any other tag that has absolute, relative, or fixed positioning applied to it. Ok, no problem there.

-A tag is positioned relative to the edges of another element if it's inside another tag with absolute, relative, or fixed positioning.

So according to the second rule above, it seems like I should have been able to specify absolute positioning for the child and any type of positioning for the parent. But it didn't work that way!

Anyway, who knows. Your solution worked, so I am going forward. Thank you again for suggesting it!

oh P.S., I swear I don't have "boogily" as my alias--I'm not on here talking to myself! Really! :)