Page 1 of 1

CSS and Javascript XHTML

Posted: Wed Dec 13, 2006 8:13 pm
by a.heresey
feyd | Please use

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]


I've got a some content, right, and I want it to be a certain size, centered horizontally the middle of the page. 
So, I put it in a <div> and put the code below in an external .js file to center the <div>. 

I tested it in Safari 1.9 and Mozilla 2.01 and it worked ... in quirks mode.


Any ideas on how this can work in Strict XHTML 1.0?

[syntax="html"]
<!DOCTYPE html PUBLIC "//W3C//XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>Center</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script type="text/javascript" src="centerscript.js">
</script>
</head>
<body>
<div id="centerme">
Some stuff in a box
</div>
</body>
</html>

Code: Select all

window.onload=initResume;
window.onresize=centerBlockH;

function initResume(){
	if (document.getElementById){
		centerBlockH();
	}
	else {
		//object detection
		document.location.href="pagenowork.html";
	}
}

function centerBlockH(){
	//centers block horizontally in document
	var leftSpace;
	var winWidth;
	
	//set winWidth
	w3c=(window.innerWidth)?true:false;
	if(w3c){
		//Mozilla
		winWidth=window.innerWidth;
	}else if (document.documentElement.clientWidth){
		//IE 6
		winWidth=document.documentElement.clientWidth;
	}else if(document.body.clientWidth){
		//IE 4
		winWidth=document.body.clientWidth;
	}

	//get the proper space on left
	leftSpace= (winWidth-650)/2;
	//put space on left
	document.getElementById('centerme').style.left=leftSpace;
}
Thanx.


feyd | Please use[/syntax]

Code: Select all

,

Code: Select all

and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read:  [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]

Posted: Wed Dec 13, 2006 8:38 pm
by Zoxive
You can center horizontally with just CSS.

Code: Select all

#centerme{
   width:760px;
   margin-left:auto;
   margin-right:auto;
}

Posted: Wed Dec 13, 2006 8:55 pm
by a.heresey
Thanx Zoxive, it's working now in firefox and safari, but not in IE.

Any ideas?

Posted: Thu Dec 14, 2006 1:02 am
by matthijs
The method Zoxive describes should also work in IE. For IE5 (or also ie6 in quirks mode, not sure at the moment) there's another thing you should do:

Code: Select all

body {
  text-align:center;
}
#centerme{
   width:760px;
   margin: 0 auto;
  text-align:left;
}