...

View Full Version : Centering javascript with CSS?



Well Fed
11-12-2009, 04:17 AM
Hi there. I have a countdown clock on my website that I am having trouble centering:

http://www.wellfedproductions.com/shanghai/testing.html

As you can see it's all the way over on the left, and I would like it in the middle. I've tried a number of ways including style="text-align: center;" to no avail.

Here's the rest of my code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Shanghai | The Ultraviolent</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="KeyWords" content="Chantel, Bann, Chantel Bann, Luis, Rojas, Luis Rojas, Shanghai, Sydney, Australia, music">
<meta name="Description" content="Shanghai | The Ultraviolent">

<style type="text/css">

html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

#clock {
position: absolute;

margin: 20px 0 0 0px;
}


#content {
position: absolute;
z-index:1;
bottom: 10px;
left: 50%;
margin: 0 0 0 -270px;
}



</style>



</head>

<body link="#800000" alink="#800000" vlink="#800000">



<div id="page-background"><img src="theultraviolent.jpg" width="100%" height="100%" alt="The Ultraviolent">


</div>

<div id="clock" style="text-align: center;padding:10px;background:black;color:#c0c0c0;font-family:verdana;font-size:25px;font-weight:normal;">[clock]</div>


<div id="content">
<div style="text-align: center;">




<br />



<a href="http://www.myspace.com/Shanghaimyspace" target="_blank"><img src="http://www.wellfedproductions.com/myspaceimages/shanghai/myspace.png" alt="MySpace" border="0"></a>

<a href="http://www.facebook.com/Shanghaimusic" target="_blank"><img src="http://www.wellfedproductions.com/myspaceimages/shanghai/facebook.png" alt="Facebook" border="0"></a>

<a href="http://www.twitter.com/Shanghaimusic" target="_blank"><img src="http://www.wellfedproductions.com/myspaceimages/shanghai/twitter.png" alt="Twitter" border="0"></a>

<a href="http://www.wellfedproductions.com" target="_blank"><img src="http://www.wellfedproductions.com/myspaceimages/shanghai/wellfed.png" alt="Well Fed" border="0"></a>

<font color="#800000" size="1" face="Arial"><strong><a href="mailto:shanghai@wellfedproductions.com.com"><img src="http://www.wellfedproductions.com/myspaceimages/shanghai/email.png" alt="Email" border="0"></a></strong></font>

<a href="http://www.last.fm/music/Shanghai" target="_blank"><img src="http://www.wellfedproductions.com/myspaceimages/shanghai/lastfm.png" alt="Last.FM" border="0"></a>

<a href="http://www.youtube.com/user/WellFedProductions" target="_blank"><img src="http://www.wellfedproductions.com/myspaceimages/shanghai/youtube.png" alt="YouTube" border="0"></a>

<a href="http://www.flickr.com/photos/shanghaimusic" target="_blank"><img src="http://www.wellfedproductions.com/myspaceimages/shanghai/flickr.png" alt="Flickr" border="0"></a>

<br />

<font color="#800000" size="1" face="Arial"><strong>&copy; 2009 well fed productions</strong></font>

<embed src="brood.mp3" hidden="true" autoplay="true" autostart="True" loop="true" type="audio/mpeg" height="0" width="0">

</div>
</div>

</body>
<script language="JavaScript">

StartCountDown("clock","04/01/2010 00:00 AM")

function StartCountDown(myDiv,myTargetDate)
{
var dthen = new Date(myTargetDate);
var dnow = new Date();
ddiff = new Date(dthen-dnow);
gsecs = Math.floor(ddiff.valueOf()/1000);
CountBack(myDiv,gsecs);
}

function Calcage(secs, num1, num2)
{
s = ((Math.floor(secs/num1))%num2).toString();
if (s.length < 2)
{
s = "0" + s;
}
return (s);
}

function CountBack(myDiv, secs)
{
var DisplayStr;
var DisplayFormat = "%%D%%:%%H%%:%%M%%:%%S%%";
DisplayStr = DisplayFormat.replace(/%%D%%/g, Calcage(secs,86400,100000));
DisplayStr = DisplayStr.replace(/%%H%%/g, Calcage(secs,3600,24));
DisplayStr = DisplayStr.replace(/%%M%%/g, Calcage(secs,60,60));
DisplayStr = DisplayStr.replace(/%%S%%/g, Calcage(secs,1,60));
if(secs > 0)
{
document.getElementById(myDiv).innerHTML = DisplayStr;
setTimeout("CountBack('" + myDiv + "'," + (secs-1) + ");", 990);
}
else
{
document.getElementById(myDiv).innerHTML = "Auction Over";
}
}

</script>
</html>

It's probably something really easy that I am missing...and I would appreciate any help.

Thank you...

abduraooft
11-12-2009, 07:47 AM
Try
#clock {/*testing.html (line 16)*/
margin:0 auto;
position:relative;
width:7em;
z-index:10;
}

Well Fed
11-12-2009, 01:26 PM
Tha's it!

Thank you.

What exactly is "z-index" anyway?

abduraooft
11-12-2009, 02:33 PM
See http://htmldog.com/reference/cssproperties/z-index/



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum