Tutorial 5 Review Assignment

Enjoy an ad free experience by logging in. Not a member yet? Register.

Thread: Help with KPAF nightly schedule page


 
  1. 03-31-2015, 05:36 AM#1

    New Coder

    Help with KPAF nightly schedule page

    I need help creating a webpage for the KPAF nightly schedule page. The page needs to make a few changes to the layout and apply the new design to a page that displays the KPAF mourning schedule. The webpage a content and style have afready been created, but needs a web table for the mouring schedule. However, mine doesn't quite display correctly. Here is my code:

    Code:

    <!DOCTYPE html> <html> <head> <!-- New Perspectives on HTML and CSS Tutorial 5 Review Assignment KPAF Morning Schedule Author: Date: Filename: morning.htm Supporting files: kpaf2.css, kpaf.jpg, modernizr-1.5.js, programs.css --> <meta charset="UTF-8" /> <title>KPAF Radio Morning Schedule</title> <script src="modernizr-1.5.js"></script> <link href="kpaf2.css" rel="stylesheet" type="text/css" /> <link href="programs.css" rel="stylesheet" type="text/css" /> </head> <body> <header> <h1>| Listener supported <em>since</em> 1966</h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Schedule</a></li> <li><a href="#">Programs</a></li> <li><a href="#">Music</a></li> <li><a href="#">News</a></li> <li><a href="#">Events</a></li> <li><a href="#">Listen Live</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Support KPAF</a></li> </ul> </nav> </header> <section id="intro"> <hgroup> <h1><img src="kpaf.jpg" alt="KPAF" /></h1> <h2>KPAF Morning Schedule</h2> </hgroup> <p>KPAF airs listener-supported public radio in Bismarck, North Dakota from 5:00 a.m. to 10:30 p.m. <br />You can <a href="#">Listen Live</a> to streaming audio of our broadcast or download programs from our <a href="#">Podcast</a>. <br />Please refer below for our current morning schedule. </p> <table class="schedule" border="1" cellspacing="3" cellpadding="5" summary="This table contains the nightly KPAF program schedule aired from Bismarck, North Dakota. Program times are laid out in thirty-minute increments from 6:00 p.m. to 10:00 p.m., Monday through Sunday night."> <caption>All Times Central</caption> <colgroup> <col class="firstCol" /> <col class="dayCols" span="7" /> </colgroup> <thead> <tr> <th>Time</th> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> <th>Thursday</th> <th>Friday</th> <th>Saturday</th> <th>Sunday</th> </tr> </thead> <tbody valign="top"> <tr> <th>5:00</th> <td rowspan="1" colspan="1"></td> <td rowspan="4" colspan="5">Dawn Air</td> <td rowspan="4" colspan="1">Dawn Air Weekends</td> <td rowspan="2" colspan="1">Sunday Magazine</td> </tr> <tr> <th>5:30</th> <th>6:00</th> <td rowspan="2" colspan="1"></td> <td rowspan="2" colspan="1">Weekend Reflections</td> </tr> <tr> <th>6:30</th> <td rowspan="1" colspan="1"></td> </tr> <tr> <th>7:00</th> <td rowspan="1" colspan="5">Locals News</td> <td rowspan="2" colspan="1">Week Wrap</td> <td rowspan="2" colspan="1">Radio U</td> <th>7:30</th> <td rowspan="2" colspan="1"></td> <td rowspan="1" colspan="5">World News Feed</td> </tr> <tr> <th>8:00</th> <td rowspan="1" colspan="1"></td> <td rowspan="4" colspan="5">Classical Roots</td> <td rowspan="3" colspan="1">What Can You Say</td> <td rowspan="4" colspan="1">University on the Air</td> </tr> <tr> <th>8:30</th> <th>9:00</th> <td rowspan="2" colspan="1"></td> </tr> <tr> <th>9:30</th> <td rowspan="1" colspan="1"></td> <td rowspan="3" colspan="1">Amimal Talk</td> </tr> <tr> <th>10:00</th> <td rowspan="1" colspan="1"></td> <td rowspan="4" colspan="5">Symphony City</td> <td rowspan="1" colspan="1">Word Pay</td> </tr> <tr> <th>10:30</th> <td rowspan="1" colspan="1"></td> <td rowspan="1" colspan="1">Brain Show</td> </tr> <tr> <th>11:00</th> <td rowspan="1" colspan="1"></td> <td rowspan="3" colspan="1">Opera Live from the East Coast</td> <td rowspan="1" colspan="1">The Inner Wind</td> </tr> <tr> <th>11:30</th> <td rowspan="1" colspan="1"></td> <td rowspan="1" colspan="1">The Grammer Rules</td> </tr> <tr> <th>12:00</th> <td rowspan="1" colspan="1"></td> <td rowspan="1" colspan="5">Book Club</td> <td rowspan="1" colspan="1">Weekend Wrap</td> </tr> </tbody> </table> </section> <footer> <address> KPAF &#183; 4300 Magnolia Lane &#183; Bismarck, ND 58504 &#183; (701) 555 - 5611 </address> </footer> </body> </html> </html>
    and the kpaf2.css which needs no editing:

    Code:

    /* New Perspectives on HTML and CSS Tutorial 5 Review Assignment KPAF General Style Sheet Filename: kpaf2.css Supporting Files: none */ /* Default styles */ * { margin: 0px; list-style: none; } header, section, footer, nav { display: block; } /* Body styles */ body { background-color: white; font-family: Verdana, Geneva, sans-serif; margin: 0px auto; width: 1000px; } /* Header styles */ header { background-color: rgb(215, 205, 151); border-bottom: 1px solid rgb(105, 177, 60); color: white; } header h1 { color: white; background-color: rgb(105, 177, 60); font-size: 1.1em; padding: 5px 0px 5px 12px; } header h1 em { font-size: 0.7em; } /* Navigation list styles */ header nav ul li { display: inline; font-size: 0.7em; font-family: 'Courier New', monospace; background-color: rgb(215, 205, 151); padding: 0px 10px; margin: 0px; } header nav ul li a { text-decoration: none; color: rgb(105, 177, 60); } header nav ul li a:hover { color: rgb(153, 0, 153); } /* intro section styles */ #intro { width: 100%; } #intro hgroup h2 { color: white; background-color: rgb(153, 0, 153); font-size: 1.1em; letter-spacing: 5px; padding: 5px 0px 5px 12px; } #intro p { line-height: 1.4em; margin: 15px; } /* Footer styles */ footer { clear: left; padding-top: 10px; } footer address { font-size: 0.65em; font-style: normal; text-align: center; color: white; background-color: rgb(105, 177, 60); margin: 20px 0px; }
    and programs.css, which als

    Code:

    /* New Perspectives on HTML and CSS Tutorial 5 Review Assignment Programming Table Style Sheet Author: Date: Filename: programs.css Supporting Files: */ /* Styles for the schedule table */ table.schedule { width: 100%; border: 2px outset rgb(153, 0, 153); border-collapse: collapse; font-family: Arial, Verdana, sans-serif; width: 100%; } div { column-count: 3; -webkit-column-count: 3; -moz-column-count: 3; } /* Styles for the table caption */ table.schedule caption { font-size: 0.8em; } /* Styles for the remaining columns */ table.schedule col.timeCols { width: 10%; background-color: rgb(215, 205, 151); } table.schedule col.dayCols { width: 11%; background-color: rgb(236, 255, 211); } th, td { font-size: 0.7em; vertical-align: top; border: 1px solid: gray; padding: 2px; } table.schedule col.dayRows { font-size: 0.7em; border: 1px solid: gray; background-color: rgb(153, 86, 7); } p:nth-child(7) { background-color: rgb(153, 0, 153); } p:nth-child(8) { background-color: rgb(153, 0, 153); } th, td { height: 25px; background-color; rgb(105, 177, 60); } table.schedule col.wendCols { width: 17%; background-color: rgb(255, 231, 255); }
    Can anyone help me correct my html webpage and can they teach me the proper systax?

    The required pictures are attached below:


«Previous Thread | Next Thread»

Нет. Они сказали - агентство. АНБ.

One thought on “Tutorial 5 Review Assignment

Leave a Reply

Your email address will not be published. Required fields are marked *