A little help with my website

eddie00001 · 29-07-2004, 12:31

Hello all,

Just looking for a little help with my website

I know some of the links are not working, but I'll get around to that later. What I need to know is how I can get everything centred within the browser, and also keep everything in proportion on different displays. Currently the page looks fins on my display (monitor currently at 1280x1024).

The site has been put together in Dreamweaver with use of parts of a template.

Bifta · 29-07-2004, 13:10

Centering layers is a b*stard.

This works however:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script>
function Is() {
    agent  = navigator.userAgent.toLowerCase();
    this.major = parseInt(navigator.appVersion);
    this.minor = parseFloat(navigator.appVersion);
    this.ns    = ((agent.indexOf('mozilla')   !=   -1) && ((agent.indexOf('spoofer')   ==   -1) && (agent.indexOf('compatible') ==   -1)));
    this.ns4   = (this.ns && (this.major      ==    4));
    this.ns6   = (this.ns && (this.major      >=    5));
    this.ie    = (agent.indexOf("msie")       !=   -1);
    this.ie3   = (this.ie && (this.major      < 4));
    this.ie4   = (this.ie && (this.major      ==    4) && (agent.indexOf("msie 5.0")   ==   -1));
    this.ie5   = (this.ie && (this.major      ==    4) && (agent.indexOf("msie 5.0")   !=   -1));
    this.ie55  = (this.ie && (this.major      ==    4) && (agent.indexOf("msie 5.5")   !=   -1));
    this.ie6  = (this.ie && (agent.indexOf("msie 6.0")!=-1) );
}

var is = new Is();

function layerObject(id,position,left,top,visibility) {
if (is.ie5|| is.ie55||is.ie6|| is.ns6){
this.obj = document.getElementById(id).style;
this.obj.position = position;
this.obj.left = left;
this.obj.top = top;
this.obj.visibility = visibility;
return this.obj;
}
}
function layerSetup() {
centerLyr = new layerObject('centerLayer','absolute', page_width/2-100,page_height/2-12,'visible');
}
</script>
<style type="text/css">
<!--
.main { 
font-family: Georgia, "Times New Roman", Times, serif; 
font-size: 16px; 
color: #FBEED5; 
text-decoration: none
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #FFFFFF;
}
-->
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body onLoad="
if(is.ns6) {
page_width=innerWidth;
page_height=innerHeight;
layerSetup();
} else if(is.ie5 || is.ie55 ||is.ie6) {
page_width=document.body.clientWidth;
page_height=document.body.clientHeight;
layerSetup();
}"
onResize=" history.go(0); ">
<div id="centerLayer" style="position: absolute; width:200px; height:24px; left: 0px; top: 0px; z-index: 6; visibility: hidden;"> 
  <div align="center">centered layer
  </div>
</div>
</body>
</html>

Note, it won't show up centered in Dreamweaver but will in a browser.

Richard M · 29-07-2004, 14:24

If you want to center a <div> all you need to do is this CSS:

#centerlayer {
width: 75%; /* Example width */
margin-left: auto;
margin-right: auto;
}

I usually find that this is useful for browsers with good CSS support, I used it on the nthellworld.co.uk homepage:

body {
max-width: 1024px; /* IE doesn't support advanced CSS so this will not work in that browser */
margin-left: auto;
margin-right: auto;
}

eddie00001 · 29-07-2004, 15:40

Thanks for the advice, something for me to work on later