Templates, backgrounds and editable regions.

theshakaman · theshakaman

A simple question with, I hope, a simple answer!
I've designed a site that uses a background image (800x600) with links mapped
off it. So far so good. I then added an editable region, and made it into a
template. My problem comes from the positioning of the parts. My background
image is set to absolute centre, but the editable region takes it's location
from the corner of the screen, not the background, so keeps moving in different
size displays. Is there a way to anchor the editable region to the background
so when one moves the other does?

Thanks in advance,

Murray *ACE* · Murray *ACE*

> I've designed a site that uses a background image (800x600) with links

> mapped
> off it.

You cannot map links on a background image.

> but the editable region takes it's location
> from the corner of the screen, not the background, so keeps moving

The editable region is only inside some other element that is moving. This
has nothing to do with templates. It's strictly how you have made the page.

> Is there a way to anchor the editable region to the background
> so when one moves the other does?

No, but there is a way to have an element that contains the editable region
*and* the background image, and when it moves, everything in it moves too.

Your best bet is to post a link to your page so we can see the code.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"theshakaman" <webforumsuser@macromedia.com> wrote in message
news:ed9abt$pfu$1@forums.macromedia.com...

>A simple question with, I hope, a simple answer!
> I've designed a site that uses a background image (800x600) with links
> mapped
> off it. So far so good. I then added an editable region, and made it into
> a
> template. My problem comes from the positioning of the parts. My
> background
> image is set to absolute centre, but the editable region takes it's
> location
> from the corner of the screen, not the background, so keeps moving in
> different
> size displays. Is there a way to anchor the editable region to the
> background
> so when one moves the other does?
>
> Thanks in advance,
>

theshakaman · theshakaman

OK I lied slightly. Having dug out the problem page here is what I have done.
Inserted a picture and mapped links off that. then added a layer and made it
editable. As th ebrowser window expands the picture and mapped links move
together, but the layer and editable area remain anchored to the left hand
side. Can I anchor the layer to the picture somehow?
The problem page is [url]http://www.skydivenavy.com/test.htm[/url] The desired result
is at [url]http://www.skydivenavy.com[/url] where the pages are all graphics, but this in
itself is causing more problems, not least in updating!
Any suggestions greatfully received!

Murray *ACE* · Murray *ACE*

Are you building ASP-javascript pages? If not, then remove this line from
your page -

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>

and replace it with a valid and complete doctype, e.g.,

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Also, best practices suggest that you not have spaces in your
file/pathnames - please rename this file in DW's Files panel -

<img src="/psd/skydivenavy-template%20800x600.gif"

Then, change this -

</head>

to this -

<style type="text/css">

</style>
</head>

change this -

<body ...>

to this -

<body ...>
<div id="wrapper">

and this -

</body>

to this -


</div>
</body>

and see if that helps.

(by the way, your 800px wide image will cause scrollbars on an 800px screen)

If you are going to use layers, there are things you need to know. Please
go here -

[url]http://www.great-web-sights.com/g_layerlaws.asp[/url]

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"theshakaman" <webforumsuser@macromedia.com> wrote in message
news:edeel9$er1$1@forums.macromedia.com...

> OK I lied slightly. Having dug out the problem page here is what I have
> done.
> Inserted a picture and mapped links off that. then added a layer and made
> it
> editable. As th ebrowser window expands the picture and mapped links move
> together, but the layer and editable area remain anchored to the left hand
> side. Can I anchor the layer to the picture somehow?
> The problem page is [url]http://www.skydivenavy.com/test.htm[/url] The desired
> result
> is at [url]http://www.skydivenavy.com[/url] where the pages are all graphics, but
> this in
> itself is causing more problems, not least in updating!
> Any suggestions greatfully received!
>

mlapointe · mlapointe

Here's a fix that works for me. It has the added advantage of correcting that
annoying shift in positioning between IE and Firefox, so it's especially great
for positioning CSS menus:

1. Make sure that the layer that's now floating is in the same div as your
background image, or that they're both within the same container. The easiest
way is to create a container that holds everything within the <body></body>
tags.

2. Make the positioning of the outer div relative, for example, <div
id="container" style="position:relative">

