CSS margins on page elements?

Murray · Jul 25, 2004

I have a division on a page, e.g.,

<body>
<div id="foo"></div>
</body>

and I want to position this division using CSS margins. How do I do that in
the FP2003 UI?

Jens Peter Karlsen[FP-MVP] · Jul 25, 2004

In properties for the div click Position. The rest should give itself.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

-----Original Message-----
From: Murray [mailto:[email protected]]
Posted At: 25. juli 2004 16:19
Posted To: microsoft.public.frontpage.client
Conversation: CSS margins on page elements?
Subject: CSS margins on page elements?

I have a division on a page, e.g.,

<body>
<div id="foo"></div>
</body>

and I want to position this division using CSS margins. How do I do
that in the FP2003 UI?

Thomas A. Rowe · Jul 25, 2004

Did you try inserting values in the Left, Right, Top and Bottom fields?

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

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================

Murray said:
Nope - there are no margin fields there (see snap).

And to get to this, I had to use FORMAT | Style > select the div id, and
Modify.... Properties for the div only showed character-type properties.

So - I can find no way to do margins on anything other than the page itself
using the UI. Is that correct?

--
Murray

Jens Peter Karlsen said:

In properties for the div click Position. The rest should give itself.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

-----Original Message-----
From: Murray [mailto:[email protected]]
Posted At: 25. juli 2004 16:19
Posted To: microsoft.public.frontpage.client
Conversation: CSS margins on page elements?
Subject: CSS margins on page elements?

I have a division on a page, e.g.,

<body>
<div id="foo"></div>
</body>

and I want to position this division using CSS margins. How do I do
that in the FP2003 UI?

Click to expand...

Murray · Jul 25, 2004

Those are for absolute positioning. This is not an absolutely positioned
division.

Using those fields will give me this (for example) -

#foo { position:absolute; top:10px; left: 150px; }

but I don't want it to be absolutely positioned.

What I want is this -

#foo { position:relative; width:760px; margin:0 auto; }

so that it's centered on the page. I can get the position:relative from the
properties, but I can see no way to get at the margins. I'd like to have a
set of fields identical to the padding fields under the border category,
except for margins.

--
Murray

Thomas A. Rowe said:
Did you try inserting values in the Left, Right, Top and Bottom fields?

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

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================

Murray said:

Nope - there are no margin fields there (see snap).

And to get to this, I had to use FORMAT | Style > select the div id, and
Modify.... Properties for the div only showed character-type properties.

So - I can find no way to do margins on anything other than the page itself
using the UI. Is that correct?

--
Murray

Jens Peter Karlsen said:

In properties for the div click Position. The rest should give itself.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

-----Original Message-----
From: Murray [mailto:[email protected]]
Posted At: 25. juli 2004 16:19
Posted To: microsoft.public.frontpage.client
Conversation: CSS margins on page elements?
Subject: CSS margins on page elements?

I have a division on a page, e.g.,

<body>
<div id="foo"></div>
</body>

and I want to position this division using CSS margins. How do I do
that in the FP2003 UI?

Click to expand...

Click to expand...

Thomas A. Rowe · Jul 25, 2004

Ok, then you would need to set the margins in Code View or via an external style sheet.

http://www.bluerobot.com/web/css/center1.html
http://www.w3schools.com/css/css_margin.asp

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

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================

Murray said:
Those are for absolute positioning. This is not an absolutely positioned
division.

Using those fields will give me this (for example) -

#foo { position:absolute; top:10px; left: 150px; }

but I don't want it to be absolutely positioned.

What I want is this -

#foo { position:relative; width:760px; margin:0 auto; }

so that it's centered on the page. I can get the position:relative from the
properties, but I can see no way to get at the margins. I'd like to have a
set of fields identical to the padding fields under the border category,
except for margins.

--
Murray

Thomas A. Rowe said:

Did you try inserting values in the Left, Right, Top and Bottom fields?

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

FrontPage Resources, WebCircle, MS KB Quick Links, etc.
==============================================
To assist you in getting the best answers for FrontPage support see:
http://www.net-sites.com/sitebuilder/newsgroups.asp

Murray said:

Nope - there are no margin fields there (see snap).

And to get to this, I had to use FORMAT | Style > select the div id, and
Modify.... Properties for the div only showed character-type properties.

So - I can find no way to do margins on anything other than the page itself
using the UI. Is that correct?

--
Murray

In properties for the div click Position. The rest should give itself.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

-----Original Message-----
From: Murray [mailto:[email protected]]
Posted At: 25. juli 2004 16:19
Posted To: microsoft.public.frontpage.client
Conversation: CSS margins on page elements?
Subject: CSS margins on page elements?

I have a division on a page, e.g.,

<body>
<div id="foo"></div>
</body>

and I want to position this division using CSS margins. How do I do
that in the FP2003 UI?

Click to expand...

Click to expand...

Murray · Jul 25, 2004

Thanks, Thomas. I was just wondering if there were a way to get at those
settings through the FP UI.

Jens Peter Karlsen[FP-MVP] · Jul 25, 2004

Notice that the correct code for centering is margin-left: auto;
margin-right: auto;
You should also know that this wont work in IE.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

-----Original Message-----
From: Murray [mailto:[email protected]]
Posted At: 25. juli 2004 19:08
Posted To: microsoft.public.frontpage.client
Conversation: CSS margins on page elements?
Subject: Re: CSS margins on page elements?

Those are for absolute positioning. This is not an absolutely
positioned division.

Using those fields will give me this (for example) -

