Newb help

RobbyS · 06-27-2012, 07:53 AM

Hi all. New to HTML and CSS programming. I've been working on this project for a class and I am stuck on one point. I need the background colors to stretch the whole cell and not just around the text. Here is the code. I think it has to do with the "messagetext" calling on the styles but I don't know how to rewrite it. Any help would be greatly appreciated.

[code]
<html>

<head>
<title>HTML and JavaScript</title>
<link href="one.css" rel="stylesheet" type="text/css"></link>
<script>
var index = 0;

function stylize()
{
index++;
if (index > 7) index = 1;
var s = "myStyle" + index;
var e = document.getElementById("MessageText");
e.className = s;
setTimeout ("stylize()", 1500);
return;
}
</script>
</head>

<body onLoad="stylize()">
<table align="center" border="1" bordercolor="black">
<tr>
<td align="center">
<font size="3"><b>STYLE CLASS VIEWER</b></font>
</td>
</tr>
<tr>
<td align="center" height="100" width="400">
<div id="MessageText" class="myStyle1">
Hello World Wide Web!
<div>
</td>
</tr>
</table>
</body>

</html>
[code]

css file
[code]
.myStyle1 {font-family:"Times New Roman"; color:gold; font-size:12; background-color:red}
.myStyle2 {font-family:"Comic Sans MS"; color:black; font-size:18; background-color:green }
.myStyle3 {font-family:"Lucida Sans Unicode"; color:black; font-size:24; background-color:LightSeaGreen}
.myStyle4 {font-family:"Courier New"; color:white; font-size:26; background-color:chocolate}
.myStyle5 {font-family:"Lucida Console"; color:red; font-size:28; background-color:coral}
.myStyle6 {font-family:"Trebuchet MS"; color:green; font-size:30; background-color:black}
.myStyle7 {font-family:"Tahoma"; color:blue; font-size:16; background-color

arkKhaki}
[code]

peza · 06-27-2012, 09:04 AM

You can add the background colour class to the table cell like the following:

Code:

 <td align="center" height="100" width="400" class='myStyle1'>

That would turn the whole background of the main section red.

Check out this http://www.w3schools.com/Css/css_table.asp for more information on styling tables.

angiemh12 · 06-27-2012, 09:12 PM

I have a question. I am struggling in my JavaScript class and need some help. I have to make a style viewer with at least 20 differed style classes. And it must call one of the style classes at random each time it is called. I also have to create an array of at least 5 backgrounf colors. My stylize() function selects one of the at random also. Below is what I have so far. Please help!

<html>
<head>
<title>HTML and JavaScript</title>
<link href="capstone10.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">

function select() {
index = Math.floor(Math.random() * 20);
if (index > 20) index = 1;
var s = "myStyle" + index;
var e = document.getElementById("MessageText");
e.className = s;
setTimeout("select()", 1500);
return;
}

function setbackground() {
var bgcolour = ['blue,'white','brown','purple','red'];

setTimeout( "setbackground()", 5000); // 5000 milliseconds delay
var index = Math.floor(Math.random() * bgcolour.length);
var ColorValue = bgcolour[index];
document.getElementById('MessageText').style.backgroundColor = ColorValue;
return;
}
</script>
</head>

<body onLoad="stylize()">
<table align="center" border="1" bordercolor="black">
<tr>
<td align="center">
<font size="3"><b>STYLE CLASS VIEWER</b></font>
</td>
</tr>
<tr>
<td align="center" height="300" width="700" class="myStyle1">
<div id="MessageText" class="myStyle1">
Hello World Wide Web!
</div>
</td>
</tr>
</table>
</body>

</html>

This is my .css sheet

.myStyle1 {font-family:arial; color:black; font-size:12}
.myStyle2 {font-family:arial; color:green; font-size:18}
.myStyle3 {font-family:arial; color

urple; font-size:22}
.myStyle4 {font-family:arial; color

range; font-size:26}
.myStyle5 {font-family:arial; color:red; font-size:30}
.myStyle6 {font-family:verdana; color:yellow; font-size:12}
.myStyle7 {font-family:verdana; color:blue; font-size:18}
.myStyle8 {font-family:verdana; color:black; font-size:22}
.myStyle9 {font-family:verdana; color

ink; font-size:26}
.myStyle10 {font-family:verdana; color:green; font-size:30}
.myStyle11 {font-family:times; color

range; font-size:12}
.myStyle12 {font-family:times; color:red; font-size:18}
.myStyle13 {font-family:times; color:green; font-size:22}
.myStyle14 {font-family:times; color:blue; font-size:26}
.myStyle15 {font-family:times; color

range; font-size:30}
.myStyle16 {font-family:courier; color:green; font-size:12}
.myStyle17 {font-family:courier; color

urple; font-size:18}
.myStyle18 {font-family:courier; color:black; font-size:22}
.myStyle19 {font-family:courier; color:red; font-size:26}
.myStyle20 {font-family:courier; color:green; font-size:30}

Thanks