Layers

  • Thread starter Thread starter MK
  • Start date Start date
M

MK

I have an image that I want to put a title over (like a magazine cover), I
used layers to do this. It looked great. I published it. It looked fine on my
desktop (squarish screen, older Dell) But on my laptop (rectangular screen,
newer Dell) the image was centered but the "layer"/title was shifted to the
left. No longer properly on the image.

What is going on here?

Any help is greatly appreciated!

MK
 
That's how layers work. The layer takes it's coordinates from the closest
parent that is positioned, or the <body> tag, which means top left of the
page.
Changing the browser window size, or changing the text size, will disrupt
most pages that use layers for layout in the way you are.
Except for menus and captions where the text is small (in size and quantity)
layers are generally a bad idea.

Alternatives:
1) Place the image in a container as a background image, and place the text
in the container - use padding and margins to get the text position more or
less right.
Example: (assumes image dimensions 200 x 70 with one line, short, caption)

<div style="width: 200px; height: 70px; margin: 0 auto; background:
url(images/picture.jpg) no-repeat;">
<p style="margin: 50px 0 0 0; text-align: center;">Caption text here</p>
</div>
Adjust the 50px top margin as required.


2) Place the image in a relatively positioned container, and use absolute
positioning for the caption

<div style="position: relative;">
<p style="text-align: center;"><img src="images/picture.jpg" width="200"
height="70" alt="whatever"></p>
<div style="position: absolute";top:50px; left:20px;>
<p>Caption text here</p>
</div>
</div>
--
Ron Symonds
Microsoft MVP (Expression Web)
http://www.rxs-enterprises.org/fp

Reply only to group - emails will be deleted unread.
 
Back
Top