Layers

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
 
R

Ronx

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Layers and FP 2003 0
layers and FP 2003 3
How do you stop layes from shifting on a web page? 5
Auto-sizing the browser window? 1
New Site w/Embedded WMV - 4 Questions 1
Converting excel to PDF, single page converts to multiple HELP! 1
layout best practices 1
Front Page design Issue 4

Top