podarum Posted October 1, 2009 Share Posted October 1, 2009 Anyone know how I can center my webpage so that it opens on the center of the screen on any browser at any size...but it's always centered....I'm using DW CS4 Link to comment Share on other sites More sharing options...
multiLady Posted October 1, 2009 Share Posted October 1, 2009 Hi,I found this example on the web, it worked for me. Although I am a beginner I could use it for what I need.Hope this will works for you too:centeredExample Link to comment Share on other sites More sharing options...
podarum Posted October 1, 2009 Author Share Posted October 1, 2009 Thanks.. this looks good and it's exactly what I'm looking for...but what si the code that I should insert to make it centered ?? Link to comment Share on other sites More sharing options...
multiLady Posted October 1, 2009 Share Posted October 1, 2009 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Vertically and Horizontally Centering a DIV</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><script type="text/javascript" src="/mint/mint.js.php"></script><style type="text/css">body { font-size: 12px; font-family: arial, helvetica, sans-serif; color: #333;}p { margin: 1em;}.comments { background-color: #e3e3e3; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 2px;}#mydiv { position:absolute; top: 50%; left: 50%; width:30em; height:18em; margin-top: -9em; /*set to a negative number 1/2 of your height*/ margin-left: -15em; /*set to a negative number 1/2 of your width*/ border: 1px solid #ccc; background-color: #f3f3f3;}</style></head><body><div id='mlk' class='menu' style='position:absolute;top:-10000px;left:-10000px;'></div><img height="1" width="1" alt="" src="http://e1.extreme-dm.com/s10.g?login=nahuibly&j=n&jv=n" /><div id="mydiv"> <p>This is a vertically and horizontally centered <div> tag. Try resizing your browser.</p> <div class="comments"> <p><strong>Comments:</strong></p> <p>Tested in: <span style="color: darkblue">Firefox, IE6, Opera 7, NN4.7, NN7, and Mozilla 1.2.</span><br /> Works in: <span style="color: darkblue">Firefox, IE6, Opera 7, NN7, and Mozilla 1.2.</span><br /> Doesn't work in: <span style="color: darkblue">NN4.7</span></p> <p>© Copyright 2003, <a href="/">Infinity Web Design</a></p> </div></div></body></html> Above is the code that this guy used for that example.When you are looking to see the code of the page you should click ----> View / Page Source (browsers tabs) and you will see the code of the page you are looking in browser. Link to comment Share on other sites More sharing options...
Guest FirefoxRocks Posted October 2, 2009 Share Posted October 2, 2009 In your CSS: body { width: 964px; margin: 0 auto;} It doesn't have to be 964px, it can be a percentage if you wish. Link to comment Share on other sites More sharing options...
podarum Posted October 2, 2009 Author Share Posted October 2, 2009 In the margin : 0 auto.. I can only put 0 or auto in the margin input Link to comment Share on other sites More sharing options...
thescientist Posted October 2, 2009 Share Posted October 2, 2009 you should be able to do both, like FireFoxRocks stated. If you can, hard code this part. Link to comment Share on other sites More sharing options...
podarum Posted October 2, 2009 Author Share Posted October 2, 2009 I tried the code and everything shifted to the right and bottom.... here's my code... #body { position:absolute; top:50%;width:844px;height:576px;z-index:16;margin: 0 auto;left: 50%;} Link to comment Share on other sites More sharing options...
thescientist Posted October 2, 2009 Share Posted October 2, 2009 take the # out Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.