Layer positiong trouble

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

I usually have no trouble doing this even in free HTML editors, I would like
to position a layer - or a div, 150 pixels in from the left, and its right
margin 20% in from the right border? FP just will not apply the positioning
that I could normally hand code in the layer positiong window.

Any help? I seme to be missing something.
 
Why not just hand code it, since you know how to?

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
 
Because I bought this program to get away from repetitive and simple things.
If FrontPage has a box for it - accepts em, px and % - then it should be
allowing that.
 
Agreed, but sometimes it is just easy to hand code something, when you know how.

Anyway, I can't help you with this specify issue as I don't use CSS/Absolute positioning.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
 
The problem is that it seems that Microsoft has forgot entirely to code in
margins - I have to manually remove the position: absolute - and then add
margin- to all the properties. If one does alot of chnaging - that can be
bad because FP embeds the styles - and lists them in the wrong order -
instead of going top, right, bottom, left which is what I am used to doing
(for instant one should just say "margin: xx% xxpx xxem 0;"
 
Its not the positioning in absolute, its that FP will not allow any other
way. If on clicks on relative - nothing happens - except getting a big box.
Clicking on nothing - one gets a text box. Its simply not allowing one to
add in margins - and not allowing any sort of liquid design. I have a
graphic that runs downt he right of my page - so I want the right text to
stop short of that graphic. On the left - I have a variety of pictures - and
to just keep the page narror enough that in wide screened browser - the text
doesn't all end up in one line - I just want FP to insert code that does this:

<div style="z-index: 1; margin-left: 25%; top: 0px; margin-right: 20px;
bottom: 0em; border: 2px solid #00FF00; padding-left: 0px; padding-right:
130px; padding-top: 1.05em; padding-bottom: 2em" id="layer2">
<p align="right">right</p>
<p align="left">left</div>

This is what I would like FP to create.
 
Ok, you will have to wait for a reply from someone that works with that function of FP to provide
you with a solution or workaround. Personally, I prefer to use tables to structure my page layouts.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
WEBMASTER Resources(tm)

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
 
Create your Div and turn on View Toolbars Positioning
or start w/ View Task Pane and select the Layers Task pane
(you can enter % or em or px or whatever you think works)

PS
IMHO all those styles belong in an external style sheet (not an inline style) for cross browser CSS support
--




| Its not the positioning in absolute, its that FP will not allow any other
| way. If on clicks on relative - nothing happens - except getting a big box.
| Clicking on nothing - one gets a text box. Its simply not allowing one to
| add in margins - and not allowing any sort of liquid design. I have a
| graphic that runs downt he right of my page - so I want the right text to
| stop short of that graphic. On the left - I have a variety of pictures - and
| to just keep the page narror enough that in wide screened browser - the text
| doesn't all end up in one line - I just want FP to insert code that does this:
|
| <div style="z-index: 1; margin-left: 25%; top: 0px; margin-right: 20px;
| bottom: 0em; border: 2px solid #00FF00; padding-left: 0px; padding-right:
| 130px; padding-top: 1.05em; padding-bottom: 2em" id="layer2">
| <p align="right">right</p>
| <p align="left">left</div>
|
| This is what I would like FP to create.
 
That would certainly be the best way, but it would have no impact on
cross-browser rendering (inline vs stylesheet), Stefan.
 
I insert a layer, and then manually edit the code in split view. I change
this -

<div style="position: absolute; width: 100px; height: 100px; z-index: 1;
padding-left: 150px; padding-right: 20%" id="layer1">&nbsp;</div>

to this -

<div style="height: 100px; z-index: 1;margin-left: 150px; margin-right: 20%"
id="layer1">&nbsp;</div>

Is that not what you want? As far as I can tell, FP has no UI for doing
this kind of thing....
 
Except w/ older browsers that don't support inline styles well (NN4) and balk at the 1st style they don't recognize
- by using external (browser specific) styles you can at least try to control what happens (or not) w/ styles that are not
universally supported

--




| That would certainly be the best way, but it would have no impact on
| cross-browser rendering (inline vs stylesheet), Stefan.
|
| --
| Murray
|
| | > Create your Div and turn on View Toolbars Positioning
| > or start w/ View Task Pane and select the Layers Task pane
| > (you can enter % or em or px or whatever you think works)
| >
| > PS
| > IMHO all those styles belong in an external style sheet (not an inline
| > style) for cross browser CSS support
| > --
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > To find the best Newsgroup for FrontPage support see:
| > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > _____________________________________________
| >
| >
| > | > | Its not the positioning in absolute, its that FP will not allow any
| > other
| > | way. If on clicks on relative - nothing happens - except getting a big
| > box.
| > | Clicking on nothing - one gets a text box. Its simply not allowing one
| > to
| > | add in margins - and not allowing any sort of liquid design. I have a
| > | graphic that runs downt he right of my page - so I want the right text
| > to
| > | stop short of that graphic. On the left - I have a variety of
| > pictures - and
| > | to just keep the page narror enough that in wide screened browser - the
| > text
| > | doesn't all end up in one line - I just want FP to insert code that does
| > this:
| > |
| > | <div style="z-index: 1; margin-left: 25%; top: 0px; margin-right: 20px;
| > | bottom: 0em; border: 2px solid #00FF00; padding-left: 0px;
| > padding-right:
| > | 130px; padding-top: 1.05em; padding-bottom: 2em" id="layer2">
| > | <p align="right">right</p>
| > | <p align="left">left</div>
| > |
| > | This is what I would like FP to create.
| >
| >
|
|
 
NN4 has no problem with such inline styles (at least not the ones in
question here - position, margin, etc.). Are you seeing differently?

--
Murray

Stefan B Rusynko said:
Except w/ older browsers that don't support inline styles well (NN4) and
balk at the 1st style they don't recognize
- by using external (browser specific) styles you can at least try to
control what happens (or not) w/ styles that are not
universally supported

--




| That would certainly be the best way, but it would have no impact on
| cross-browser rendering (inline vs stylesheet), Stefan.
|
| --
| Murray
|
| | > Create your Div and turn on View Toolbars Positioning
| > or start w/ View Task Pane and select the Layers Task pane
| > (you can enter % or em or px or whatever you think works)
| >
| > PS
| > IMHO all those styles belong in an external style sheet (not an inline
| > style) for cross browser CSS support
| > --
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > To find the best Newsgroup for FrontPage support see:
| > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > _____________________________________________
| >
| >
| > | > | Its not the positioning in absolute, its that FP will not allow any
| > other
| > | way. If on clicks on relative - nothing happens - except getting a
big
| > box.
| > | Clicking on nothing - one gets a text box. Its simply not allowing
one
| > to
| > | add in margins - and not allowing any sort of liquid design. I have
a
| > | graphic that runs downt he right of my page - so I want the right
text
| > to
| > | stop short of that graphic. On the left - I have a variety of
| > pictures - and
| > | to just keep the page narror enough that in wide screened browser -
the
| > text
| > | doesn't all end up in one line - I just want FP to insert code that
does
| > this:
| > |
| > | <div style="z-index: 1; margin-left: 25%; top: 0px; margin-right:
20px;
| > | bottom: 0em; border: 2px solid #00FF00; padding-left: 0px;
| > padding-right:
| > | 130px; padding-top: 1.05em; padding-bottom: 2em" id="layer2">
| > | <p align="right">right</p>
| > | <p align="left">left</div>
| > |
| > | This is what I would like FP to create.
| >
| >
|
|
 
yes - that is what I had to do by hand to achieve the result - you made a
post earlier that that sort of code should be in an external style sheet - I
would plan on eventually moving it - but I was hoping for design purposes -
there was a user interface that you could set it. Right now - my current web
pages all use external style sheets except for span's. My only guess was
that it was purposely left out because users might really mess things up by
multiple imbedding of such posititioning - however - like so many other
features - it could have been an option to turn on or off.
 
That is not working because the layer positioning only allows absolute
positioning, and does not allow the input for any margin- values. I have
entered the values, then have to go to the code - delete the absolute
position, and write "in margin-" in front the the values.

It does do what a help files says it does - it'll take the first value - and
ignore the other value if left and right values are given - because it's only
meant for absolute positioning. If one selects relative posititioning, it
deletes its layer status - and seems to ignore any values given to it. Even
in relative - it'll take the left value and assume 100% width - unless you
give it a width value.

Maybe its just me - buy i find it incredibly convienent to use layers and
margins for page layout - and I have come up with some pretty good visual
style settings that view very good in both 800x600 and 1024x768 - Netscape
and Explorer. And anchoring a layer from one side of the screen and letting
it liquid fill the rest just seems to do the trick alot. Its helps with
graphics to - if you have a 200px graphic - and want text beside it that
wraps, just create a div in the wrapping dive and set it left margin the same
way.
 
CSS-P is well established as a layout methodology. FP is not so CSS-P
friendly, because FP's target user is not so CSS-P friendly (I am guessing
here). And I suppose the overarching consideration is to cater to that
audience.

