SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Embedded Javescript won't respond to CSS alignment

    Hello all!

    Bit of an issue here. I redesigned my splash page to feature a clock of the current time. I want to center this clock with a horizontal rule below.

    The problem is that nothing I do centers the thing! It will respond to margin and positioning declarations. But other declarations, such as text-align: center or margin-left: auto (etc.) don't work. HTML center tags aren't affecting the text either.

    Here's the code in the HTML file:

    Code:
    <div id="header">
    <h5 class="enlarge"><script type="text/javascript">
    <!--
    
    var d = new Date();
    var curr_hour = d.getHours();
    var curr_min = d.getMinutes();
    
    var curr_sec = d.getSeconds();
    var curr_msec = d.getMilliseconds();
    
    document.write(curr_hour + ":" + curr_min + ":" 
    + curr_sec + ":" + curr_msec);
    
    //-->
    </script></h5>
    And the relevant CSS:

    Code:
    #header {
    	top: -20px;
    	font-size: 30pt;
    	font-weight: bold;
    }
    
    h1, h2, h3, h4, h5, h6 {
    	position: absolute;
    	margin: 80px 0 0 0;
    	font-size: 135%;
    	color: white;
    }
    
    h5.enlarge {
         font-size: 200%;
    }
    Ideas?

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi kp606, Welcome to SitePoint

    What I see missing from the code you posted is a containing block for your Absolute Positioned h5. Since it is nested in your header then that would be the logical place to establish the containing block. That is done by simply setting position:relative; on the header.

    The problem is that nothing I do centers the thing!
    I'm sure there is a better way to go about it besides the AP'd h5. When centering elements with auto margins they must have a width but auto margins do not work with absolute positioning.

    Let's just do away with that absolute positioning on the h5 so we can use text-align:center; on the header div to center the h5. You really don't need to use an h5 either but that is beside the point.

    Try this instead
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
    <style type="text/css">
    #wrapper {
        width:800px;
        margin:40px auto;
        padding:10px;
        background:lime;
    }
    #header {
        width:800px;
        margin:0 0 20px;
        font-size:40px;
        font-weight: bold;
        background:red;
        text-align:center;
    }
    h5.enlarge{
        margin:0;
        font-size:200%;
        color: white;
    }
    p{margin:0 0 20px;}
    </style>
    </head>
    <body>
    <div id="wrapper">
        <div id="header">
            <h5 class="enlarge"><script type="text/javascript">
            <!--
            
            var d = new Date();
            var curr_hour = d.getHours();
            var curr_min = d.getMinutes();
            
            var curr_sec = d.getSeconds();
            var curr_msec = d.getMilliseconds();
            
            document.write(curr_hour + ":" + curr_min + ":" 
            + curr_sec + ":" + curr_msec);
            
            //-->
            </script></h5>
        </div>
        <p>Filler text below the header</p>
        <p>Filler text below the header</p>
        <p>Filler text below the header</p>
        <p>Filler text below the header</p>
        <p>Filler text below the header</p>
        <p>Filler text below the header</p>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2010
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you Rayzur!


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
  •