views:

290

answers:

3

Hi - I'm going to apologize in advance for how basic this question is, but this is my first time using javascript in html..

Basically, I have a javascript that produces a different bit of random text every time a user loads the page. I'd like to format that text in helvetica and then display it centered in the middle of the page. I'm attempting to do this with css as indicated below, but it is not working for me. Any suggestions much appreciated.

HTML

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>home</title>

<link href="style.css" rel="stylesheet" type="text/css" />

</head>


<body>

<div id="horizon">
<div id="content">

<script type="text/javascript" src="scripts.js"></script>

</div>
</div>

</body>

CSS

#horizon 
{
color: white;
background-color: #ffffff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}

 #content 
{
font-family: Helvetica, Geneva, Arial, sans-serif;
font-color: black;
background-color: white;
margin-left: -410px;
position: absolute;
top: -237px;
left: 50%;
width: 825px;
height: 475px;
visibility: visible
}
A: 

How about using text-align: center?:

#content 
{
font-family: Helvetica, Geneva, Arial, sans-serif;
font-color: black;
background-color: white;
text-align: center;
}
David Kolar
still doesn't do anything for it.. its almost like the second css box isn't applying (at least in Safari in which I am viewing it). Even the black text is displaying in white..
jwb
That's suspicious. For sure you should be able to set the font color. Have you checked for typos, particularly in the ID name and css selector? You might try to get the css to work inline first, just to make it easier to track down the problem.
David Kolar
+1  A: 

Well for starters, your missing your HTML tags. You need to wrap your HTML code between HTML Tags.

Second, you will need to set your text to a different color as the background color. In your CSS, you will need to change the #horizon color to black, or something else.

Other than that, your code works.

Jon
Yeah, I have those in the code.. I just neglected to copy paste them above..
jwb
+1  A: 

try

#content 
{
    margin: auto;
    width: 200px; /* however wide it should be (required) */
}

...
<div id="content">
    stuff goes here from js / whatever
</div>

for vertical alignment you are looking at JS and not CSS.

blu
this was helpful thanks
jwb