3. Set the positioning of the inner div (or both inner divs) to absolute, for
example,
<div id="menu" style="position:absolute; left: 10px; top: 150px; width: 800px;
height: 30px; z-index:10">

Sounds counterintuitive, I know, but it works. Note that as soon as you change
the positioning of the div from relative to absolute or vice-versa, it will
jump wildly to a different part of your page, and you may not be able to move
it using drag-and-drop. No worries - just change the appropriate values in code
view until it's exactly where you want it.

Murray *ACE* · Murray *ACE*

The best solution is to not use layers at all. In the vast majority of
cases, you don't need to have absolutely positioned elements on the page.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"mlapointe" <webforumsuser@macromedia.com> wrote in message
news:edf68d$a64$1@forums.macromedia.com...

> Here's a fix that works for me. It has the added advantage of correcting
> that
> annoying shift in positioning between IE and Firefox, so it's especially
> great
> for positioning CSS menus:
>
> 1. Make sure that the layer that's now floating is in the same div as your
> background image, or that they're both within the same container. The
> easiest
> way is to create a container that holds everything within the
> <body></body>
> tags.
>
> 2. Make the positioning of the outer div relative, for example, <div
> id="container" style="position:relative">
>
> 3. Set the positioning of the inner div (or both inner divs) to absolute,
> for
> example,
> <div id="menu" style="position:absolute; left: 10px; top: 150px; width:
> 800px;
> height: 30px; z-index:10">
>
> Sounds counterintuitive, I know, but it works. Note that as soon as you
> change
> the positioning of the div from relative to absolute or vice-versa, it
> will
> jump wildly to a different part of your page, and you may not be able to
> move
> it using drag-and-drop. No worries - just change the appropriate values in
> code
> view until it's exactly where you want it.
>

theshakaman · theshakaman

Thanks, that almost has it. All the bits stay in the right place. The only bit
missing is moving the whole thing to the centre of the browser if the browser
is over 800x600. The test.htm link has been updated above.

Murray *ACE* · Murray *ACE*

OMG is that page slow. Your little image on the bottom left is 2.5MB.
Surely you can do better than that - start by resizing it BEFORE you upload
it.

You center it the way I told you in my second post. You have not yet
completed those instructions.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"theshakaman" <webforumsuser@macromedia.com> wrote in message
news:edjqqm$l7m$1@forums.macromedia.com...

> Thanks, that almost has it. All the bits stay in the right place. The only
> bit
> missing is moving the whole thing to the centre of the browser if the
> browser
> is over 800x600. The test.htm link has been updated above.
>

theshakaman · theshakaman

Hmm, tried that, and it all went to pot. But after combining the first two sets
of advice, it all works well. Thanks for the help.
P.S. I know about the size, will sort that and the other little bits now the
site works!:smile;

Murray *ACE* · Murray *ACE*

You're welcome. Good luck.

--
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
[url]http://www.dreamweavermx-templates.com[/url] - Template Triage!
[url]http://www.projectseven.com/go[/url] - DW FAQs, Tutorials & Resources
[url]http://www.dwfaq.com[/url] - DW FAQs, Tutorials & Resources
[url]http://www.macromedia.com/support/search/[/url] - Macromedia (MM) Technotes
==================

"theshakaman" <webforumsuser@macromedia.com> wrote in message
news:edkg4k$h4i$1@forums.macromedia.com...

> Hmm, tried that, and it all went to pot. But after combining the first two
> sets
> of advice, it all works well. Thanks for the help.
> P.S. I know about the size, will sort that and the other little bits now
> the
> site works!:smile;
>

Templates, backgrounds and editable regions.

Thread Tools

Display

Templates, backgrounds and editable regions.

Similar Questions and Discussions

Editable Regions

Libraries, Templates, Nested Templates, Repeat Regions,

Editable Regions and Locked Regions

Editable Repeating regions

Templates and editable regions

Re: Templates, backgrounds and editable regions.

Re: Templates, backgrounds and editable regions.

Re: Templates, backgrounds and editable regions.

Re: Templates, backgrounds and editable regions.

Re: Templates, backgrounds and editable regions.

Re: Templates, backgrounds and editable regions.

Re: Templates, backgrounds and editable regions.

Re: Templates, backgrounds and editable regions.

Re: Templates, backgrounds and editable regions.

Posting Permissions