|Vertically Center Content|
I have tried so many different ways of centering that i am totally the stumped currently when i publish this code its not centered vertically but horizontally it is, I need it to be centered in the page. vertical align middle nothing seems to be working, any help is greatly appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
margin: 0 auto;
margin: 0 auto;
scrolling="no" frameborder="0" style="right: 15px; top: 100px; width:
75px; height: 65px; z-index: 999; position: absolute; overflow:
hidden;" allowtransparency=;"false" ; border:none; overflow:hidden;></iframe>
width="1000" height="600" id="myFlashContent">
<param name="movie" value="myswf.swf" />
<param name="wmode" value="opaque" />
<object type="application/x-shockwave-flash" data="myswf.swf" width="1000" height="600">
<param name="wmode" value="transparent" />
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
[edited by: alt131 at 11:49 am (utc) on May 19, 2011]
[edit reason] Side Scroll [/edit]
Simplistic answer: a thing can only be centered (or left/right aligned) if it's inside of another thing. Contents of table cells can be centered both ways because the cell has four walls. Anything, anywhere, can be centered horizontally, because at a minimum it's inside of the body, which has a fixed width. But the body has no height; like a scroll, it goes on forever.
I am not using tables, I am using divs, and i know if i change my mainflash div to relative absolute than do a top 50% and a bottom %50 but it doesnt work.its pushing upward not staying in the middle.
any other help
Welcome to WebmasterWorld cjiggens :)
You're almost there! SuzyUK wrote a guide to Vertical Centre with css [webmasterworld.com] that could easily be adpated to your layout. It is older, but the issues are much the same, and includes explanantions and sample code to help decide which works best for your situation.
Just be aware that 1000x665 is reasonably large. So if you choose the position:absolute/negative margin technique, just check it doesn't "pull" the element offscreen if the user has a smaller viewport.
[Edit] Ooops! Cross-post. Suzy's guide will help with your last issue as well.
If you're doing anything involving negative margins, be sure to test it on all conceivable browsers, especially any and all versions of MSIE. Some browsers have been known to eat the overflowing text. (Personal experience.) It should not be an issue if the margin is used purely for positioning and will never contain any visible content, but don't take chances.
Hmmmmmm ... Note to self: Feed browsers twice daily.
|Some browsers have been known to eat the overflowing text. (Personal experience.) |
Being serious, the issue of elements being "pulled" off screen is a result of conforming browsers behaving as directed. Definitely not an issue limited to a particular type.
Testing is critical but few organisations have the resources to maintain test suites of all conceivable browsers, and understandably as the majority will never be seen anymore. Testing by likely engine and platform is more achievable and useful. Plus recognising visual browsers are not the only user agents, and accommodating other devices.
So by putting another div called wrapper is my solution giving it relatative position and giving my content a absolute position?
An old simplified example: Dead Centre [wpdfd.com]
Not that this implementation starts to fall off the left of the page if 1) the object is a fixed width, such as a X00px wide layout, and 2) you unhinge the browser from maximized and make it really small. This gets important on mobile devices. But the vertical part works fine.
So that's a big yes. :-)
|Being serious, the issue of elements being "pulled" off screen is a result of conforming browsers behaving as directed. Definitely not an issue limited to a particular type. |
I mean that if you have a negative margin as part of the definition of a text area (don't know what normal people use this for, but it's one of my three ways of setting up sidenotes), some browsers will "white-out" the part that's on the wrong side of its margin. Even if the whole thing fits nicely on the screen.
None of my current browsers does it, so it may have been an MSIE 6 issue. But in the course of testing I discovered an(other) annoying behavior on the part of Opera, so I don't consider my time wasted ;)
@cjiggens Did those suggestions help? ... and ignore the following - you've just raised an interesting point from times gone by ;)
Interesting issue Lucy, but note the example was specific to negative margins plus absolute positioning.
|I mean that if you have a negative margin as part of the definition of a text area some browsers will "white-out" the part that's on the wrong side of its margin. Even if the whole thing fits nicely on the screen. ... may have been an MSIE 6 issue |
. ie6 will "clip" a non-positioned element that has been negatively margined outside it's containing block. recalling css2 provides for "implementation-specific limits" on negative margin values, that an element "may" overflow it's containing block, and that overflow "may" be rendered outside the containing block. Those "maybe's" make it hard to say it is wrong.
Plus there is some logic to clipping to the containing block - if an element needs to be drawn outside the container, why is it inside the container in the first place? That doesn't occur if the element is positioned as well as margined, which on the logic of the time, also makes sense.