Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3

Thread: Newb help

  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Newb help

    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-colorarkKhaki}
    [code]

  • #2
    New to the CF scene
    Join Date
    Jun 2011
    Location
    Lincoln
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HTML and JavaScript

    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; colorurple; font-size:22}
    .myStyle4 {font-family:arial; colorrange; 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; colorink; font-size:26}
    .myStyle10 {font-family:verdana; color:green; font-size:30}
    .myStyle11 {font-family:times; colorrange; 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; colorrange; font-size:30}
    .myStyle16 {font-family:courier; color:green; font-size:12}
    .myStyle17 {font-family:courier; colorurple; 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


  •  

    Posting Permissions

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