aquatsr Posted August 21, 2006 Share Posted August 21, 2006 ok I have the code below, which is exactly the layout i want (finally learned some basic css). but i want that entire layout to be centered on all browsers, not matter that size the browser window is (browser type doesn't really matter as css complies w/ w3c coding for the most part)i know u can do something w/ floats, can someone explain further. /* Hyperlink Colors for Top Navigation */a.top:link {color: blue; background-color: white; text-decoration: none;}a.top:visited {color: blue; background-color: white; text-decoration: none;}a.top:hover {color: white; background-color: darkblue; text-decoration: none;}a.top:active {color: white; background-color: blue; text-decoration: none;}/*Hyperlink colors for Side Navigation */a.side:link {color: blue; background-color: white; text-decoration: underline; font-family: Arial; font-size:13px; font-weight:bold;}a.side:visited {color: blue; background-color: white; text-decoration: underline; font-family: Arial; font-size:13px; font-weight:bold;}a.side:hover {color: blue; background-color: white; text-decoration: underline; font-family: Arial; font-size:13px; font-weight:bold;}a.side:active {color: red; background-color: white; text-decoration: underline; font-family: Arial; font-size:13px; font-weight:bold;}/* Page Layout */#topnav {position: absolute;left: 608px;top: 10 px;width: 222px;height: 18px;border: 4px solid white;overflow: hidden;background-color: darkblue;}#topad {position:absolute;top: 50px;left: 105px;width:738px;height:100px;/* margin {Right, Top, Left} */}#topscroll {position:absolute;top:150px;left:110px;width:726px;height:22px;overflow:hidden;}#sidenav {position:absolute;top:174px;left: 105px;width: 100px;height: 610px;}#sidead {position:absolute;top: 174px;left: 210px;width:160px;height: 610px;}#content {position:absolute;top: 174px;left: 371px;width: 433px;height: 500px;overflow: auto;/* border: 1px solid black; */padding: 1em;}#bottomad {position:absolute;top: 714px;left: 371px;width: 468px;height: 65px;overflow: hidden;}#footer {position: absolute;top: 800px;left:115px;width:726px;height:100px;font-size:8px;} Thanks!EDIT: please don't take code w/o permission as i have coded it all myself... no copy/paste Link to comment Share on other sites More sharing options...
reportingsjr Posted August 21, 2006 Share Posted August 21, 2006 For some odd reason, I dont think anyone would really want to take this code.. there arent any hacks anyone would need and they wouldnt have any other use. Too easy to code to take lol.What you need to do is put a <div> around everything else in body, then use style to set margin: auto;like this: <body><div style='width: XXX;height:XXX;margin:auto;'>This is a bunch of html code</div></body> Link to comment Share on other sites More sharing options...
aquatsr Posted August 21, 2006 Author Share Posted August 21, 2006 Hmmm that didn't seem to do anything.I made the width 850px, height 1000px, and margin auto, like so: <div style="width: 850px; height:1000px; margin:auto;"> and put </div> at the end. Basically all my layout and content is between those two tags. What I want it to do is when the user enlarges the browser window, for the layout to stay centered on the page, no matter what size the browser is.Suggestions?EDIT1: If it helps, this is what I have at the top: <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"> Link to comment Share on other sites More sharing options...
aquatsr Posted August 21, 2006 Author Share Posted August 21, 2006 Hah! I got it. Thanks reportingsjr, you were right. I just had to fiddle with my code elsewhere too.Here's the final code for anyone else who was interested: PM me if you want to use the code yourself. /* Hyperlink Colors for Top Navigation */a.top:link {color: white; background-color: #003366; text-decoration: none;}a.top:visited {color: white; background-color: #003366; text-decoration: none;}a.top:hover {color: white; background-color: #6699cc; text-decoration: none;}a.top:active {color: #003366; background-color: white; text-decoration: none;}/*Hyperlink colors for Side Navigation */a.side:link {color: blue; background-color: white; text-decoration: underline; font-family: Arial; font-size:13px; font-weight:bold;}a.side:visited {color: blue; background-color: white; text-decoration: underline; font-family: Arial; font-size:13px; font-weight:bold;}a.side:hover {color: blue; background-color: white; text-decoration: underline; font-family: Arial; font-size:13px; font-weight:bold;}a.side:active {color: red; background-color: white; text-decoration: underline; font-family: Arial; font-size:13px; font-weight:bold;}/* Page Layout */body {margin: 0 auto;width: 750px; /*733px*/height:800px;border: 0px solid black;overflow: hidden;}#topnav {float: right;width: 222px;height: 18px;border-left: 0px solid #6699cc;border-right: 0px solid #6699cc; /*Make individual buttons */border-top: 0px solid #6699cc;border-bottom: 0px solid #6699cc;overflow: hidden;background-color: #6699cc;margin-top: 1em;margin-bottom: 1em;margin-right: 1.1em;}#topad {float: left;width:738px;height:100px;margin: auto;/* margin {Top, Right, Bottom, Left} */}#topscroll {float: left;margin-left: 1em;width:710px;height:22px;overflow:hidden;border: 0px solid black;}#sidenav {float: left;margin: auto;width: 100px;height: 610px;clear: left;}#sidead {float: left;margin: auto;width:160px;height: 610px;}#content {float: left;width: 433px;height: 500px;overflow: auto;padding: 1em;margin: 2px 0px 0px 0px;}#bottomad {float: left;width: 468px;height: 65px;overflow: hidden;margin: 6px 0px 0px 0px;}#footer {float: left;width:726px;height:100px;font-size:8px;margin: auto;} Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now