[diskobolos]

I want to position an image 15px from the top and align center, floating over another element starting 0, 0 on the page. You'd this would be really easy to do but seems CSS doesn't do centering very well. I tryed using relative positioning and that got me centered, (because I have a centering table for the whole page).. but it relatives it 15px under the other element and that doesn't work.

So I decided to put the image inside a table with width 100% and align=center, then position the table 15px down and 0 left, that did work in all browsers expect omniweb. But it seems like a lot of work where css is supposed to make things easier.. and what is easy with a simple <center> tag. Plus I'm back to using more tables..

Seems I'm missing something. Is there someway to go style="position: absolute; top: 15px; left: center, or document.width/2 or 50%">?

[peterthorn]

well, a bug could be that you have defined the position as absolute - try to play around with that.

Peter

[diskobolos]

I want it postioned absolute 15px down from the top of the page and centered relative to the browser window width.

Is there and easy way to do that with css? I know I can do it other ways, but I want to use css so I can float it over another element.

[diskobolos]

ok it was late when I was trying that last night.. but I went to the source and came up with another way... could do <div align="center" style="position: absolute; top: 10px; left: inherit; right: inherit;">

And that works in mozilla, ie and opera, somewhat in icab (but it isn't removed from the normal flow) and not in omniweb (is removed but the centering doesn't work).

So I don't know if I am even gonna use it.. it was just so I could position a logo over a table stripe at the top of a page and use a gradient background 10 pixels tall.. instead of making a 10000 tall gradient background (long page) with a graphic stripe at the top and center the logo one br down.

[Millennium]

Try this out for size (I assume you've given the image an ID of "logo"; change the selector as appropriate):

#logo {
display: block;
position: absolute;
width: whatever;
height: whatever;
top: 15px;
margin-left: auto;
margin-right: auto;
}

That margin-left and margin-right of auto are the important part. The standard says that when both of these are set to "auto", they're set to be equal to each other, and just large enough that the image still has just enough room to display. In effect, it centers the object. That's how you center block-level elements in CSS (images are normally inline; that's why the display:block bit is needed).

For centering inline things such as text and images, you use the text-align:center rule. Yes, text-align is a bit of a misnomer; it actually applies to all inline content, not just text.

[diskobolos]

Originally posted by Millennium:
<STRONG>That margin-left and margin-right of auto are the important part. The standard says that when both of these are set to "auto", they're set to be equal to each other, and just large enough that the image still has just enough room to display. In effect, it centers the object. That's how you center block-level elements in CSS (images are normally inline; that's why the display:block bit is needed).

For centering inline things such as text and images, you use the text-align:center rule. Yes, text-align is a bit of a misnomer; it actually applies to all inline content, not just text.</STRONG>

I tried it and margins nor text-align don't seem to work... and since css seems sketchy in all but a couple recent browsers I just used the div align center, absolute, top 10 px, left/right inherit and have a browser check write in different code for lower app versions.

Not putting it in a sheet since it's just one element, it's in a div style tag and since it's written by an include it doesn't really matter.

Thanks for your reply though..

[ 03-05-2002: Message edited by: diskobolos ]