Nevertheless, using "Layers" as a layout approach can be very dangerous
since the term 'layer' implies certain inflexible characteristics (width,
position, etc.), and usages (i.e., I just put everything in layers, position
them where I want, and bada bing, bada boom, I have a website!). The 'layer
killer' is the browser's text view resize control, which can throw things
into a trash can in a big hurry. Using properly styled divs is much safer.
 
I'm interchanging layers and divs, my mistake. I use div's for positioning,
I do not id any layers.
 
At 1st glance the padding and borders
- didn't bother to check all the styles wjg posted, but is it a sure "mishmash" of measures

--




| NN4 has no problem with such inline styles (at least not the ones in
| question here - position, margin, etc.). Are you seeing differently?
|
| --
| Murray
|
| | > Except w/ older browsers that don't support inline styles well (NN4) and
| > balk at the 1st style they don't recognize
| > - by using external (browser specific) styles you can at least try to
| > control what happens (or not) w/ styles that are not
| > universally supported
| >
| > --
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > To find the best Newsgroup for FrontPage support see:
| > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > _____________________________________________
| >
| >
| > | > | That would certainly be the best way, but it would have no impact on
| > | cross-browser rendering (inline vs stylesheet), Stefan.
| > |
| > | --
| > | Murray
| > |
| > | | > | > Create your Div and turn on View Toolbars Positioning
| > | > or start w/ View Task Pane and select the Layers Task pane
| > | > (you can enter % or em or px or whatever you think works)
| > | >
| > | > PS
| > | > IMHO all those styles belong in an external style sheet (not an inline
| > | > style) for cross browser CSS support
| > | > --
| > | >
| > | > _____________________________________________
| > | > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > | > "Warning - Using the F1 Key will not break anything!" (-;
| > | > To find the best Newsgroup for FrontPage support see:
| > | > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > | > _____________________________________________
| > | >
| > | >
| > | > | > | > | Its not the positioning in absolute, its that FP will not allow any
| > | > other
| > | > | way. If on clicks on relative - nothing happens - except getting a
| > big
| > | > box.
| > | > | Clicking on nothing - one gets a text box. Its simply not allowing
| > one
| > | > to
| > | > | add in margins - and not allowing any sort of liquid design. I have
| > a
| > | > | graphic that runs downt he right of my page - so I want the right
| > text
| > | > to
| > | > | stop short of that graphic. On the left - I have a variety of
| > | > pictures - and
| > | > | to just keep the page narror enough that in wide screened browser -
| > the
| > | > text
| > | > | doesn't all end up in one line - I just want FP to insert code that
| > does
| > | > this:
| > | > |
| > | > | <div style="z-index: 1; margin-left: 25%; top: 0px; margin-right:
| > 20px;
| > | > | bottom: 0em; border: 2px solid #00FF00; padding-left: 0px;
| > | > padding-right:
| > | > | 130px; padding-top: 1.05em; padding-bottom: 2em" id="layer2">
| > | > | <p align="right">right</p>
| > | > | <p align="left">left</div>
| > | > |
| > | > | This is what I would like FP to create.
| > | >
| > | >
| > |
| > |
| >
| >
|
|
 
There is (or should be) no problem in using mixed units for CSS measures.

body { margin: 1em 10% 250px 0; }

will work just fine.

--
Murray

Stefan B Rusynko said:
At 1st glance the padding and borders
- didn't bother to check all the styles wjg posted, but is it a sure
"mishmash" of measures

--




| NN4 has no problem with such inline styles (at least not the ones in
| question here - position, margin, etc.). Are you seeing differently?
|
| --
| Murray
|
| | > Except w/ older browsers that don't support inline styles well (NN4)
and
| > balk at the 1st style they don't recognize
| > - by using external (browser specific) styles you can at least try to
| > control what happens (or not) w/ styles that are not
| > universally supported
| >
| > --
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > To find the best Newsgroup for FrontPage support see:
| > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > _____________________________________________
| >
| >
| > | > | That would certainly be the best way, but it would have no impact on
| > | cross-browser rendering (inline vs stylesheet), Stefan.
| > |
| > | --
| > | Murray
| > |
| > | | > | > Create your Div and turn on View Toolbars Positioning
| > | > or start w/ View Task Pane and select the Layers Task pane
| > | > (you can enter % or em or px or whatever you think works)
| > | >
| > | > PS
| > | > IMHO all those styles belong in an external style sheet (not an
inline
| > | > style) for cross browser CSS support
| > | > --
| > | >
| > | > _____________________________________________
| > | > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > | > "Warning - Using the F1 Key will not break anything!" (-;
| > | > To find the best Newsgroup for FrontPage support see:
| > | > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > | > _____________________________________________
| > | >
| > | >
| > | > | > | > | Its not the positioning in absolute, its that FP will not allow
any
| > | > other
| > | > | way. If on clicks on relative - nothing happens - except
getting a
| > big
| > | > box.
| > | > | Clicking on nothing - one gets a text box. Its simply not
allowing
| > one
| > | > to
| > | > | add in margins - and not allowing any sort of liquid design. I
have
| > a
| > | > | graphic that runs downt he right of my page - so I want the
right
| > text
| > | > to
| > | > | stop short of that graphic. On the left - I have a variety of
| > | > pictures - and
| > | > | to just keep the page narror enough that in wide screened
browser -
| > the
| > | > text
| > | > | doesn't all end up in one line - I just want FP to insert code
that
| > does
| > | > this:
| > | > |
| > | > | <div style="z-index: 1; margin-left: 25%; top: 0px;
margin-right:
| > 20px;
| > | > | bottom: 0em; border: 2px solid #00FF00; padding-left: 0px;
| > | > padding-right:
| > | > | 130px; padding-top: 1.05em; padding-bottom: 2em" id="layer2">
| > | > | <p align="right">right</p>
| > | > | <p align="left">left</div>
| > | > |
| > | > | This is what I would like FP to create.
| > | >
| > | >
| > |
| > |
| >
| >
|
|
 
See http://css.nu/pointers/bugs-nn.html#NN4



--




| There is (or should be) no problem in using mixed units for CSS measures.
|
| body { margin: 1em 10% 250px 0; }
|
| will work just fine.
|
| --
| Murray
|
| | > At 1st glance the padding and borders
| > - didn't bother to check all the styles wjg posted, but is it a sure
| > "mishmash" of measures
| >
| > --
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > To find the best Newsgroup for FrontPage support see:
| > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > _____________________________________________
| >
| >
| > | > | NN4 has no problem with such inline styles (at least not the ones in
| > | question here - position, margin, etc.). Are you seeing differently?
| > |
| > | --
| > | Murray
| > |
| > | | > | > Except w/ older browsers that don't support inline styles well (NN4)
| > and
| > | > balk at the 1st style they don't recognize
| > | > - by using external (browser specific) styles you can at least try to
| > | > control what happens (or not) w/ styles that are not
| > | > universally supported
| > | >
| > | > --
| > | >
| > | > _____________________________________________
| > | > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > | > "Warning - Using the F1 Key will not break anything!" (-;
| > | > To find the best Newsgroup for FrontPage support see:
| > | > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > | > _____________________________________________
| > | >
| > | >
| > | > | > | > | That would certainly be the best way, but it would have no impact on
| > | > | cross-browser rendering (inline vs stylesheet), Stefan.
| > | > |
| > | > | --
| > | > | Murray
| > | > |
| > | > | | > | > | > Create your Div and turn on View Toolbars Positioning
| > | > | > or start w/ View Task Pane and select the Layers Task pane
| > | > | > (you can enter % or em or px or whatever you think works)
| > | > | >
| > | > | > PS
| > | > | > IMHO all those styles belong in an external style sheet (not an
| > inline
| > | > | > style) for cross browser CSS support
| > | > | > --
| > | > | >
| > | > | > _____________________________________________
| > | > | > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > | > | > "Warning - Using the F1 Key will not break anything!" (-;
| > | > | > To find the best Newsgroup for FrontPage support see:
| > | > | > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > | > | > _____________________________________________
| > | > | >
| > | > | >
| > | > | > | > | > | > | Its not the positioning in absolute, its that FP will not allow
| > any
| > | > | > other
| > | > | > | way. If on clicks on relative - nothing happens - except
| > getting a
| > | > big
| > | > | > box.
| > | > | > | Clicking on nothing - one gets a text box. Its simply not
| > allowing
| > | > one
| > | > | > to
| > | > | > | add in margins - and not allowing any sort of liquid design. I
| > have
| > | > a
| > | > | > | graphic that runs downt he right of my page - so I want the
| > right
| > | > text
| > | > | > to
| > | > | > | stop short of that graphic. On the left - I have a variety of
| > | > | > pictures - and
| > | > | > | to just keep the page narror enough that in wide screened
| > browser -
| > | > the
| > | > | > text
| > | > | > | doesn't all end up in one line - I just want FP to insert code
| > that
| > | > does
| > | > | > this:
| > | > | > |
| > | > | > | <div style="z-index: 1; margin-left: 25%; top: 0px;
| > margin-right:
| > | > 20px;
| > | > | > | bottom: 0em; border: 2px solid #00FF00; padding-left: 0px;
| > | > | > padding-right:
| > | > | > | 130px; padding-top: 1.05em; padding-bottom: 2em" id="layer2">
| > | > | > | <p align="right">right</p>
| > | > | > | <p align="left">left</div>
| > | > | > |
| > | > | > | This is what I would like FP to create.
| > | > | >
| > | > | >
| > | > |
| > | > |
| > | >
| > | >
| > |
| > |
| >
| >
|
|
 
Marginally informative. Mostly anecdotal, however. Any particular legend
you want me to read? 8)


--
Murray

Stefan B Rusynko said:
See http://css.nu/pointers/bugs-nn.html#NN4



--




| There is (or should be) no problem in using mixed units for CSS
measures.
|
| body { margin: 1em 10% 250px 0; }
|
| will work just fine.
|
| --
| Murray
|
| | > At 1st glance the padding and borders
| > - didn't bother to check all the styles wjg posted, but is it a sure
| > "mishmash" of measures
| >
| > --
| >
| > _____________________________________________
| > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > "Warning - Using the F1 Key will not break anything!" (-;
| > To find the best Newsgroup for FrontPage support see:
| > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > _____________________________________________
| >
| >
| > | > | NN4 has no problem with such inline styles (at least not the ones in
| > | question here - position, margin, etc.). Are you seeing
differently?
| > |
| > | --
| > | Murray
| > |
| > | | > | > Except w/ older browsers that don't support inline styles well
(NN4)
| > and
| > | > balk at the 1st style they don't recognize
| > | > - by using external (browser specific) styles you can at least try
to
| > | > control what happens (or not) w/ styles that are not
| > | > universally supported
| > | >
| > | > --
| > | >
| > | > _____________________________________________
| > | > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > | > "Warning - Using the F1 Key will not break anything!" (-;
| > | > To find the best Newsgroup for FrontPage support see:
| > | > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > | > _____________________________________________
| > | >
| > | >
| > | > | > | > | That would certainly be the best way, but it would have no
impact on
| > | > | cross-browser rendering (inline vs stylesheet), Stefan.
| > | > |
| > | > | --
| > | > | Murray
| > | > |
| > | > | | > | > | > Create your Div and turn on View Toolbars Positioning
| > | > | > or start w/ View Task Pane and select the Layers Task pane
| > | > | > (you can enter % or em or px or whatever you think works)
| > | > | >
| > | > | > PS
| > | > | > IMHO all those styles belong in an external style sheet (not
an
| > inline
| > | > | > style) for cross browser CSS support
| > | > | > --
| > | > | >
| > | > | > _____________________________________________
| > | > | > SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
| > | > | > "Warning - Using the F1 Key will not break anything!" (-;
| > | > | > To find the best Newsgroup for FrontPage support see:
| > | > | > http://www.net-sites.com/sitebuilder/newsgroups.asp
| > | > | > _____________________________________________
| > | > | >
| > | > | >
| > | > | > | > | > | > | Its not the positioning in absolute, its that FP will not
allow
| > any
| > | > | > other
| > | > | > | way. If on clicks on relative - nothing happens - except
| > getting a
| > | > big
| > | > | > box.
| > | > | > | Clicking on nothing - one gets a text box. Its simply not
| > allowing
| > | > one
| > | > | > to
| > | > | > | add in margins - and not allowing any sort of liquid design.
I
| > have
| > | > a
| > | > | > | graphic that runs downt he right of my page - so I want the
| > right
| > | > text
| > | > | > to
| > | > | > | stop short of that graphic. On the left - I have a variety
of
| > | > | > pictures - and
| > | > | > | to just keep the page narror enough that in wide screened
| > browser -
| > | > the
| > | > | > text
| > | > | > | doesn't all end up in one line - I just want FP to insert
code
| > that
| > | > does
| > | > | > this:
| > | > | > |
| > | > | > | <div style="z-index: 1; margin-left: 25%; top: 0px;
| > margin-right:
| > | > 20px;
| > | > | > | bottom: 0em; border: 2px solid #00FF00; padding-left: 0px;
| > | > | > padding-right:
| > | > | > | 130px; padding-top: 1.05em; padding-bottom: 2em"
id="layer2">
| > | > | > | <p align="right">right</p>
| > | > | > | <p align="left">left</div>
| > | > | > |
| > | > | > | This is what I would like FP to create.
| > | > | >
| > | > | >
| > | > |
| > | > |
| > | >
| > | >
| > |
| > |
| >
| >
|
|
 
Back
Top