Jump to content

Fluidity


aquatsr
 Share

Recommended Posts

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...