Re: How to centre relative to page, not floated image

Andy Mabbett wrote:

http://www.westmidlandbirdclub.com/club/logo.htm

has a logo "floated" in the top left, and another "floated" in the
top right, with the H1 heading centred between them (and this
centred on the page).

I would like to only have the logo top left, but retain the
centering of the heading, on the page.

How is this best achieved?

float takes the item of the normal document flow, so it will not
affect margins set on the h1. Thus,

h1 {margin-left: auto; margin-right: auto}

float the image left as before.

--
Brian
follow the directions in my address to email me

Andy Mabbett wrote:

float takes the item of the normal document flow, so it will not
affect margins set on the h1. Thus,

h1 {margin-left: auto; margin-right: auto}

float the image left as before.

Compare the common centring of the H1 ("West Midland Bird Club"), H2
("New Logo") and the large graphic on:

http://www.westmidlandbirdclub.com/club/logo.htm

(which has two logos, top left and right

http://www.westmidlandbirdclub.com/club/test.htm

which has one.

Both have css errors. Does fixing them solve anything? Probably not,
but one can always hope.

--
Brian
follow the directions in my address to email me

On Sat, 12 Jul 2003 17:15:02 +0100, Andy Mabbett
<usenet200305 (AT) pigsonthewing (DOT) org.uk> wrote:

In message <EpVPa.44171$H17.13526@sccrnsc02>, Brian
brian (AT) wfcr (DOT) org.invalid-remove-this-part> writes
http://www.westmidlandbirdclub.com/club/logo.htm
has a logo "floated" in the top left, and another "floated" in the
top right, with the H1 heading centred between them (and this
centred on the page).
I would like to only have the logo top left, but retain the
centering of the heading, on the page.
How is this best achieved?

float takes the item of the normal document flow, so it will not
affect margins set on the h1. Thus,

h1 {margin-left: auto; margin-right: auto}

float the image left as before.

Thank you, but that doesn't seem to work.

This will only work if you also "shrink" the width of the header to
something less than 100%. e.g: width: 15em. (you'll have to play to get
an appropriate size). Or alternatively just leave an empty DIV on the
right, of the same width as the logo.

--
Stephen Poley

http://www.xs4all.nl/~sbpoley/webmatters/

In article <lem8oT8UyOE$EwA5 (AT) pigsonthewing (DOT) org.uk>, Andy Mabbett
<usenet200305r (AT) pigsonthewing (DOT) org.uk> wrote:

In message <bH5Qa.48527$Ph3.3769@sccrnsc04>, Brian
brian (AT) wfcr (DOT) org.invalid-remove-this-part> writes
Compare the common centring of the H1 ("West Midland Bird Club"), H2
("New Logo") and the large graphic on:
http://www.westmidlandbirdclub.com/club/logo.htm
(which has two logos, top left and right
http://www.westmidlandbirdclub.com/club/test.htm
which has one.

Both have css errors.

Fixed, thank you.

Does fixing them solve anything?

No :-(

And now for the tacky solution. Do everything as you have and use a
transparent gif of the appropriate size on the right hand side :-)

leo

--
<http://web0.greatbasin.net/~leo/>

Leonard Blaisdell wrote:

And now for the tacky solution. Do everything as you have and use a
transparent gif of the appropriate size on the right hand side :-)

Why not just set right margin or padding instead?

--
To email a reply, remove (dash)ns(dash). Mail sent to the ns
address is automatically deleted and will not be read.

Andy Mabbett wrote:

In message <3f1460c7$1 (AT) news (DOT) sihope.com>, kchayka
kcha-ns-yka (AT) sihope (DOT) com> writes
Why not just set right margin or padding instead?

for example..?

h1 { margin-right: 132px; }

That is the width of the left-floated image plus its margin, no?

--
To email a reply, remove (dash)ns(dash). Mail sent to the ns
address is automatically deleted and will not be read.