problems with positioning url page which is aligned to the left and with placing foot

[tony webb]

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>

[MrSnowDrop]

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.

[tony webb]

Thanks for your reply.

Before I follow your suggestion I would like to ask this;

I am using a grid system so that I can make my site responsive to different screen sizes. Will the above code affect the responsive part:

If it does can I change the width to 100% as the grid is 1000px?

[MrSnowDrop]

Pecentage values always refer to parent containers (visible or not) which have a declared width assignment.

Don't know so much about that "grid system", but i suppose it detects screen size - javascript can easily do the same thing: JS variables can then handle screen size values and adapt them to HTML code - general reference:
http://www.w3schools.com/jsref/obj_screen.asp

Anyway, if that grid system auto-assigns the max width/height to a main container, you can give a try to the "margin-left" trick and see what happens with percentage values.