www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] background color width

  1. #1
    Join Date
    Jul 2012
    Location
    Scotland
    Posts
    6

    resolved [RESOLVED] background color width

    Hi there. I'm Akairyuu and I've just came back to coding after years of focusing on my Biology degree, which is all coming back to me even though I had four years off and am understandably a bit rusty

    Anyway, after a bit of revision I managed to do this LCD clock coded in javascript, which I've almost completed but I've ran into this problem where I can't limit the width of the background color on the CSS page.

    What I'm trying to do is to center the text with the LCD numbers and to have the background color to only span as far as numbers and not across the entire page.

    Here's the HTML and CSS codes for my clock for you to take a look at.

    I'd appreciate any help or advice and thanks in advance

    P.S I tried putting display:inline-block in the p.display but then the text-align:center had no effect on the text...

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="c:/Users/pc/Desktop/clock.css"/>
    <script type="text/javascript">
    
    //function linked to body html tag
    function startTime()
    {
    
    var d=new Date();
    
    //Time variables
    var h=d.getHours();
    var m=d.getMinutes();
    var s=d.getSeconds();
    
    h=checkTime(h);
    m=checkTime(m);
    s=checkTime(s);
    
    //Today's day and date variables
    var weekday=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday");
    var month=new Array("January","February","March","April","May","June","July","August","September","October","November","December");
    var date=d.getDate();
    var year=d.getFullYear();
    
    //greetings depending on time of day variable
    var greeting="";
    var ampm="";
    
    if (h<12)
    {
    greeting="Good morning";
    ampm="AM";
    }
    else if (h<18)
    {
    greeting="Good afternoon";
    ampm="PM";
    }
    else
    {
    greeting="Good evening";
    ampm="PM";
    }
    
    if (weekday>5)
    {
    text="yay! The weekend is here :D!";
    }
    else
    {
    text="looking forward to the weekend :)";
    }
    
    
    //Changes paragraph with ID "txt" into displaying a greeting, day and date
    
    var x=document.getElementById("txt");
    x.innerHTML=greeting+". It's "+weekday[d.getDay()]+" today, "+text+"? Today's date is "+date+" "+month[d.getMonth()]+" "+year+".";
    t=setTimeout('startTime()',500);
    var y=document.getElementById("numbers");
    //Changes paragraph with ID "numbers" into displaying the time
    y.innerHTML=h+":"+m+":"+s+" "+ampm;
    }
    
    //adds a zero in front of a number below 10
    function checkTime(i)
    {
    if (i<10)
    {
    i="0"+i;
    }
    return i;
    }
    </script>
    </head>
    <body onload = "startTime()">
    <p class="text" id ="txt"></p>
    <p class="display" id ="numbers"></p>
    </body>
    </html>
    Code:
    @font-face{
    font-family: "Liquid Crystal";
    src:url("c:/Windows/Fonts/Liquid Crystal.ost")
    }
    
    p.text{
    font-family: "Arial";
    font-size:25px;
    }
    
    p.display{
    font-family:"Liquid Crystal";
    font-size:40px;
    background-color:black;
    color:green;
    text-align:center;
    }

  2. #2
    Join Date
    Mar 2011
    Posts
    1,133
    You don't want to center the text in this situation. You want to center the containing block. The easiest way is to calculate the width required to display your numbers, and set the width of the containing block to that size and then set the left and right margins to 'auto'. Something like:
    Code:
    p.display{
    width: 100px;
    margin-left:auto;  margin-right:auto;
    font-family:"Liquid Crystal";
    font-size:40px;
    background-color:black;
    color:green;
    }
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Jun 2012
    Location
    FL, USA
    Posts
    48
    agreed with above.

    <p> tag by default stretches across the entire window, so to stop the 'background-color' you have to stop the '<p>'

    i.e. give it a set width


    p.display { width: 200px; ......}

    { margin: 0 auto; } will set the element in the center of the screen, where top and bottom margins are 0 and right-left are 'auto'
    Last edited by captainscall; 07-20-2012 at 11:28 AM.

  4. #4
    Join Date
    Jul 2012
    Location
    Scotland
    Posts
    6
    Thanks, you two, that's exactly what I wanted ! I also added a border-radius and this is how it looks now http://milukris.zxq.net. I know it's only a big white page, a clock and some text but I'm sure it'll look the part when I learn more about scripting/coding and build the rest of my website around it .

    Thanks again

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles