After spending some time reading through these boards, I've been persuaded to take the unfamiliar route of using css, rather than tables, for my web page layouts.<br />
<br />
I'm currently having 2 problems. Please see the following link:<br />
<br />
<!-- m --><a class="postlink" href="http://193.201.133.11/test/test.html">http://193.201.133.11/test/test.html</a><!-- m --><br />
<br />
Firstly, I'm unable to centre the line of links currently located at the bottom of the page. I've tried setting margin-left:auto and margin-right:auto, but this results in the links starting in the centre of the page and continuing out to the right. If I remove the absolute positioning, they are centred as per the "align=center" attribute in the associated div element, but at the top of the page rather than the bottom. <br />
<br />
Secondly, I need the page layouts to occupy the full vertical height of the web browser as a minimum, regardless of the quantity of written content. Vertical scrolling is ok if the written content exceeds the length of the browser window. To do this, I've set:<br />
<br />
body {background-color:#fff; <br />
height:100%; <br />
font-family:"Arial", "Helvitica", "sans-serif"; <br />
color:#000; <br />
padding:0; <br />
margin:0}<br />
<br />
From reading previous posts, I realise that setting height:100% isn't always recommended and I've found that if the written content does exceed the browser window length, the content is positioned beneath the links at the bottom of the page and the coloured borders on either side of the page also stop at the end of the browser window while the written content continues to scroll. I've considered setting the page height to be some arbitrary length, but surely there must be a better way of doing this?<br />
<br />
Thanks for reading this far!! Any suggestions are very much appreciated.<br />
<br />
Matt<!--content-->Well instead of what you're doing I'd start out like this.<br />
<br />
...<br />
<style type="text/css"><br />
body {<br />
background-color:#069; <br />
height:100%; <br />
font-family:"Arial", "Helvitica", "sans-serif"; <br />
color:#000; <br />
padding:0; <br />
margin:0<br />
}<br />
#edges {<br />
background: #39c;<br />
height: 100%;<br />
width: 80%;<br />
margin: auto;<br />
}<br />
#content {<br />
background: #fff;<br />
height: 100%;<br />
width: 95%;<br />
margin: auto;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="edges"><br />
<div id="content"><br />
</div><br />
</div><br />
</body><br />
...<!--content-->Thanks for this - it's a much better way of doing it. While it seems to solve my problems in IE 6.0, it has introduced problems when the page is viewed in IE 5.0. In fact, positioning doesn't seem to work well in this browser version using css at all.<br />
<br />
Please see: <!-- m --><a class="postlink" href="http://193.201.133.11/test/test2.html">http://193.201.133.11/test/test2.html</a><!-- m --><br />
<br />
In IE 5.0, the blue borders only appear on the right and the vertical positioning of the links at the bottom of the page is ignored all together.<br />
<br />
Does any one have any suggestions to help with this?<!--content-->
<br />
I'm currently having 2 problems. Please see the following link:<br />
<br />
<!-- m --><a class="postlink" href="http://193.201.133.11/test/test.html">http://193.201.133.11/test/test.html</a><!-- m --><br />
<br />
Firstly, I'm unable to centre the line of links currently located at the bottom of the page. I've tried setting margin-left:auto and margin-right:auto, but this results in the links starting in the centre of the page and continuing out to the right. If I remove the absolute positioning, they are centred as per the "align=center" attribute in the associated div element, but at the top of the page rather than the bottom. <br />
<br />
Secondly, I need the page layouts to occupy the full vertical height of the web browser as a minimum, regardless of the quantity of written content. Vertical scrolling is ok if the written content exceeds the length of the browser window. To do this, I've set:<br />
<br />
body {background-color:#fff; <br />
height:100%; <br />
font-family:"Arial", "Helvitica", "sans-serif"; <br />
color:#000; <br />
padding:0; <br />
margin:0}<br />
<br />
From reading previous posts, I realise that setting height:100% isn't always recommended and I've found that if the written content does exceed the browser window length, the content is positioned beneath the links at the bottom of the page and the coloured borders on either side of the page also stop at the end of the browser window while the written content continues to scroll. I've considered setting the page height to be some arbitrary length, but surely there must be a better way of doing this?<br />
<br />
Thanks for reading this far!! Any suggestions are very much appreciated.<br />
<br />
Matt<!--content-->Well instead of what you're doing I'd start out like this.<br />
<br />
...<br />
<style type="text/css"><br />
body {<br />
background-color:#069; <br />
height:100%; <br />
font-family:"Arial", "Helvitica", "sans-serif"; <br />
color:#000; <br />
padding:0; <br />
margin:0<br />
}<br />
#edges {<br />
background: #39c;<br />
height: 100%;<br />
width: 80%;<br />
margin: auto;<br />
}<br />
#content {<br />
background: #fff;<br />
height: 100%;<br />
width: 95%;<br />
margin: auto;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="edges"><br />
<div id="content"><br />
</div><br />
</div><br />
</body><br />
...<!--content-->Thanks for this - it's a much better way of doing it. While it seems to solve my problems in IE 6.0, it has introduced problems when the page is viewed in IE 5.0. In fact, positioning doesn't seem to work well in this browser version using css at all.<br />
<br />
Please see: <!-- m --><a class="postlink" href="http://193.201.133.11/test/test2.html">http://193.201.133.11/test/test2.html</a><!-- m --><br />
<br />
In IE 5.0, the blue borders only appear on the right and the vertical positioning of the links at the bottom of the page is ignored all together.<br />
<br />
Does any one have any suggestions to help with this?<!--content-->