Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centering javascript with CSS?

    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:

    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...

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    #clock {/*testing.html (line 16)*/
    margin:0 auto;
    position:relative;
    width:7em;
    z-index:10;
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Tha's it!

    Thank you.

    What exactly is "z-index" anyway?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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