16 replies [Last post]
maxplanck735
Offline
Enthusiast
Last seen: 13 years 4 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

how can i center an image and position it at the very very top of the page?

I tried using a combination of margins and absolute positioning, but absolute positioning seems to completely override anything done by margins. I know that i could move the image around using absolute positioning, by entering numerical values into the top, right, left or bottom properties. This could make the image centered for viewing under one screen resolution, but it would not be centered when viewing under other screen resoltions.

how can i center an image and position it at the very very top of the page, and have it centered when viewing from any screen resolution?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Is it an image in the HTML

Is it an image in the HTML or background image?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

maxplanck735
Offline
Enthusiast
Last seen: 13 years 4 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

It's an image in the

It's an image in the HTML

Thanks for responding

sumeetwork
Offline
newbie
delhi
Last seen: 11 years 45 weeks ago
delhi
Joined: 2007-02-24
Posts: 4
Points: 0

i think u sud try using

i think u sud try using

margin: 0 auto; in the same div n giv width whatever suits u..

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

An image is an inline

An image is an inline element so just make its container text-align: center. To center the container, use margin: 0 auto. To place it at the top, make it the first element on your page.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

maxplanck735
Offline
Enthusiast
Last seen: 13 years 4 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

Why should i put the picture

Why should i put the picture inside of a container (div box), instead of applying the styles directly to the image?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Your picture's already going

Your picture's already going to be inside a container - it's not going to exist in your layout without being the descendant of another element. You don't need to add an extra element; if there's nothing else in the same area as the image that needs to be left aligned, just apply text-align: center to the nearest parent element.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

maxplanck735
Offline
Enthusiast
Last seen: 13 years 4 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

What container is the image

What container is the image going to be inside? Are you talking about the ? Or are you assuming that the img is going to be placed inside of a div box?

I know that i can apply CSS styles to the img. Why not just apply the CSS styles that i want to apply the img directly to the img, instead of making a div box around the image and applying the styles to the div box? Wouldn't that just be extra unnecessary code?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Then make the inline image

Then make the inline image display:block (as they used to be) and then you can apply any number of styling elements and auto margin to center on the images intrinsic dimensions.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 30 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

maxplanck735 wrote:Or are

maxplanck735 wrote:
Or are you assuming that the img is going to be placed inside of a div box?

If you can get away with making a layout with just the body tag and an image, good luck to ya.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

well you wouldn't be able

Smile well you wouldn't be able to accuse it of being overdived, I like the minimalist approach.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

maxplanck735
Offline
Enthusiast
Last seen: 13 years 4 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

Hugo wrote:Then make the

Hugo wrote:
Then make the inline image display:block (as they used to be) and then you can apply any number of styling elements and auto margin to center on the images intrinsic dimensions.

Hugo.

I don't think that anyone is understanding the problem that i'm having here.

I'm trying to make the image centered, AND appearing at the very, very top of the page (the VERY VERY top of the page, so that there's no space between the edge of the image and the browser's toolbar).

I can use absolute positioning to make the picture appear at the very very top of the page like so:

{
position: absolute;
top: 0px;
}

However, since there is no good method to center an image using absolute positioning (as far as i know), I need to use another style to center the image. However, any other positioning styles that I apply to the image have no effect when absolute postioning is in effect.

How can I get this image centered AND appearing at the very very top of the screen (without using a div box or other container)?

maxplanck735
Offline
Enthusiast
Last seen: 13 years 4 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

I just tried using a div box

I just tried using a div box because at this point i don't care about a little extra code bloat, and i have the same problem with the div box.

I think the key point that people are missing is that I want the image to be at the VERY VERY top of the page. If I simply center the image or div box and make it the first element on the page, there is a line of blank space above the image or div box. I want the image or div box to be at the VERY VERY top of the page, without this blank space above it.

Thanks for all the help so far guys

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 7 weeks 3 days ago
Joined: 2004-06-30
Posts: 9674
Points: 810

This line of blank space is

This line of blank space is the default padding on the body element.

Zero the margins and padding of HTML and BODY and your gap disappears.

I think I've explained that about 5 times this week Tongue

Verschwindende wrote:
  • CSS doesn't make pies

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Actually I think the key

Actually I think the key point here is that all of us are having a hard time trying to understand why you are having such a problem with such a simple thing! we have given you any number of approaches to obtain the results you want what is the problem you are having?

One ensures that the html,body elements have their margins/padding removed (standard practise) then if the image is described first in the markup it will be at the top of the viewport if you want it centred then set text-align center on the body element to align a inline element or make the image display:block and use auto margins.

Not sure how else to help you really , describe once more what exactly you are having a problem with and provide sight of the code you are using .

But do pay attention to the point about removing margins/padding as we have said it before and it does sound as though you are not reading the posts carefully enough Smile
Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

it really helps if you

it really helps if you confine your question to the one thread.

http://csscreator.com/node/20331

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

maxplanck735
Offline
Enthusiast
Last seen: 13 years 4 weeks ago
Joined: 2007-02-23
Posts: 66
Points: 0

AHA! Sorry, i'm a newb and

AHA! Sorry, i'm a newb and don't know what the standard procedure is.

This works and makes sense, thanks a lot everybody!