html - Centre divs horizontally not working inside container div -
i've been struggling days must missing stupid, hope can help!
basically building site header, body , footer. header div has flash element embedded , working fine. have divs centered using:
position: absolute; width: 2000px; margin-left: -1000px; left: 50%; this worked fine until tried footer stay @ bottom of page not overlap rest of content when resizing. got sorted stickyfooter, , putting div outside of container div, , changing divs position 'relative'.
but inside container not want center correctly anymore , cant right. ideas please? appreciate it.
here html:
<!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"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>site</title> <link href="css/lum.css" rel="stylesheet" type="text/css" /> <script src="js/flexcroll.js" type="text/javascript"></script> <script src="js/spryeffects.js" type="text/javascript"></script> <script type="text/javascript"> function mm_showhidelayers() { //v9.0 var i,p,v,obj,args=mm_showhidelayers.arguments; (i=0; i<(args.length-2); i+=3) (document) if (getelementbyid && ((obj=getelementbyid(args[i]))!=null)) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; } obj.visibility=v; } } function mm_effectappearfade(targetelement, duration, from, to, toggle) { spry.effect.dofade(targetelement, {duration: duration, from: from, to: to, toggle: toggle}); } </script> </head> <body> <div id="container" align="center"> <div id="header"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="2000" height="500" id="lum_topbar" align="middle"> <param name="movie" value="lum_topbar.swf" /> <param name="quality" value="best" /> <param name="bgcolor" value="#ffffff" /> <param name="play" value="true" /> <param name="loop" value="true" /> <param name="wmode" value="transparent" /> <param name="scale" value="showall" /> <param name="menu" value="true" /> <param name="devicefont" value="false" /> <param name="salign" value="" /> <param name="allowscriptaccess" value="samedomain" /> <!--[if !ie]>--> <object type="application/x-shockwave-flash" data="lum_topbar.swf" width="2000" height="500"> <param name="movie" value="lum_topbar.swf" /> <param name="quality" value="best" /> <param name="bgcolor" value="#ffffff" /> <param name="play" value="true" /> <param name="loop" value="true" /> <param name="wmode" value="transparent" /> <param name="scale" value="showall" /> <param name="menu" value="true" /> <param name="devicefont" value="false" /> <param name="salign" value="" /> <param name="allowscriptaccess" value="samedomain" /> <!--<![endif]--> <a href="http://www.adobe.com/go/getflash"> <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> <iframe name="ifcontent" id="ifcontent" frameborder="0" allowtransparency="true" src="home.html"></iframe> </div> <div id="footer"> <div id="footer_img"><img src="images/footer.jpg" alt="footer" width="2000" height="227" usemap="#map" border="0" /> <map name="map" id="map"> <area shape="rect" coords="961,32,1019,55" href="design.html" target="ifcontent" alt="design" onmouseover="mm_effectappearfade('tick1', 300, 0, 100, false)" onmouseout="mm_effectappearfade('tick1', 300, 100, 0, false)"/> <area shape="rect" coords="977,57,1018,76" href="web.html" alt="web" target="ifcontent" onmouseover="mm_effectappearfade('tick2', 300, 0, 100, false)" onmouseout="mm_effectappearfade('tick2', 300, 100, 0, false)"/> <area shape="rect" coords="810,79,1016,98" href="wedding.html" target="ifcontent" alt="wedding invites" onmouseover="mm_effectappearfade('tick3', 300, 0, 100, false)" onmouseout="mm_effectappearfade('tick3', 300, 100, 0, false)"/> <area shape="rect" coords="936,100,1015,121" href="contactus.html" target="ifcontent" alt="contact us" onmouseover="mm_effectappearfade('tick4', 300, 0, 100, false)" onmouseout="mm_effectappearfade('tick4', 300, 100, 0, false)"/> <area shape="rect" coords="932,126,1016,142" href="contactus.html" target="ifcontent" alt="quote" onmouseover="mm_effectappearfade('tick5', 300, 0, 100, false)" onmouseout="mm_effectappearfade('tick5', 300, 100, 0, false)"/> </map> <div id="div_ticks"> <table width="27" height="110" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="21"><img src="images/tick.png" name="tick1" width="21" height="6" id="tick1" onload="mm_showhidelayers('tick1','','hide')" /></td> </tr> <tr> <td height="21"><img src="images/tick.png" name="tick2" width="21" height="6" id="tick2" onload="mm_showhidelayers('tick2','','hide')" /></td> </tr> <tr> <td height="21"><img src="images/tick.png" name="tick3" width="21" height="6" id="tick3" onload="mm_showhidelayers('tick3','','hide')"/></td> </tr> <tr> <td height="21"><img src="images/tick.png" name="tick4" width="21" height="6" id="tick4" onload="mm_showhidelayers('tick4','','hide')"/></td> </tr> <tr> <td height="21"><img src="images/tick.png" name="tick5" width="21" height="6" id="tick5" onload="mm_showhidelayers('tick5','','hide')"/></td> </tr> </table> </div> </div> </body> </html> and here css:
html, body {height: 100%;} body { padding: 0; overflow-x: hidden; background-color: #000; background-image: url(../images/main.jpg); background-position: center; background-repeat: repeat-y; height: 100%; margin: 0; } #container { position: relative; width: 100%; margin: 0; min-height: 100%; overflow: auto; padding-bottom: 228px; } #header { position: relative; width: 2000px; height: 456px; margin-left: -1000px; left: 50%; z-index: 2; } #ifcontent { position: relative; overflow-x: hidden; width: 1100px; height: 610px; margin-left: -550px; left: 50%; } #footer { position: relative; width: 2000px; height: 228px; margin-left: -1000px; left: 50%; margin-top: -228px; clear: both; } #div_ticks { position: absolute; width: 33px; height: 121px; z-index: 4; left: 1036px; top: 35px; } #footer_img { position: absolute; width: 200px; height: 115px; z-index: 1; }
you can rid of of css here. can center elements without setting left:%50 width , negative margin. need set width of element set left , right margin auto.
#header { width:2000px; margin-left:auto; margin-right:auto; }
Comments
Post a Comment