LAYERS

J

jeffuk123

Hello everyone,

For weeks I have 'trawled' the internet asking questions to many forums, as
well as searching various websites and still have not found the answer I am
looking for.

I am relatively new to frontpage, but getting to feel my way around quite
well and html also.

However, nobody seems to have come up with a clear answer how I can make
layers remain in the same place across different browsers i.e. Internet
Explorer and Netscape.

A layer I insert in IE moves to a different part of the page (if only by a
few inches), in Netscape. This is increasingly frustrating.

There must be a solution or alternative to this considering the thousands of
websites that are created everyday, but nowhere can I find the solution, even
on forums I have asked.

Kind regards to all,
Jeff
 
T

Thomas A. Rowe

One option is to use table instead to create your layout, which do not move.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
==============================================
If you feel your current issue is a results of installing
a Service Pack or security update, please contact
Microsoft Product Support Services:
http://support.microsoft.com
If the problem can be shown to have been caused by a
security update, then there is usually no charge for the call.
==============================================
 
M

Murray

A layer I insert in IE moves to a different part of the page (if only by a
few inches), in Netscape. This is increasingly frustrating.

This is only an indication of something you are doing wrong.

Here are some things that can make you think that the layer is moving -

1. The content on the page is in 100% wide tables
2. The content on the page is in a centering table
3. The layer has been inserted into a table cell

Other than that, layers, being absolutely positioned, are *ABSOLUTELY*
positioned on the screen. They just do not move. And 1px in IE is the same
as 1px in FireFox, or Safari, or any other browser.

If you will post a link to the page containing the troublesome code, I am
sure that we will find one of those three things at work.
 
J

jeffuk123

Murray

This is interesting. All 3 points you have mentioned apply to what I have
done. I am unable to post the link, but would like to post the code. There is
not very much to the code as I have started again and I am trying to take one
step at a time. At the moment there is only one layer. This is the layer with
the date inserted. This laer and other layers I create move in Netscape.

Many thanks, here is the code:-

-------------------------------------------------------
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>

<div align="center">

<!--TABLE FOR WHOLE OF PAGE-->
<table cellspacing="1" cellpadding="0" border="1" bgcolor="white"
id="Complete_Table_shell" height="478" width="100%" style="border-style:
ridge; border-width: 3px">

<!--HOMEPAGE TOP HORIZONTAL TABLE-->
<tr height="50">
<td colspan="2" bgcolor="#000080" height="88">


<!--Layer 1 - DATE & TIME-->

<div style="position: absolute; width: 200px; height: 43px; z-index: 1;
left: 730px; top: 24px" id="layer1-DATE & TIME">
<p align="center"><font face="Arial" size="2" color="#FFFFFF">
<!--webbot bot="Timestamp" S-Type="REGENERATED" S-Format="%A, %d %B %Y"
--></font></div>
<p>



</td>
</tr>

<!--HOMEPAGE LEFT-HAND TABLE WITH LINKS-->
<tr height="200">
<td bgcolor="#000080" width="12%" height="387">
</td>

<!--HOMEPAGE MAIN CONTENT PAGE-->
<td bgcolor="white" width="88%" height="387">
</td></tr>

</table>

</div>

<body>

</body>

</html>

---------------------------------------------------------------------------------------------
 
M

Murray

</head>

<div align="center">

Although optional, it's considered good form to have a <body> tag on each
page. You do not. I recommend its inclusion. 8)

Oh - I found it!
</div>

<body>

</body>

</html>

I recommend you move it to where it should be (immediately after </head>)!

Then, change this -

<td colspan="2" bgcolor="#000080" height="88">


<!--Layer 1 - DATE & TIME-->

<div style="position: absolute; width: 200px; height: 43px; z-index: 1;
left: 730px; top: 24px" id="layer1-DATE & TIME">
<p align="center"><font face="Arial" size="2" color="#FFFFFF">
<!--webbot bot="Timestamp" S-Type="REGENERATED" S-Format="%A, %d %B %Y"
--></font></div>
<p>



</td>

to this -

<td colspan="2" bgcolor="#000080" height="88">
</td>

and this -

</body>

to this -

<!--Layer 1 - DATE & TIME-->

