By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
446,376 Members | 1,566 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 446,376 IT Pros & Developers. It's quick & easy.

How to centre relative to page, not floated image

P: n/a

The page at:

<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?
--
Andy Mabbett
USA imprisons children without trial, at Guantanamo Bay:
<http://news.bbc.co.uk/1/hi/world/south_asia/2970279.stm>
<http://web.amnesty.org/library/Index/ENGAMR510582003?open&of=ENG-USA>
Jul 20 '05 #1
Share this Question
Share on Google+
16 Replies


P: n/a
In article <mz**************@pigsonthewing.org.uk>, usenet200305
@pigsonthewing.org.uk says...

The page at:

<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?


I don't know about 'best', but how about setting it as the page
background & fix up the h1 height to suit?

Example: http://porjes.haxorz.org/bird.html

Jul 20 '05 #2

P: n/a
In article <mz**************@pigsonthewing.org.uk>,
Andy Mabbett <us**********@pigsonthewing.org.uk> wrote:
The page at:

<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 about having the logo absolutely positioned? Or even better, since
the text in your H1 already conveys what the logo cannot do any better
(in a textual context): set the logo as a background image to the H1;

h1 { text-align: center; background: url("logo.gif") transparent top
left no-repeat; color: #000; }

<h1>West Midland Bird Club</h1>

--
Kris
kr*******@xs4all.netherlands (nl)
"We called him Tortoise because he taught us" said the Mock Turtle.
Jul 20 '05 #3

P: n/a
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

Jul 20 '05 #4

P: n/a
In message <EpVPa.44171$H17.13526@sccrnsc02>, Brian
<br***@wfcr.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.

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)

and then:

<http://www.westmidlandbirdclub.com/club/test.htm>
which has one.

In both cases, H1 has auto margins, as you suggest.
--
Andy Mabbett
USA imprisons children without trial, at Guantanamo Bay:
<http://news.bbc.co.uk/1/hi/world/south_asia/2970279.stm>
<http://web.amnesty.org/library/Index/ENGAMR510582003?open&of=ENG-USA>
Jul 20 '05 #5

P: n/a
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

Jul 20 '05 #6

P: n/a
In message <bH5Qa.48527$Ph3.3769@sccrnsc04>, Brian
<br***@wfcr.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 :-(

--
Andy Mabbett
USA imprisons children without trial, at Guantanamo Bay:
<http://news.bbc.co.uk/1/hi/world/south_asia/2970279.stm>
<http://web.amnesty.org/library/Index/ENGAMR510582003?open&of=ENG-USA>
Jul 20 '05 #7

P: n/a
In article <dE**************@pigsonthewing.org.uk>, usenet200305
@pigsonthewing.org.uk says...
In message <kr*****************************@news1.news.xs4all .nl>, Kris
<kr*******@xs4all.netherlands> writes
I would like to only have the logo top left, but retain the centering of
the heading, on the page.


How about having the logo absolutely positioned?


Thank you (and to others who have replied).

Unfortunately, that allows the image to overlay the text, at some
resolutions. window sizes.

....
If that's a problem, and you don't want to use a background image, then
how about including the image in the h1, adding judicious margins, and
absolutely positioning the image?
Jul 20 '05 #8

P: n/a
On Sat, 12 Jul 2003 17:15:02 +0100, Andy Mabbett
<us**********@pigsonthewing.org.uk> wrote:
In message <EpVPa.44171$H17.13526@sccrnsc02>, Brian
<br***@wfcr.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/
Jul 20 '05 #9

P: n/a
In article <wl**************@pigsonthewing.org.uk>, usenet200305
@pigsonthewing.org.uk says...
In message <MP************************@news.CIS.DFN.DE>, Jacqui or Pete
<po****@spamcop.net> writes
.... http://www.westmidlandbirdclub.com/club/logo.htm
http://porjes.com/bird1.html


Thanks, but that only seems to work because you have:

h1 {
margin: 50px 154px 0px 154px;
height: 82px;
}

Given that the image is 122x154 pixels, why the other figures?


Erm, I made them up because they seemed to work :0(

As you're trying to align text with an image it's probably best to use
explicit px line height and font-size. IMHO px are only useful for this
purpose and, given that you're going to use fairly large 'h1-size'
values this shouldn't cause accessibility problems.
Incidentally, on your page, the H! & H2 are overlaid, in small windows,
in Opera 7.10

That'll be the lack of px-sized fonts, then.

I've had another play with it and the trouble is that zooming px-sized
text in (eg) Mozilla resizes the text without resizing the image (a bug
in my book[1] ) so, actually, I don't know a good answer to this one.

Anyone else?

[1] Because what is the point of having the option of px-sized text if
you can't use it to align text with images? What other use could it
have?
Jul 20 '05 #10

P: n/a
In article <MP************************@news.CIS.DFN.DE>,
po****@spamcop.net says...
In article <wl**************@pigsonthewing.org.uk>, usenet200305
@pigsonthewing.org.uk says...
In message <MP************************@news.CIS.DFN.DE>, Jacqui or Pete
<po****@spamcop.net> writes


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

.... Center h1 text, foreground image to the left

I thought maybe this might work, but no good in Opera...

http://porjes.haxorz.org/bird2.html
Jul 20 '05 #11

P: n/a
In article <le**************@pigsonthewing.org.uk>, Andy Mabbett
<us***********@pigsonthewing.org.uk> wrote:
In message <bH5Qa.48527$Ph3.3769@sccrnsc04>, Brian
<br***@wfcr.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/>
Jul 20 '05 #12

P: n/a
In message <aa********************************@4ax.com>, Stephen Poley
<sb*****@xs4all.nl> 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.


Thank you. That seems to work, degrades gracefully and I can't see any
pitfalls.

There's an example at:

<http://www.pigsonthewing.org.uk/club/test.htm>

with the DIV in question given, temporarily, a red background.
--
Andy Mabbett
USA imprisons children without trial, at Guantanamo Bay:
<http://news.bbc.co.uk/1/hi/world/south_asia/2970279.stm>
<http://web.amnesty.org/library/Index/ENGAMR510582003?open&of=ENG-USA>
Jul 20 '05 #13

P: n/a
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.

Jul 20 '05 #14

P: n/a
In message <3f********@news.sihope.com>, kchayka
<kc*********@sihope.com> writes
Why not just set right margin or padding instead?


for example..?
--
Andy Mabbett
USA imprisons children without trial, at Guantanamo Bay:
<http://news.bbc.co.uk/1/hi/world/south_asia/2970279.stm>
<http://web.amnesty.org/library/Index/ENGAMR510582003?open&of=ENG-USA>
Jul 20 '05 #15

P: n/a
Andy Mabbett wrote:
In message <3f********@news.sihope.com>, kchayka
<kc*********@sihope.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.

Jul 20 '05 #16

P: n/a
In message <MP************************@news.CIS.DFN.DE>, Jacqui or Pete
<po****@spamcop.net> writes
>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.

...
There's an example at:

<http://www.pigsonthewing.org.uk/club/test.htm>

404 - not found.

Doh! Wrong website:

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

sorry.
--
Andy Mabbett
USA imprisons children without trial, at Guantanamo Bay:
<http://news.bbc.co.uk/1/hi/world/south_asia/2970279.stm>
<http://web.amnesty.org/library/Index/ENGAMR510582003?open&of=ENG-USA>
Jul 20 '05 #17

This discussion thread is closed

Replies have been disabled for this discussion.