Center an object in HTML while having it at location '0' from the top... - Printable Version
-Shoutbox (https://shoutbox.menthix.net)
+-- Forum: MsgHelp Archive (/forumdisplay.php?fid=58)
+--- Forum: Skype & Technology (/forumdisplay.php?fid=9)
+---- Forum: Tech Talk (/forumdisplay.php?fid=17)
+----- Thread: Center an object in HTML while having it at location '0' from the top... (/showthread.php?tid=31223)
Center an object in HTML while having it at location '0' from the top... by .blade// on 09-10-2004 at 04:34 PM
OK, here's the deal - In HTML, I need to center rather a table or an iframe, but also have it at location '0' from the top, anyone have any ideas?
RE: Center an object in HTML while having it at location '0' from the top... by fluffy_lobster on 09-10-2004 at 06:53 PM
Center it horizontally or vertically?
RE: Center an object in HTML while having it at location '0' from the top... by .blade// on 09-10-2004 at 06:59 PM
I need it to be at the VERY TOP of the page (no space between the top and the object) but centered from left to right (horizontally)
RE: Center an object in HTML while having it at location '0' from the top... by fluffy_lobster on 09-10-2004 at 07:07 PM
<body topmargin="0"><table align="center">...
RE: Center an object in HTML while having it at location '0' from the top... by .blade// on 09-10-2004 at 07:21 PM
Thanks 
btw, ur sig. is wrong - it says I'm using FF 0.8, but I'm using FF 0.9 
...
RE: Center an object in HTML while having it at location '0' from the top... by lhunath on 09-10-2004 at 09:46 PM
quote:Ewww!
Originally posted by fluffy_lobster
<body topmargin="0"><table align="center">...
God's sake.
HTML:
<iframe id="myframewhichiwantcentered" ....></iframe>
CSS:
#myframewhichiwantcentered {
position: absolute;
top: 0px;
width: [framewidth]px;
left: 50%;
margin-left: -[framewidth]px;
}
Don't do it in CSS, then don't do it at all, or perlease keep it XHTML compliant...
or if you can't be bothered to keep the CSS somewhere seperate; do it the lame way:
<iframe style="position: absolute; top: 0px; left: 50%; width: [framewidth]px; margin-left: -[framewidth]px;" .....></iframe>
Btw, Iframes are ghay =)
~lhun
RE: Center an object in HTML while having it at location '0' from the top... by .blade// on 09-10-2004 at 09:55 PM
I got it to work with the way fluffy said...
RE: Center an object in HTML while having it at location '0' from the top... by k776 on 09-10-2004 at 10:06 PM
yeah, but that way isn't going to show the saem on all browsers the way lhunath suggested is better.
RE: Center an object in HTML while having it at location '0' from the top... by RaceProUK on 09-10-2004 at 10:31 PM
The easiest way is to use CSS, and use
code:Those are the only two properties you need, and they also allow for different screen/window sizes.
vertical-align : top;
align : center;
I beg you, don't use absolute sizing/positioning! It gets messed up when the resolution/window size changes!
RE: Center an object in HTML while having it at location '0' from the top... by fluffy_lobster on 09-11-2004 at 11:21 AM
quote:You're right - I wasn't aware the topmargin attribute was no longer valid. However blade was asking for an HTML solution, so I hardly see preaching that mess of a css hack a tidy alternative. All that actually needs to be done is give the body the margin-top: 0px; style, and seeing as it's a lone attribute there's no real reason why not to use inside the tag; <body style="margin-top: 0px;">
Originally posted by lhunath
quote:Ewww!
Originally posted by fluffy_lobster
<body topmargin="0"><table align="center">...
God's sake.
HTML:
<iframe id="myframewhichiwantcentered" ....></iframe>
CSS:
#myframewhichiwantcentered {
position: absolute;
top: 0px;
width: [framewidth]px;
left: 50%;
margin-left: -[framewidth]px;
}
Don't do it in CSS, then don't do it at all, or perlease keep it XHTML compliant...
or if you can't be bothered to keep the CSS somewhere seperate; do it the lame way:
<iframe style="position: absolute; top: 0px; left: 50%; width: [framewidth]px; margin-left: -[framewidth]px;" .....></iframe>
Btw, Iframes are ghay =)
~lhun
For the horizontal centering, either raceprouk's align: center; style or the html attribute align="center" are valid and intercompatible.
By the way, racepro, the vertical-align: top; is obsolete because that's the default for members of the <body> element. The issue with top aligning it was that there is a default top margin of something like 10px
RE: Center an object in HTML while having it at location '0' from the top... by Banks on 09-11-2004 at 12:34 PM
quote:
Originally posted by raceprouk
code:
align : center;
align: center wont work you have to use
code:
margin-left: auto;
margin-right:auto;
RE: Center an object in HTML while having it at location '0' from the top... by lhunath on 09-11-2004 at 01:36 PM
quote:
Originally posted by raceprouk
The easiest way is to use CSS, and use
code:
vertical-align : top;
align : center;
1. Vertical align isn't even supported in many many browsers, such as, Internet Explorer.
2. Align: center won't work on iframes, but it would on a table containing an Iframe, since what it does is align the content of an object, rather than the object itself.
quote:Yes, very true, but what I posted is a way of making sure the page remains as dynamic as possible, since I'm using position: absolute. That way, no other content will disturb the flow. Frankly, yes, for his case I assume this sollution would be better (in the case that the object he wants centered itself doesn't have a standard margin/padding - like I assumed as well).
Originally posted by fluffy_lobster
All that actually needs to be done is give the body the margin-top: 0px; style, and seeing as it's a lone attribute there's no real reason why not to use inside the tag; <body style="margin-top: 0px;">
quote:Yes! exactly. I use "margin: auto;" though, short-hand. Yet it won't work on absolute positioned objects, like my example, since the auto margin, autos to 0 in that case.
Originally posted by Banks
code:
margin-left: auto;
margin-right:auto;
quote:Let me correct myself:
Originally posted by lhunath
<iframe style="position: absolute; top: 0px; left: 50%; width: [framewidth]px; margin-left: -[framewidth]px;" .....></iframe>
<iframe style="position: absolute; top: 0px; left: 50%; width: [framewidth]px; margin-left: -[framewidth / 2]px;" .....></iframe>
Or like suggested above:
code:
<body style="margin: 0; padding: 0">
<iframe style="margin: auto;" .... ></iframe>
<Iamhtml></Iamhtml>
</body>
RE: Center an object in HTML while having it at location '0' from the top... by RaceProUK on 09-11-2004 at 02:51 PM
quote:I never specified what element to assign the attributes to, instead leaving that up to whoever uses it. If you use attach those attrs to the <body> element or a <td>, then you'll get the right effect.
Originally posted by lhunath
quote:
Originally posted by raceprouk
The easiest way is to use CSS, and use
code:
vertical-align : top;
align : center;
1. Vertical align isn't even supported in many many browsers, such as, Internet Explorer.
2. Align: center won't work on iframes, but it would on a table containing an Iframe, since what it does is align the content of an object, rather than the object itself.
Also, I use vertical-align, and it works in both Mozilla and IE.
RE: Center an object in HTML while having it at location '0' from the top... by lhunath on 09-12-2004 at 09:33 AM
quote:I think it works for TD elements only in IE, not sure though. I'd have to check a compliancy table. But it's a fact that the support for it is very buggy & broken as of yet.
Originally posted by raceprouk
Also, I use vertical-align, and it works in both Mozilla and IE.
RE: Center an object in HTML while having it at location '0' from the top... by RaceProUK on 09-12-2004 at 10:40 AM
quote:That won't stop me writing standards-compliant code. It shouldn't stop anyone writing code to the standards, though some of the more experienced web developers favour IE
Originally posted by lhunath
quote:I think it works for TD elements only in IE, not sure though. I'd have to check a compliancy table. But it's a fact that the support for it is very buggy & broken as of yet.
Originally posted by raceprouk
Also, I use vertical-align, and it works in both Mozilla and IE.
RE: Center an object in HTML while having it at location '0' from the top... by lhunath on 09-12-2004 at 10:58 AM
quote:Well spoken
Originally posted by raceprouk
That won't stop me writing standards-compliant code. It shouldn't stop anyone writing code to the standards, though some of the more experienced web developers favour IE
RE: Center an object in HTML while having it at location '0' from the top... by RaceProUK on 09-12-2004 at 11:03 AM
Thankyou 
RE: Center an object in HTML while having it at location '0' from the top... by BART SIMPSON416 on 09-12-2004 at 11:42 AM
<center></center>
Not more not less.
RE: Center an object in HTML while having it at location '0' from the top... by lhunath on 09-12-2004 at 12:02 PM
quote:Bluergh. Depricated sickening tags. Urg.
Originally posted by BART_SIMPSON416
<center></center>
Not more not less.
* lhunath gets sick.
* lhunath curses all the people like that who poisoned the beauty of the web to eternities of damnation in the scorching fires of the darkest chambers of the underworld.