<div style="position: absolute; width: 200px; height: 43px; z-index: 1;
left: 730px; top: 24px" id="layer1-DATE & TIME">
<p align="center"><font face="Arial" size="2" color="#FFFFFF">
<!--webbot bot="Timestamp" S-Type="REGENERATED" S-Format="%A, %d %B %Y"
--></font></div>
<p>
</body>

(thereby removing the layer from the table)

But you still have a problem here -

width="100%"

since that is still going to cause the table to move UNDER the (now)
absolutely positioned layer.

Let me ask you - why are you using a layer for that?

And by the way, this is not going to work as an ID value - id="layer1-DATE
& TIME". As I recall you cannot use spaces or punctuation other than
underscores and hyphens in the id value.
 
J

jeffuk123

Murray

Thanks for your reply. The reason I am using a layer for date and time is
that the only way or best way to insert text is inside a layer from my
knowledge. The only way I can get text to go to the position I want it to is
inside as a layer. As for the 'id' I assumed that this was for 'naming'
purposes only and that it didn't have any bearing on the page itself. Is
there an alternative to adding text other than in layers?

Thanks
Jeff
 
M

Murray

The only way I can get text to go to the position I want it to is
inside as a layer.

But there are many other less troublesome ways.
Is
there an alternative to adding text other than in layers?

Why not put it directly into that table cell where the layer was?
 
J

jeffuk123

Hi Murray,

Once again thanks for taking the time to respond. It had crossed my mind to
just insert text in the table, However, if I try to tab along to the right
hand side of the table cell, the cursor moves directly lower down the page to
the next table instead. It doesn't move to the right hand side of the table
cell as I want it to. Also, when I try to arrow up to move the cursor it just
moves to the center of the page. Thus, can't insert text where I wish.

Regards,
Jeff
 
M

Murray

Thus, can't insert text where I wish.

You just don't know how to do it - that's because you lack the basic
understanding of HTML and how it works. It would be a good idea to try to
pick this up as soon as you can.

How do you want the text displayed in that cell? (Psss - don't use the tab
key)
 
R

Ronx

You can use cell properties to align the text to right, left or centre
of the table cell.
Or, for more definite control, nest a table in the cell, or split the
cell into smaller cells.
 
J

jeffuk123

Ok,

Basically, if I try to just use the space key to move the cursor where I
want it to this isn't gonna work. Also, if I insert a table within the table
cell already there, the new table doesn't move to where I want it.

If I use center, left or right align for a new table, the table only moves
to those positions, but not up or down, or exactly where I want it to.

I am aware that my lack of html doesn't doesn't help matters, but simply,
how does anyone else do it? This is I feel what hasn't been answered,
although I do appreciate all answers to date. How do you for example solve
such issues?

Many thanks
 
M

Murray

It would be ever so much easier to see what you are working with and to know
where you want the text to be. Otherwise we are waving our hands in the air
with general solutions that may not have any relevance to your specific
needs. See what I mean?
 
J

jeffuk123

Also,

I haven't found any sites or forums that mention these issues or anything
relating to using layers in different browsers.

Thanks
 
J

jeffuk123

Thanks for your reply again.

Basically, all I want to do is insert text anywhere I want in frontpage 2003
that is compatible in any browser. From my very brief experience and looking
for more answers in forums and the Internet this is a huge problem. Is this
correct?

I gather its not as simple as just inserting a layer, adding text to it and
it ibeing compatible in IE and netscape. Due to the hundreds of sites created
daily, I assumed that it was straightforward to apply. Again I ask, how do
others do it, whereby text or layers are displayed the same in different
browsers?

Many thanks
Jeff
 
R

Rob Giordano \(Crash\)

a simple way has already been mentioned...tables, nested tables and cells.


