[RESOLVED] background color width

**Akairyuu** · 07-19-2012 10:25 AM

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;
}

**rtrethewey** · 07-20-2012 10:42 AM

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;
}

**captainscall** · 07-20-2012 11:26 AM

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'

**Akairyuu** · 07-20-2012 05:48 PM

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: [RESOLVED] background color width

Thread Tools

Display

[RESOLVED] background color width

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions