diff options
| -rw-r--r-- | chakra/grade1.html | 12 | ||||
| -rw-r--r-- | chakra/grade1english.html | 271 | ||||
| -rw-r--r-- | chakra/grade1mathematics.html | 180 | ||||
| -rw-r--r-- | css/chakra.css | 291 | ||||
| -rw-r--r-- | index.html | 29 |
5 files changed, 251 insertions, 532 deletions
diff --git a/chakra/grade1.html b/chakra/grade1.html index 043d004..d061a73 100644 --- a/chakra/grade1.html +++ b/chakra/grade1.html @@ -20,12 +20,10 @@ <section id="navigation"> <nav id="knavbar"> - <section id="knavbarLeft"> - <a href="../index.html"><img src="../assets/default/images/chakra_logo.png" alt="Home" title="Chakra Home" class="topNav floatLeft"></a> - <img src="../assets/default/images/grade1.png" alt="Grade 1" title="Grade 1" class="topNav floatLeft"> - <img src="../assets/default/images/help.png" alt="Help" title="Help" class="topNav floatRight"> - <img src="../assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma" class="topNav floatRight"> - </section> + <a href="../index.html"><img src="../assets/default/images/chakra_logo.png" alt="Home" title="Chakra Home" class="topNav floatLeft" /></a> + <img src="../assets/default/images/grade1.png" alt="Grade 1" title="Grade 1" class="topNav floatLeft" /> + <img src="../assets/default/images/help.png" alt="Help" title="Help" class="topNav floatRight" /> + <img src="../assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma" class="topNav floatRight" /> </nav> </section> @@ -45,7 +43,7 @@ <li><a href="#tab_grade7"><img src="../assets/default/images/history.png" alt="History" title="History"><p>History</p></a></li> <li><a href="#tab_grade8"><img src="../assets/default/images/health.png" alt="Health" title="Health"><p>Health</p></a></li> </ul> -</section> +</section><!-- end middle --> </body> </html> diff --git a/chakra/grade1english.html b/chakra/grade1english.html index f9b6f54..2f062ec 100644 --- a/chakra/grade1english.html +++ b/chakra/grade1english.html @@ -1,189 +1,107 @@ -<html lang="en"> - +<!doctype html> +<html> <head> <title>Chakra (Alpha)</title> <meta name="keywords" content="karma,javascript,html5,sugar,sugarlabs,gsoc,ole,nepal"> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8"> <link rel="stylesheet" href="../css/chakra.css" type="text/css"/> <link rel="stylesheet" href="../css/jquery.jgrowl.css" type="text/css"/> -<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script> -<script type="text/javascript" src="../js/jquery.ui.all.js"></script> -<script type="text/javascript" src="../js/jquery.jgrowl_minimized.js"></script> -<script type="text/javascript" src="../js/jquery.idTabs.min.js"></script> +<script src="../js/jquery-1.3.2.min.js"></script> +<script src="../js/jquery.ui.all.js"></script> +<script src="../js/jquery.jgrowl_minimized.js"></script> +<script src="../js/jquery.idTabs.min.js"></script> +<link type="image/ico" rel="icon" href="./../assets/default/images/favicon.ico" /> </head> <body> -<div id="mainmenu"> -<div id="navigation"> -<a href="../index.html"><img src="../assets/default/images/chakra_logo.png" alt="Home" title="Home"></a> <a href="grade1.html"><img src="../assets/default/images/grade1.png" alt="Grade 1" title="Grade 1"></a> <img src="../assets/default/images/english.png" alt="English" title="Grade 1 - English"> -<img id="nav_right" src="../assets/default/images/help.png" alt="Help" title="Help"> -<img id="nav_right" src="../assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma"> - -<select id="week_select"> - <option value="1to4" selected>1 - 4</option> - <option value="5to8">5 - 8</option> - <option value="9to12">9 - 12</option> - <option value="13to16">13 - 16</option> - <option value="17to20">17 - 20</option> - <option value="21to24">21 - 24</option> - <option value="25to28">25 - 28</option> - <option value="29to32">29 - 32</option> - <option value="33to36">33 - 36</option> - <option value="37to40">37 - 40</option> - <option value="41to44">41 - 44</option> - <option value="45to48">45 - 48</option> - <option value="49to52">49 - 52</option> -</select> - -</div> - -<div id="curriculum"> -Link to subject curriculum -</div> - -<div id="weeks"> -<div id="1to4"> -<li><a href="#week1">1</a></li> -<li><a href="#week2">2</a></li> -<li><a href="#week3">3</a></li> -<li><a href="#week4">4</a></li> -<br /><br /> -<div id="week1"> -<div id="lesson"> -<div id="preview"> -<img src="../assets/default/images/preview1.jpg"/> -</div> -<div id="lessonname"> -Quadrilaterals -</div> -</div> -<div id="lesson"> -<img src="../assets/default/images/preview2.jpg"/> -<div id="lessonname"> -Adding up to 10 -</div> -</div> -<div id="lesson"> -<img src="../assets/default/images/preview3.jpg"/> -<div id="lessonname"> -Everyday expressions -</div> -</div> -<div id="lesson"> -<img src="../assets/default/images/preview4.jpg"/> -<div id="lessonname"> -Can and can't -</div> -</div> -</div> -<div id="week2"> -<div id="lesson"> -<div id="preview"> -<img src="../assets/default/images/preview2.jpg"/> -</div> -<div id="lessonname"> -Quadrilaterals -</div> -</div> -<div id="lesson"> -<img src="../assets/default/images/preview3.jpg"/> -<div id="lessonname"> -Adding up to 10 -</div> -</div> -<div id="lesson"> -<img src="../assets/default/images/preview4.jpg"/> -<div id="lessonname"> -Everyday expressions -</div> -</div> -<div id="lesson"> -<img src="../assets/default/images/preview1.jpg"/> -<div id="lessonname"> -Can and can't -</div> -</div> -</div> -<div id="week3"> -<div id="lesson"> -<div id="preview"> -<img src="../assets/default/images/preview3.jpg"/> -</div> -<div id="lessonname"> -Quadrilaterals -</div> -</div> -<div id="lesson"> -<img src="../assets/default/images/preview4.jpg"/> -<div id="lessonname"> -Adding up to 10 -</div> -</div> -<div id="lesson"> -<img src="../assets/default/images/preview1.jpg"/> -<div id="lessonname"> -Everyday expressions -</div> -</div> -<div id="lesson"> -<img src="../assets/default/images/preview2.jpg"/> -<div id="lessonname"> -Can and can't -</div> -</div> -</div> -<div id="week4"> -<div id="lesson"> -<div id="preview"> -<img src="../assets/default/images/preview4.jpg"/> -</div> -<div id="lessonname"> -Quadrilaterals -</div> -</div> -<div id="lesson"> -<img src="../assets/default/images/preview1.jpg"/> -<div id="lessonname"> -Adding up to 10 -</div> -</div> -<div id="lesson"> -<img src="../assets/default/images/preview2.jpg"/> -<div id="lessonname"> -Everyday expressions -</div> -</div> -<div id="lesson"> -<img src="../assets/default/images/preview3.jpg"/> -<div id="lessonname"> -Can and can't -</div> -</div> -</div> -</div> -<div id="5to8">5to8</div> -<div id="9to12">9to12</div> -<div id="13to16">13to16</div> -<div id="17to20">17to20</div> -<div id="21to24">21to24</div> -<div id="25to28">25to28</div> -<div id="29to32">29to32</div> -<div id="33to36">33to36</div> -<div id="37to40">37to40</div> -<div id="41to44">41to44</div> -<div id="45to48">45to48</div> -<div id="49to52">49to52</div> -</div> - -</div> - -<script type="text/javascript"> -$('#week_select').change(function() { +<section id="navigation"> + <nav id="knavbar"> + <a href="../index.html"><img src="../assets/default/images/chakra_logo.png" alt="Home" title="Chakra Home" class="topNav floatLeft" /></a> + <a href="grade1.html"><img src="../assets/default/images/grade1.png" alt="Grade 1" title="Grade 1" class="topNav floatLeft" /></a> + <img src="../assets/default/images/english.png" alt="English" title="Grade 1 - English" class="topNav floatLeft" /> + <img id="nav_right" src="../assets/default/images/help.png" alt="Help" title="Help" class="topNav floatRight" /> + <img id="nav_right" src="../assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma" class="topNav floatRight" /> + </nav> +</section> + +<section id="middle"> + <section> + <section id="curriculum"> + <a href="#">Link</a> to subject curriculum. + </section> + + <div id="weekSelectInput"> + <label for="weekSelect">Select Week: </label> + <select id="weekSelect"> + <option value="0" selected="selected"> --- select week below --- </option> + <option value="1to4">1 - 4</option> + <option value="5to8">5 - 8</option> + <option value="9to12">9 - 12</option> + <option value="13to16">13 - 16</option> + <option value="17to20">17 - 20</option> + <option value="21to24">21 - 24</option> + <option value="25to28">25 - 28</option> + <option value="29to32">29 - 32</option> + <option value="33to36">33 - 36</option> + <option value="37to40">37 - 40</option> + <option value="41to44">41 - 44</option> + <option value="45to48">45 - 48</option> + <option value="49to52">49 - 52</option> + </select> + </div> + </section> + + <section class="middleRow"> + <ul> + <li><a href="#week1">Week 1</a></li> + <li><a href="#week2">Week 2</a></li> + <li><a href="#week3">Week 3</a></li> + <li><a href="#week4">Week 4</a></li> + </ul> + </section><!-- end weeks --> + + <section id="week1" class="week"> + <article class="lesson"> + <header class="lessonName">Quadrilaterals</header> + <img src="../assets/default/images/preview1.jpg" alt="Quadrilaterals" title="Quadrilaterals" /> + </article> + + <article class="lesson"> + <header class="lessonName">Adding up to 10</header> + <img src="../assets/default/images/preview2.jpg"/> + </article> + + <article class="lesson"> + <header class="lessonName">Everyday expressions</header> + <img src="../assets/default/images/preview3.jpg"/> + </article> + + <article class="lesson"> + <header class="lessonName">Can and can't</header> + <img src="../assets/default/images/preview4.jpg"/> + </article> + </section><!-- end week1 --> + + <div id="5to8">5to8</div> + <div id="9to12">9to12</div> + <div id="13to16">13to16</div> + <div id="17to20">17to20</div> + <div id="21to24">21to24</div> + <div id="25to28">25to28</div> + <div id="29to32">29to32</div> + <div id="33to36">33to36</div> + <div id="37to40">37to40</div> + <div id="41to44">41to44</div> + <div id="45to48">45to48</div> + <div id="49to52">49to52</div> +</section><!-- end middle --> + +<script> +$('#weekSelect').change(function() { $('#weeks div').hide(); var e = '#' + $(':selected', $(this)).attr('value'); $(e).show(); @@ -195,9 +113,7 @@ $('#week_select').change(function() { }); $('#weeks div').hide(); -</script> -<script type="text/javascript"> $(document).ready(function() { $('#weeks div').hide(); var e = '#' + $(':selected', $(this)).attr('value'); @@ -211,10 +127,7 @@ $(document).ready(function() { $('#weeks div').hide(); -</script> - -<script type="text/javascript"> - $("#1to4").idTabs(); +$("#1to4").idTabs(); </script> </body> diff --git a/chakra/grade1mathematics.html b/chakra/grade1mathematics.html index b6a1215..70d7de1 100644 --- a/chakra/grade1mathematics.html +++ b/chakra/grade1mathematics.html @@ -1,104 +1,120 @@ -<!DOCTYPE HTML> -<html lang="en"> - +<!doctype html> +<html> <head> <title>Chakra (Alpha)</title> <meta name="keywords" content="karma,javascript,html5,sugar,sugarlabs,gsoc,ole,nepal"> -<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta charset="utf-8"> <link rel="stylesheet" href="../css/chakra.css" type="text/css"/> <link rel="stylesheet" href="../css/jquery.jgrowl.css" type="text/css"/> -<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script> -<script type="text/javascript" src="../js/jquery.ui.all.js"></script> -<script type="text/javascript" src="../js/jquery.jgrowl_minimized.js"></script> -<script type="text/javascript" src="../js/jquery.idTabs.min.js"></script> +<script src="../js/jquery-1.3.2.min.js"></script> +<script src="../js/jquery.ui.all.js"></script> +<script src="../js/jquery.jgrowl_minimized.js"></script> +<script src="../js/jquery.idTabs.min.js"></script> <link type="image/ico" rel="icon" href="../../assets/default/images/favicon.ico" /> - </head> <body> -<div id="mainmenu"> -<div id="navigation"> -<a href="../index.html"><img class="chakra_logo" src="../assets/default/images/chakra_logo.png" alt="Home" title="Home"></a> -<a href="grade1.html"><img class="icon_left" src="../assets/default/images/grade1.png" alt="Grade 1" title="Grade 1"></a> -<img class="icon_left" src="../assets/default/images/mathematics.png" alt="Mathematics" title="Grade 1 - Mathematics"> - -<div id="week_select"> -<li>Months:</li> -<li><a href="#weeksA" class="selected"><img src="../assets/default/images/month_A.png" class="icon"></a></li> -<li><a href="#weeksB"><img src="../assets/default/images/month_B.png" class="icon"></a></li> -<li><a href="#weeksC"><img src="../assets/default/images/month_C.png" class="icon"></a></li> -<li><a href="#weeksD"><img src="../assets/default/images/month_D.png" class="icon"></a></li> -<li><a href="#weeksE"><img src="../assets/default/images/month_E.png" class="icon"></a></li> -<li><a href="#weeksF"><img src="../assets/default/images/month_F.png" class="icon"></a></li> -<li><a href="#weeksG"><img src="../assets/default/images/month_G.png" class="icon"></a></li> -<li><a href="#weeksH"><img src="../assets/default/images/month_H.png" class="icon"></a></li> -<li><a href="#weeksI"><img src="../assets/default/images/month_I.png" class="icon"></a></li> -<li><a href="#weeksJ"><img src="../assets/default/images/month_J.png" class="icon"></a></li> -</div> - -<img class="icon_right" src="../assets/default/images/help.png" alt="Help" title="Help"> -<img class="icon_right" src="../assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma"> - -</div> - -<div id="weeks"> -<div id="weeksA" class="weeklist"> -<li>Weeks:</li> -<li><a href="#week1"><img src="../assets/default/images/week1.png" class="icon"></a></li> -<li><a href="#week2"><img src="../assets/default/images/week2.png" class="icon"></a></li> -<li><a href="#week3"><img src="../assets/default/images/week3.png" class="icon"></a></li> -<li><a href="#week4"><img src="../assets/default/images/week4.png" class="icon"></a></li> -<br /><br /> -<div id="week1" class="lessonlist"> -<li><a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Adding up to 10" title="Adding up to 10"><div id="lessonname">Adding up to 10</div></a></li> -</div> -<div id="week2" class="lessonlist"> -</div> -<div id="week3" class="lessonlist"> -</div> -<div id="week4" class="lessonlist"> -</div> -</div> -<div id="weeksB" class="weeklist"> -<li>Weeks:</li> -<li><a href="#week5"><img src="../assets/default/images/week1.png" class="icon"></a></li> -<li><a href="#week6"><img src="../assets/default/images/week2.png" class="icon"></a></li> -<li><a href="#week7"><img src="../assets/default/images/week3.png" class="icon"></a></li> -<li><a href="#week8"><img src="../assets/default/images/week4.png" class="icon"></a></li> -<br /><br /> -<div id="week5" class="lessonlist"> -</div> -<div id="week6" class="lessonlist"> -</div> -<div id="week7" class="lessonlist"> -</div> -<div id="week8" class="lessonlist"> -</div> -</div> -</div> -</div> -</div> - -</div> - -<script type="text/javascript"> +<section id="navigation"> + <nav id="knavbar"> + <a href="../index.html"><img src="../assets/default/images/chakra_logo.png" alt="Home" title="Home" class="topNav floatLeft" /></a> + <a href="grade1.html"><img src="../assets/default/images/grade1.png" alt="Grade 1" title="Grade 1" class="topNav floatLeft"/></a> + <img src="../assets/default/images/mathematics.png" alt="Mathematics" title="Grade 1 - Mathematics" class="topNav floatLeft" /> + <img src="../assets/default/images/help.png" alt="Help" title="Help" class="topNav floatRight" /> + <img src="../assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma" class="topNav floatRight" /> + </nav> +</section> + +<section id="middle"> + <section id="curriculum"> + <a href="#">Link</a> to subject curriculum.</a> + </section> + <section id="monthSelect"> + <header>Months</header> + <ul class="menuSelectType"> + <li><a href="#weeksA"><img src="../assets/default/images/month_A.png"/></a></li> + <li><a href="#weeksB"><img src="../assets/default/images/month_B.png"/></a></li> + <li><a href="#weeksC"><img src="../assets/default/images/month_C.png"/></a></li> + <li><a href="#weeksD"><img src="../assets/default/images/month_D.png"/></a></li> + <li><a href="#weeksE"><img src="../assets/default/images/month_E.png"/></a></li> + <li><a href="#weeksF"><img src="../assets/default/images/month_F.png"/></a></li> + <li><a href="#weeksG"><img src="../assets/default/images/month_G.png"/></a></li> + <li><a href="#weeksH"><img src="../assets/default/images/month_H.png"/></a></li> + <li><a href="#weeksI"><img src="../assets/default/images/month_I.png"/></a></li> + <li><a href="#weeksJ"><img src="../assets/default/images/month_J.png"/></a></li> + </ul> + </section><!-- end monthSelect --> + + <section id="weeks"> + <section id="weeksA" class="weekList"> + <header>Month A - Weeks</header> + <ul class="menuSelectType"> + <li><a href="#week1"><img src="../assets/default/images/week1.png"/></a></li> + <li><a href="#week2"><img src="../assets/default/images/week2.png"/></a></li> + <li><a href="#week3"><img src="../assets/default/images/week3.png"/></a></li> + <li><a href="#week4"><img src="../assets/default/images/week4.png"/></a></li> + </ul> + + <article id="week1" class="lesson"> + <header class="lessonName">Adding up to 10</header> + <a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Adding up to 10" title="Adding up to 10" /></a> + </article> + + <article id="week2" class="lesson"> + <header class="lessonName">Adding up to 100</header> + <a href="../examples/adding_up_to_10/index.html"><img class="preview" src="../assets/default/images/preview2.jpg" alt="Adding up to 10" title="Adding up to 10" /></a> + </article> + + <article id="week3" class="lesson"> + <header class="lessonName">Another lesson here</header> + <a href="#">Here is the link</a> + </article> + + <article id="week4" class="lesson"> + <header class="lessonName">And another lesson here</header> + <a href="#">Here is the other link</a> + </article> + </section><!-- end weeksA --> + <section id="weeksB" class="weekList"> + <header>Month B - Weeks</header> + <ul class="menuSelectType"> + <li><a href="#week5"><img src="../assets/default/images/week1.png"/></a></li> + <li><a href="#week6"><img src="../assets/default/images/week2.png"/></a></li> + <li><a href="#week7"><img src="../assets/default/images/week3.png"/></a></li> + <li><a href="#week8"><img src="../assets/default/images/week4.png"/></a></li> + </ul> + + <article id="week5" class="lesson"> + <header class="lessonName">Week 5 Lesson</header> + </article> + + <article id="week6" class="lesson"> + <header class="lessonName">Week 6 Lesson</header> + </article> + + <article id="week7" class="lesson"> + <header class="lessonName">Week 7 Lesson</header> + </article> + + <article id="week8" class="lesson"> + <header class="lessonName">Week 8 Lesson</header> + </article> + </section><!-- end weeksB --> + </section> +</section> + +<script> $(document).ready(function() { //$('#weeksA').show(); //$('#week1').show(); }); -</script> - -<script type="text/javascript"> - $("#week_select").idTabs(); -</script> -<script type="text/javascript"> - $("#weeks div").idTabs(); +$("#week_select").idTabs(); + +$("#weeks div").idTabs(); </script> </body> diff --git a/css/chakra.css b/css/chakra.css index 35ad961..f9a6304 100644 --- a/css/chakra.css +++ b/css/chakra.css @@ -32,7 +32,7 @@ span { } /* ====================================== */ /* ========== HTML 5 ELEMENTS =========== */ -header, footer, aside, nav, article { +header, footer, aside, nav, article, section { display: block; } @@ -51,12 +51,6 @@ header, footer, aside, nav, article { width: 640px; margin: 0 auto; } - #knavbarLeft { - display: table-cell; - } - #knavbar aside { - display: table-cell; - } .topNav { width: 30px; @@ -65,12 +59,12 @@ header, footer, aside, nav, article { .floatLeft { float: left; - margin-left: 3px; + margin-left: 5px; } .floatRight { float: right; - margin-right: 3px; + margin-right: 5px; } /* ====================================== */ @@ -81,6 +75,14 @@ header, footer, aside, nav, article { padding: .5em 0 .5em 0; background: #BDBDBD; } + +#middle header { + text-align: center; + font-size: 1.4em; + margin: 5px 0 5px 0; + padding-bottom: 2px; +} + .middleRow ul { display: table; margin: 0 auto; @@ -106,7 +108,7 @@ header, footer, aside, nav, article { .middleRow ul li:hover { text-decoration: underline; border: 3px solid #424242; - } + } /* ====================================== */ /* ============ ADMIN SECTION =========== */ @@ -150,251 +152,54 @@ header, footer, aside, nav, article { width: auto; } - /* ====================================== */ -/* ============ =========== */ - - -#month -{ - vertical-align: middle; - float: right; -} - -#subjects -{ - width: 640px; - margin: 0 auto; -} - -#subjects ul -{ - list-style: none; - padding: 0; - margin: 0; - background: #BDBDBD; - float: left; - width: auto; -} - -#subjects ul li -{ - float: left; -} - -#subjects ul li a -{ - line-height: 2em; - width: 160px; - text-decoration: none; - text-align: center; - font-weight: bold; - float: left; - color: #000000; - height: 9.5em; - margin-bottom: 0.2em; - margin-top: 0.2em; -} - -#subjects ul li img -{ - border: none; - width: 120px; -} - -#subjects a:hover { - text-decoration: underline; - outline-width:3px; - outline-style:solid; - outline-color: #424242; -} - -#week_select -{ - list-style: none; - display: inline; -} - -#week_select li -{ - float: left; - font-weight: bold; - line-height: 2em; -} - -#week_select li a -{ - text-decoration: none; - text-align: center; - float: left; - color: #000000; -} - -#week_select a:hover -{ - text-decoration: underline; - background: #BDBDBD; -} - -#week_select a.selected +/* ====== INDIVIDUAL GRADE SECTION ====== */ +#curriculum { - text-decoration: underline; - background: #BDBDBD; + text-align: right; + padding: 3px; + background: #ccc; + margin: 0px 0 5px 0; } -#lessonname -{ - text-decoration: none; +#weekSelectInput { text-align: center; - font-weight: bold; -} - -#weeks -{ - list-style: none; - background:#BDBDBD; - float: left; - width: 100%; - font-weight: bold; -} - -.preview -{ - width: 250px; + border-bottom: 1px solid #666; + padding: 5px 0 5px 0; } -#weeks li -{ - float:left; -} + #weekSelect { + list-style: none; + text-align: center; + } -.icon -{ - width: 40px +.lesson { + border-top: 1px solid #666; + padding: 1em; + margin: 5px 0 5px 0; } + .lessonName { + text-decoration: none; + text-align: center; + font-weight: bold; + font-size: 1.1em; + margin-bottom: 1em; + } + .lesson img { + display: block; + margin: 0 auto; + padding: 5px; + border: 1px solid #aaa; + background: #ddd; + } -#weeks li a -{ - text-decoration: none; +.menuSelectType { + margin: 0; + padding: 0; text-align: center; - font-weight: bold; - float: left; - color: #000000; - padding-top: 0.2em; - padding-right: 0.2em; - padding-left: 0.2em; -} - -#weeks a:hover { - text-decoration: underline; - background: #BDBDBD; -} - -#weeks a.selected { - text-decoration: underline; - background: #BDBDBD; } - -.weeklist -{ - background:#6E6E6E; - width: 100%; -} - -.lessonlist a -{ - width: 280px; - height: 220px; - margin-top: 1em; -} - -.lessonlist a:hover { - text-decoration: underline; - outline-width:3px; - outline-style: solid; - outline-color: #424242; -} - -#admin { - display: block; - background: #4080c0; - width: 100%; - margin: 0 auto; -} - -#admin ul { - display: table; +.menuSelectType li { list-style: none; - margin: 0 auto; - padding: .5em 0 .5em 0; -} - -#admin ul li { - display: table-cell; - text-align: center; - padding: 0.2em 2em 0.2em 2em; -} - -#admin ul li a -{ - display: block; - text-decoration: none; - font-weight: bold; - color: #000000; -} -#admin ul li a:hover { - text-decoration: underline; -} -#admin p { - line-height: 0; -} - -#admin img -{ - height: 50px; - width: auto; -} - -#curriculum -{ -width: auto; -text-align: center; -float:right; -background:#BDBDBD; -padding: 3; -} - -#grade-menu -{ -list-style: none; -padding: 0; -margin: 0; -background: #585858; -float:left; -width:100%; -} - -#grade-menu li -{ -float: left; -} - -#grade-menu li a -{ -height: 7%; -width: 7em; -text-decoration: none; -text-align: center; -font-weight: bold; -float: left; -color:#000000; -} - -#grade-menu a:hover { -text-decoration: underline; -} - -#grade-menu a.selected { -text-decoration: underline; + display: inline; } @@ -8,33 +8,21 @@ <link rel="stylesheet" href="css/chakra.css" type="text/css"/> <link rel="stylesheet" href="css/jquery.jgrowl.css" type="text/css"/> -<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> -<script type="text/javascript" src="js/jquery.ui.all.js"></script> -<script type="text/javascript" src="js/jquery.jgrowl_minimized.js"></script> +<script src="js/jquery-1.3.2.min.js"></script> +<script src="js/jquery.ui.all.js"></script> +<script src="js/jquery.jgrowl_minimized.js"></script> -<script type="text/javascript" src="js/jquery.idTabs.min.js"></script> +<script src="js/jquery.idTabs.min.js"></script> <link type="image/ico" rel="icon" href="assets/default/images/favicon.ico" /> </head> <body> -<!-- - -# How best to add in knavbar? -# How best to handle different screen resolutions? -# Is it bad to use ul and ols for layout? - ---> - <section id="navigation"> <nav id="knavbar"> - <section id="knavbarLeft"> - <img src="assets/default/images/chakra_logo.png" alt="Home" title="Home" class="topNav floatLeft"/> - </section> - <aside> - <img src="assets/default/images/help.png" alt="Help" title="Help" class="topNav floatRight"/> - <img src="assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma" class="topNav floatRight"/> - </aside> + <img src="assets/default/images/chakra_logo.png" alt="Home" title="Home" class="topNav floatLeft"/> + <img src="assets/default/images/help.png" alt="Help" title="Help" class="topNav floatRight"/> + <img src="assets/default/images/karma_logo.png" alt="Karma icon" title="About Karma" class="topNav floatRight"/> </nav> </section> @@ -55,7 +43,7 @@ <li><a href="#tab_grade8"><img src="assets/default/images/grade8_bw.png" alt="Grade 8" title="grade8"/><p>Grade 8</p></a></li> </ul> </section> -</section><!-- end grades --> +</section><!-- end middle --> <section id="admin"> <ul> @@ -64,6 +52,5 @@ <li id="about"><a href="#tab_about"><img src="assets/default/images/karma_logo.png" alt="About Karma" title="About Karma"/><p>About Karma</p></a></li> </ul> </section><!-- end admin --> - </body> </html> |