homepage Welcome to WebmasterWorld Guest from 54.167.11.16
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Vertically Center Content
cjiggens




msg:4314524
 7:10 am on May 19, 2011 (gmt 0)

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myFlashContent", "9.0.0");
</script>
<style type="text/css">

#content {
margin: 0 auto;
}

#mainflash {
z-index: 1;
position: relative;
width: 1000px;
margin: 0 auto;
}
</style>
</head>
<body>

<div id="content">

<div id="mainflash">
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%
2Fwww.facebook.com;layout=box_count&amp;show_faces=false&amp;width=150
&amp;action=like&amp;font&amp;colorscheme=light&amp;height=65"
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>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="1000" height="600" id="myFlashContent">
<param name="movie" value="myswf.swf" />
<param name="wmode" value="opaque" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="myswf.swf" width="1000" height="600">
<param name="wmode" value="transparent" />
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>

</div>

</div>
>
</body>
</html>

[edited by: alt131 at 11:49 am (utc) on May 19, 2011]
[edit reason] Side Scroll [/edit]

 

lucy24




msg:4314539
 7:43 am on May 19, 2011 (gmt 0)

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.

When you say "page" do you mean screen? If so, you can get its height either through css or javascript. There's a recent-ish thread about bottom-aligning a footer on wide screens; the underlying principle is the same, so try to dig it up.

cjiggens




msg:4314726
 3:44 pm on May 19, 2011 (gmt 0)

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

alt131




msg:4314727
 3:44 pm on May 19, 2011 (gmt 0)

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.

lucy24




msg:4314748
 4:09 pm on May 19, 2011 (gmt 0)

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.

alt131




msg:4314790
 4:55 pm on May 19, 2011 (gmt 0)

Some browsers have been known to eat the overflowing text. (Personal experience.)
Hmmmmmm ... Note to self: Feed browsers twice daily.

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.

cjiggens




msg:4314812
 5:26 pm on May 19, 2011 (gmt 0)

So by putting another div called wrapper is my solution giving it relatative position and giving my content a absolute position?

rocknbil




msg:4314843
 6:02 pm on May 19, 2011 (gmt 0)

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. :-)

lucy24




msg:4314920
 8:57 pm on May 19, 2011 (gmt 0)

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 ;)

alt131




msg:4315813
 12:08 am on May 22, 2011 (gmt 0)

@cjiggens Did those suggestions help? ... and ignore the following - you've just raised an interesting point from times gone by ;)

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
Interesting issue Lucy, but note the example was specific to negative margins plus absolute positioning.

. 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved