SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2002
    Location
    South Wales
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Centring a div in NS

    I want to have a div in the centre of the screen without using tables, so I have decided to use JavaScript, however it works in IE and NS 4.7 but not NS 6. I have written 2 functions, one to get the div (getElement), and one to move it (centreDiv). Here they are:
    Code:
    function getElement(myID)
    {
    	if(document.layers){
    		return document.layers[myID];}
    	else if(document.all){
    		return document.all[myID].style;}
    	else{
    		return document.getElementById(myID).style;}
    }
    
    function centreDiv(myDiv, divHeight, divWidth)
    {
    	if (window.innerWidth)
    	{
    		var windowWidth = window.innerWidth
    		var windowHeight = window.innerHeight
    	}
    	else if (document.all)
    	{
    		var windowWidth = document.body.clientWidth
    		var windowHeight = document.body.clientHeight
    	}
    	else
    	{
    		var windowWidth = 0
    		var windowHeight = 0
    	}
    
    	if (windowWidth > 0 && windowHeight > 0)
    	{
    		getElement(myDiv).top = parseInt((windowHeight / 2) - (divHeight / 2));
    		getElement(myDiv).left = parseInt((windowWidth / 2) - (divWidth / 2));
    	}
    }
    And then in HTML I open the div then call the centreDiv function, thus:
    Code:
    <div class="backimage" id="mainPannel">
    	<script language="JavaScript" type="text/javascript">
    	<!--
    	centreDiv("mainPannel", 400, 749);
    	//-->
    	</script>
    </div>
    The div is set to a width and height of 400 and 749 respectively in CSS. The div looks fine in both IE and NS however it is in the top left of the screen in NS 6 and centred in IE and NS 4.7.

    Has anyone got any ideas?

    Thanks in advance.

  2. #2
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why use javascript when you can use CSS?

    Here's a post on another forum that addresses this exact issue...

    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  3. #3
    SitePoint Member
    Join Date
    Feb 2002
    Location
    South Wales
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help.

    I would love to use CSS but I can't find a way of doing it. I have a div which is a set width and height, and it needs to stay that way. How do you centre that in the middle of the screen (both horizontal and vertical) on all screen resolutions? Oh and it is an XHTML page so I don't want to use tables.


  4. #4
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, the problem with you code is first you aren't accessing the style object first, before modifying the top and left properties. Also, with XHTML, document.body.clientHeight will return 0, so you will never make that calculation anyway. ALL that aside...here's a tester page I did...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>Centering Test</title>
    <style>
    div#content {
    	width: 500px;
    	height: 400px;
    	border: 1px dashed #999;
    	background-color: #EEE;
    	color: #000;
    	padding: 10px;
    	position: absolute;
    	top: 50%;
    	left: 50%;
    	margin-top: -211px;
    	margin-left: -261px;
    	}
    html,body {
    	height: 100%;
    	margin:0px;
    	padding: 0px;
    	}
    </style>
    
    </head>
    
    <body >
    <div id="content">Yeeehaw! We've got a centered one!</div>
    </body>
    </html>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev





Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •