Centering an Image bigger than the screen

[Robert Smith]

I thought I had seen this done on another site but I can't find it. I want
to have a header at the top of the page, centered, no matter the resolution.
I got it working with an ugly scroll bar at the bottom. The image is 1600px
because that is the maximum resolution I want it to work at. Any
suggestions? The site is here:

http://members.optusnet.com.au/spike...ions/test.html

and the css I used is here:

#header {
position: absolute;
top: 0px;
left: 50%;
margin-left: -800px;
}

--
-Robert Smith
----------------------------------------------------------------------------
---------------------------------
Remove 'nospam.' from my email address if you wish to reply via email.

[Matthias Gutfeldt]

Robert Smith wrote:

I thought I had seen this done on another site but I can't find it. I want
to have a header at the top of the page, centered, no matter the resolution.
I got it working with an ugly scroll bar at the bottom. The image is 1600px
because that is the maximum resolution I want it to work at. Any
suggestions? The site is here:

http://members.optusnet.com.au/spike...ions/test.html

and the css I used is here:

#header {
position: absolute;
top: 0px;
left: 50%;
margin-left: -800px;
}

Set the image as a background-image in the CSS file. Don't forget
suitable ALT text, of course.
Matthias

[Matthias Gutfeldt]

Matthias Gutfeldt wrote:

Robert Smith wrote:

I thought I had seen this done on another site but I can't find it. I
want
to have a header at the top of the page, centered, no matter the
resolution.
I got it working with an ugly scroll bar at the bottom. The image is
1600px
because that is the maximum resolution I want it to work at. Any
suggestions? The site is here:

http://members.optusnet.com.au/spike...ions/test.html
and the css I used is here:

#header {
position: absolute;
top: 0px;
left: 50%;
margin-left: -800px;
}

Set the image as a background-image in the CSS file. Don't forget
suitable ALT text, of course.

Gobbledygook :-). Naturally there's no ALT text when the image is a
background-image. What I meant is provide some useful content that is
visible when the image is not displayed (usually because CSS is turned off).
Matthias

[Robert Smith]

"Matthias Gutfeldt" <sa************@gmx.net> wrote in message
news:2i************@uni-berlin.de...

Matthias Gutfeldt wrote:

Robert Smith wrote:

I thought I had seen this done on another site but I can't find it. I
want
to have a header at the top of the page, centered, no matter the
resolution.
I got it working with an ugly scroll bar at the bottom. The image is
1600px
because that is the maximum resolution I want it to work at. Any
suggestions? The site is here:

http://members.optusnet.com.au/spike...ions/test.html

and the css I used is here:

#header {
position: absolute;
top: 0px;
left: 50%;
margin-left: -800px;
}

Set the image as a background-image in the CSS file. Don't forget
suitable ALT text, of course.

Gobbledygook :-). Naturally there's no ALT text when the image is a
background-image. What I meant is provide some useful content that is
visible when the image is not displayed (usually because CSS is turned

off).

Then I can't make the image a link :(

[Els]

Robert Smith wrote:

"Matthias Gutfeldt" <sa************@gmx.net> wrote in message
news:2i************@uni-berlin.de...

Matthias Gutfeldt wrote:

Robert Smith wrote:

I thought I had seen this done on another site but I can't find it. I
want
to have a header at the top of the page, centered, no matter the
resolution.
I got it working with an ugly scroll bar at the bottom. The image is
1600px
because that is the maximum resolution I want it to work at. Any
suggestions? The site is here:
http://members.optusnet.com.au/spike...ions/test.html

and the css I used is here:

#header {
position: absolute;
top: 0px;
left: 50%;
margin-left: -800px;
}

Set the image as a background-image in the CSS file. Don't forget
suitable ALT text, of course.

Gobbledygook :-). Naturally there's no ALT text when the image is a
background-image. What I meant is provide some useful content that is
visible when the image is not displayed (usually because CSS is turned
off).

Then I can't make the image a link :(

Not for real, but you can set a transparent 100% wide pic
over it, which you make is clickable.

I think there's another way though: put the pic inside a div
with overflow:hidden in the style, and no scrollbar will be
caused by the header.
Make sure the div is seperated from the content, or else
your text will also be hidden in smaller windows.

--
Els
http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[NWhite]

> > > Robert Smith wrote:

> I thought I had seen this done on another site but I can't find it. I> want
> to have a header at the top of the page, centered, no matter the
> resolution.
> I got it working with an ugly scroll bar at the bottom. The image is
> 1600px
> because that is the maximum resolution I want it to work at. Any
> suggestions? The site is here:
>
>

http://members.optusnet.com.au/spike...ions/test.html

>
>
> and the css I used is here:
>
> #header {
> position: absolute;
> top: 0px;
> left: 50%;
> margin-left: -800px;
> }
Set the image as a background-image in the CSS file. Don't forget
suitable ALT text, of course.

Gobbledygook :-). Naturally there's no ALT text when the image is a
background-image. What I meant is provide some useful content that is
visible when the image is not displayed (usually because CSS is turned

off).

Then I can't make the image a link :(

Not sure, but this might work:

HTML:
<div id="header">
<a class="headA" href="./">&nbsp</a>
</div>

CSS:
a.headA {
background: url(header_extended.gif);
padding: 0; margin: 0; border: 0;
height: [the height of "header_extended.gif"];
width: 100%;
}

Would this do it?

[Lauri Raittila]

Robert Smith wrote:

I want
to have a header at the top of the page, centered, no matter the resolution.
I got it working with an ugly scroll bar at the bottom. The image is 1600px
because that is the maximum resolution I want it to work at. Any
suggestions? The site is here:

http://members.optusnet.com.au/spike...ions/test.html

and the css

#header { overflow:hidden; }

Stupid idea. Make background and text different images.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
I'm looking for work | Etsin työtä