#foo { position:absolute; top:10px; left: 150px; }

but I don't want it to be absolutely positioned.

What I want is this -

#foo { position:relative; width:760px; margin:0 auto; }

so that it's centered on the page. I can get the position:relative from
the properties, but I can see no way to get at the margins. I'd like to
have a set of fields identical to the padding fields under the border
category, except for margins.

--
Murray

Thomas A. Rowe said:
Did you try inserting values in the Left, Right, Top and Bottom fields?

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage) WEBMASTER Resources(tm)
FrontPage Resources, WebCircle, MS KB
Quick Links, etc.
==============================================

Murray said:

Nope - there are no margin fields there (see snap).

And to get to this, I had to use FORMAT | Style > select the div id,
and Modify.... Properties for the div only showed character-type properties.

So - I can find no way to do margins on anything other than the page itself
using the UI. Is that correct?

--
Murray

Jens Peter Karlsen said:

In properties for the div click Position. The rest should give itself.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

-----Original Message-----
From: Murray [mailto:[email protected]]
Posted At: 25. juli 2004 16:19
Posted To: microsoft.public.frontpage.client
Conversation: CSS margins on page elements?
Subject: CSS margins on page elements?

I have a division on a page, e.g.,

<body>
<div id="foo"></div>
</body>

and I want to position this division using CSS margins. How do I
do that in the FP2003 UI?

Click to expand...

Click to expand...

Murray · Jul 25, 2004

Notice that the correct code for centering is margin-left: auto;

margin-right: auto;

Actually, that's what I have, except in shorthand. Using margin:0 auto;
specifies the same as -

margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;

You should also know that this wont work in IE.

It works nicely in Moz/Netscape without further ado, and in IE5+, provided
you also have the following CSS -

body { text-align:center; }

which is then reversed with a subsequent -

#wrapper { text-align:left; }

You can see this all working nicely on my site -
http://www.great-web-sights.com.

Jens Peter Karlsen[FP-MVP] · Jul 25, 2004

I tried the shorthand in FireFox and it didn't work.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

-----Original Message-----
From: Murray [mailto:[email protected]]
Posted At: 25. juli 2004 20:26
Posted To: microsoft.public.frontpage.client
Conversation: CSS margins on page elements?
Subject: Re: CSS margins on page elements?

Notice that the correct code for centering is margin-left: auto;
margin-right: auto;

Actually, that's what I have, except in shorthand. Using margin:0 auto;
specifies the same as -

margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;

You should also know that this wont work in IE.

It works nicely in Moz/Netscape without further ado, and in IE5+,
provided you also have the following CSS -

body { text-align:center; }

which is then reversed with a subsequent -

#wrapper { text-align:left; }

You can see this all working nicely on my site -
http://www.great-web-sights.com.

Murray · Jul 25, 2004

Yes, it does. FF 0.8 on my web site works nicely. It also works well in
Safari, and IE5x on the Mac.

I can't say for absolute certainty, but I believe it also works in Opera.

--
Murray

Jens Peter Karlsen said:
I tried the shorthand in FireFox and it didn't work.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

-----Original Message-----
From: Murray [mailto:[email protected]]
Posted At: 25. juli 2004 20:26
Posted To: microsoft.public.frontpage.client
Conversation: CSS margins on page elements?
Subject: Re: CSS margins on page elements?

Notice that the correct code for centering is margin-left: auto;
margin-right: auto;

Click to expand...

Actually, that's what I have, except in shorthand. Using margin:0 auto;
specifies the same as -

margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;

You should also know that this wont work in IE.

Click to expand...

It works nicely in Moz/Netscape without further ado, and in IE5+,
provided you also have the following CSS -

body { text-align:center; }

which is then reversed with a subsequent -

#wrapper { text-align:left; }

You can see this all working nicely on my site -
http://www.great-web-sights.com.

--
Murray

Jens Peter Karlsen said:

Notice that the correct code for centering is margin-left: auto;
margin-right: auto;
You should also know that this wont work in IE.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

Click to expand...

Murray · Jul 25, 2004

And by the way, it also works in Moz and Netscape7, both PC and Mac.

--
Murray

Jens Peter Karlsen said:
I tried the shorthand in FireFox and it didn't work.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

-----Original Message-----
From: Murray [mailto:[email protected]]
Posted At: 25. juli 2004 20:26
Posted To: microsoft.public.frontpage.client
Conversation: CSS margins on page elements?
Subject: Re: CSS margins on page elements?

Notice that the correct code for centering is margin-left: auto;
margin-right: auto;

Click to expand...

Actually, that's what I have, except in shorthand. Using margin:0 auto;
specifies the same as -

margin-top:0; margin-right:auto; margin-bottom:0; margin-left:auto;

You should also know that this wont work in IE.

Click to expand...

It works nicely in Moz/Netscape without further ado, and in IE5+,
provided you also have the following CSS -

body { text-align:center; }

which is then reversed with a subsequent -

#wrapper { text-align:left; }

You can see this all working nicely on my site -
http://www.great-web-sights.com.

--
Murray

Jens Peter Karlsen said:

Notice that the correct code for centering is margin-left: auto;
margin-right: auto;
You should also know that this wont work in IE.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

Click to expand...

CSS margins on page elements?

Murray

Jens Peter Karlsen[FP-MVP]

Thomas A. Rowe

Murray

Thomas A. Rowe

Murray

Jens Peter Karlsen[FP-MVP]

Murray

Jens Peter Karlsen[FP-MVP]

Murray

Murray