problems with positioning url page which is aligned to the left and with placing foot
I am trying to program my first site and decided to use a 1000px grid system.
The problems that I am having are:
1. The page in larger sized screens is positioned to the left of the screen with a large space to the right. I want to put the url in the centre of larger screens. I have tried "align: center". It didn't work.
2. The menu for the foot of the page appears near the top of the text box and some of it is behind it.
Can you tell me how to align the page and how to display the menu at the foot of the page?
You can see the page here you can see the coding by clicking on source but I have put the division coding below.
The code for the page set up is this;
in the css section:
body {background-color:#c0c0c0;}
the code in the html section; I have removed the text to make it easier to read the code (i hope)
<div id ="title" class="container_20 grid_20">
<div id="head-photo" class="container_20 grid20">
</div>
<div id="menu" class="container_20 grid_20"><a id="up"></a>
<nav style="font-family:verdanna; padding-top: 3px">
<ul>
</ul>
</nav>
</div>
<hr/>
</div>
<div id="main-back" class="container_20 grid_20">
<div id="main-box" class="grid_14 push_3">
<div id="texted_1 class="grid_14 push_3">
</div>
</div>
<footer>
<div id="foot_menu" style="container_20 grid_20">
<nav>
<ul>
</ul>
</nav>
</div>
</footer>
</div>
</div>
</body>
</html>
How to center a page to the screen
In order to center the page, you can put the page content inside an absolute-positioned container like that:
<div id="container" style="position:absolute;top:0;width:1000px;left:50%;margin-left:-500px">
<!-- write content here -->
</div>
Note: the "margin-left" has the half-width value, in negative.
Then, in order to have a footer at the bottom of the page, an idea could be setting a container-height (in below example 768px), because it's absolute-positioned, so to let assign a "bottom" value to the footer position, and the final code looks like:
<div id="container" style="position:absolute;top:0;width:1000px;left:50%;margin-left:-500px;height:768px">
<!-- write page content here -->
<div id="footer" style="position:absolute;bottom:0;width:1000px" align="center">
<!-- write footer content here -->
</div><!-- close footer -->
</div><!-- close container -->
Note: you can put the footer DIV outside the container too (if it's absolute-positioned), the important thing is to assign a "height" value to the container, because the "bottom" parameter searches for the bottom of that height value.
If the bottom content isn't absolute-positioned, you simply have to consider the footer as the final part of the content.