| Thanks for your reply again.
|
| Basically, all I want to do is insert text anywhere I want in frontpage
2003
| that is compatible in any browser. From my very brief experience and
looking
| for more answers in forums and the Internet this is a huge problem. Is
this
| correct?
|
| I gather its not as simple as just inserting a layer, adding text to it
and
| it ibeing compatible in IE and netscape. Due to the hundreds of sites
created
| daily, I assumed that it was straightforward to apply. Again I ask, how do
| others do it, whereby text or layers are displayed the same in different
| browsers?
|
| Many thanks
| Jeff
|
| "jeffuk123" wrote:
|
| > Hi Murray,
| >
| > Once again thanks for taking the time to respond. It had crossed my mind
to
| > just insert text in the table, However, if I try to tab along to the
right
| > hand side of the table cell, the cursor moves directly lower down the
page to
| > the next table instead. It doesn't move to the right hand side of the
table
| > cell as I want it to. Also, when I try to arrow up to move the cursor it
just
| > moves to the center of the page. Thus, can't insert text where I wish.
| >
| > Regards,
| > Jeff
| >
| > "Murray" wrote:
| >
| > > > The only way I can get text to go to the position I want it to is
| > > > inside as a layer.
| > >
| > > But there are many other less troublesome ways.
| > >
| > > > Is
| > > > there an alternative to adding text other than in layers?
| > >
| > > Why not put it directly into that table cell where the layer was?
| > >
| > > --
| > > Murray
| > > --------------
| > > MVP FrontPage
| > >
| > >
| > > | > > > Murray
| > > >
| > > > Thanks for your reply. The reason I am using a layer for date and
time is
| > > > that the only way or best way to insert text is inside a layer from
my
| > > > knowledge. The only way I can get text to go to the position I want
it to
| > > > is
| > > > inside as a layer. As for the 'id' I assumed that this was for
'naming'
| > > > purposes only and that it didn't have any bearing on the page
itself. Is
| > > > there an alternative to adding text other than in layers?
| > > >
| > > > Thanks
| > > > Jeff
| > > >
| > > > "Murray" wrote:
| > > >
| > > >> > <title>New Page 1</title>
| > > >> > </head>
| > > >> >
| > > >> > <div align="center">
| > > >>
| > > >> Although optional, it's considered good form to have a <body> tag
on each
| > > >> page. You do not. I recommend its inclusion. 8)
| > > >>
| > > >> Oh - I found it!
| > > >>
| > > >> > </div>
| > > >> >
| > > >> > <body>
| > > >> >
| > > >> > </body>
| > > >> >
| > > >> > </html>
| > > >>
| > > >> I recommend you move it to where it should be (immediately after
| > > >> </head>)!
| > > >>
| > > >> Then, change this -
| > > >>
| > > >> <td colspan="2" bgcolor="#000080" height="88">
| > > >>
| > > >>
| > > >> <!--Layer 1 - DATE & TIME-->
| > > >>
| > > >> <div style="position: absolute; width: 200px; height: 43px;
z-index: 1;
| > > >> left: 730px; top: 24px" id="layer1-DATE & TIME">
| > > >> <p align="center"><font face="Arial" size="2" color="#FFFFFF">
| > > >> <!--webbot bot="Timestamp" S-Type="REGENERATED" S-Format="%A, %d %B
%Y"
| > > >> --></font></div>
| > > >> <p>
| > > >>
| > > >>
| > > >>
| > > >> </td>
| > > >>
| > > >> to this -
| > > >>
| > > >> <td colspan="2" bgcolor="#000080" height="88">
| > > >> </td>
| > > >>
| > > >> and this -
| > > >>
| > > >> </body>
| > > >>
| > > >> to this -
| > > >>
| > > >> <!--Layer 1 - DATE & TIME-->
| > > >>
| > > >> <div style="position: absolute; width: 200px; height: 43px;
z-index: 1;
| > > >> left: 730px; top: 24px" id="layer1-DATE & TIME">
| > > >> <p align="center"><font face="Arial" size="2" color="#FFFFFF">
| > > >> <!--webbot bot="Timestamp" S-Type="REGENERATED" S-Format="%A, %d %B
%Y"
| > > >> --></font></div>
| > > >> <p>
| > > >> </body>
| > > >>
| > > >> (thereby removing the layer from the table)
| > > >>
| > > >> But you still have a problem here -
| > > >>
| > > >> width="100%"
| > > >>
| > > >> since that is still going to cause the table to move UNDER the
(now)
| > > >> absolutely positioned layer.
| > > >>
| > > >> Let me ask you - why are you using a layer for that?
| > > >>
| > > >> And by the way, this is not going to work as an ID value -
| > > >> id="layer1-DATE
| > > >> & TIME". As I recall you cannot use spaces or punctuation other
than
| > > >> underscores and hyphens in the id value.
| > > >>
| > > >> --
| > > >> Murray
| > > >> --------------
| > > >> MVP FrontPage
| > > >>
| > > >>
| > > >> | > > >> > Murray
| > > >> >
| > > >> > This is interesting. All 3 points you have mentioned apply to
what I
| > > >> > have
| > > >> > done. I am unable to post the link, but would like to post the
code.
| > > >> > There
| > > >> > is
| > > >> > not very much to the code as I have started again and I am trying
to
| > > >> > take
| > > >> > one
| > > >> > step at a time. At the moment there is only one layer. This is
the
| > > >> > layer
| > > >> > with
| > > >> > the date inserted. This laer and other layers I create move in
| > > >> > Netscape.
| > > >> >
| > > >> > Many thanks, here is the code:-
| > > >> >
| > > >> > -------------------------------------------------------
| > > >> > <html>
| > > >> >
| > > >> > <head>
| > > >> > <meta http-equiv="Content-Type" content="text/html;
| > > >> > charset=windows-1252">
| > > >> > <title>New Page 1</title>
| > > >> > </head>
| > > >> >
| > > >> > <div align="center">
| > > >> >
| > > >> > <!--TABLE FOR WHOLE OF PAGE-->
| > > >> > <table cellspacing="1" cellpadding="0" border="1" bgcolor="white"
| > > >> > id="Complete_Table_shell" height="478" width="100%"
| > > >> > style="border-style:
| > > >> > ridge; border-width: 3px">
| > > >> >
| > > >> > <!--HOMEPAGE TOP HORIZONTAL TABLE-->
| > > >> > <tr height="50">
| > > >> > <td colspan="2" bgcolor="#000080" height="88">
| > > >> >
| > > >> >
| > > >> > <!--Layer 1 - DATE & TIME-->
| > > >> >
| > > >> > <div style="position: absolute; width: 200px; height: 43px;
z-index: 1;
| > > >> > left: 730px; top: 24px" id="layer1-DATE & TIME">
| > > >> > <p align="center"><font face="Arial" size="2" color="#FFFFFF">
| > > >> > <!--webbot bot="Timestamp" S-Type="REGENERATED" S-Format="%A, %d
%B %Y"
| > > >> > --></font></div>
| > > >> > <p>
| > > >> >
| > > >> >
| > > >> >
| > > >> > </td>
| > > >> > </tr>
| > > >> >
| > > >> > <!--HOMEPAGE LEFT-HAND TABLE WITH LINKS-->
| > > >> > <tr height="200">
| > > >> > <td bgcolor="#000080" width="12%" height="387">
| > > >> > </td>
| > > >> >
| > > >> > <!--HOMEPAGE MAIN CONTENT PAGE-->
| > > >> > <td bgcolor="white" width="88%" height="387">
| > > >> > </td></tr>
| > > >> >
| > > >> > </table>
| > > >> >
| > > >> > </div>
| > > >> >
| > > >> > <body>
| > > >> >
| > > >> > </body>
| > > >> >
| > > >> > </html>
| > > >> >
| > > >>
---------------------------------------------------------------------------------------------
| > > >> >
| > > >>
| > > >>
| > > >>
| > >
| > >
| > >
 
R

Ronx

The nested table is designed to fill the entire cell. Design the cell
layout in the nested table to position the cursor where you need it
example:
<td>
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="17%">&nbsp;</td>
<td width="70%">Insert your text here</td>
<td width="13%">&nbsp;</td>
</tr>
</table>

This paces your text in the cell, starting 17% of the cell width, and
leaving a right margin of 13%.
Change the cell sizes (so they total 100%), and if required leave out
the third cell (for right alignment)
This gives a highly granular, and flexible method of positioning text.
For vertical alignment, again set cell properties for top, middle or
bottom, or use spacer .gifs to align pixel perfect:
<td valign="top"><img src="spacer.gif" width="10" height="3"
alt=""><br>
Your text goes here</td>
This will place the text 3px from the top of the cell.

Or use CSS instead of the spacer:
<td style="padding-top:3px;">your text goes here</td>
but this can have different effects depending on the !doctype in use
(or lack of !doctype)

If you want pixel perfect displays, you *must* learn HTML and CSS -
FrontPage will not do it for you, and nor will any other web editor.
 

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

Top