started building lesson navigation with icons

author: christophd@sugarlabs.org <christophd@sugarlabs.org> 2009-08-31 11:25:56 (GMT)
committer: christophd@sugarlabs.org <christophd@sugarlabs.org> 2009-08-31 11:25:56 (GMT)
commit: 220584288fc30266e5016acc3099c5661b3aa908 (patch)
tree: 95c0d7339e1bc3b7917e0e1460c0ee9a22dad7c3 /lessons
parent: 89e6b9032fa74765c248a88b0eb0c62ede63591b (diff)
2 files changed, 106 insertions, 59 deletions
diff --git a/lessons/quadrilaterals/css/menu.css b/lessons/quadrilaterals/css/menu.css
index ae35a6e..caa1184 100755
--- a/lessons/quadrilaterals/css/menu.css
+++ b/lessons/quadrilaterals/css/menu.css
@@ -5,9 +5,74 @@ margin:0;
 padding:0;
 }
 
-a:hover
+#subject
 {
-#background:#FFFFFF;
+text-align: center;
+font-weight: bold;
+font-size: 150%;
+}
+
+#lesson_name
+{
+text-align: center;
+font-weight: bold;
+font-size: 150%;
+}
+
+#teachers_note
+{
+text-align: center;
+font-weight: bold;
+font-size: 150%;
+width: 50%;
+float: left;
+}
+
+#lesson_plan
+{
+text-align: center;
+font-weight: bold;
+font-size: 150%;
+width: 50%;
+float: left;
+}
+
+#tutorial_link
+{
+width: 50%;
+float: left;
+}
+
+#tutorial_link img
+{
+position: center;
+}
+
+#exercise_link
+{
+width: 50%;
+float: left;
+}
+
+#exercise_link img
+{
+position: middle;
+}
+
+#lesson
+{
+width:800px;
+position: fixed;
+left: 50%;
+top: 50%;
+margin-left: -400px;
+margin-top: -10.75em;
+}
+
+#nav-menu a:hover {
+text-decoration: underline;
+outline-width:1px;
+outline-style:solid;
 }
 
 #tab_support ul
@@ -34,9 +99,9 @@ float: left;
 
 #nav-menu li a
 {
-height: 50px;
+height: 75px;
 line-height: 2em;
-width: 7em;
+width: 100%
 text-decoration: none;
 text-align: center;
 font-weight: bold;
@@ -47,6 +112,8 @@ color:#000000;
 #nav-menu img
 {
 border: none;
+width: 75px;
+background: #FFFFFF;
 }
 
 #nav-menu a:hover {
@@ -57,38 +124,12 @@ border: none;
 text-decoration: underline;
 }
 
-#chakra
-{
-background: #FFFFFF;
-width: 50px;
-}
-
-#chakra img
-{
-float: left;
-width: 50px;
-height: 50px;
-}
-
-#logo
-{
-background: #FFFFFF;
-width: 50px;
-}
-
-#logo img
-{
-float: left;
-width: 50px;
-height: 50px;
-}
-
 #welcome
 {
-background:#76008A;
+background:#D7DF01;
 }
 
-#lesson
+#tutorial
 {
 background:#DF0101;
 }
@@ -103,11 +144,6 @@ background:#5FB404;
 background:#045FB4;
 }
 
-#assessment
-{
-background:#D7DF01;
-}
-
 #support
 {
 background:#848484;
diff --git a/lessons/quadrilaterals/index.html b/lessons/quadrilaterals/index.html
index 9c0fe10..246a328 100755
--- a/lessons/quadrilaterals/index.html
+++ b/lessons/quadrilaterals/index.html
@@ -18,28 +18,36 @@
 
 <body>
 
-<ul id="nav-menu" class="usual">
-<li id="chakra"><a href="../index_frames.html"><img src="assets/generic/images/chakra_logo.png" alt="Chakra" title="Chakra"></a></li>
-<li id="welcome"><a class="selected" href="#tab_welcome">Quadrilaterals</a></li>
-<li id="lesson"><a href="#tab_lesson">Lesson</a></li>
-<li id="exercise"><a href="#tab_exercise">Exercise</a></li>
-<li id="game"><a href="#tab_game">Game</a></li>
-<li id="assessment"><a href="#tab_assessment">Assessment</a></li>
-<li id="support"><a href="#tab_support">Support</a></li>
+<div id="lesson">
+<ul id="nav-menu">
+
+<li id="back"><a href="../../index.html"><img src="../../assets/default/images/back.png" alt="Back" title="Back"></a></li>
+<li id="chakra"><a href="../../index.html"><img src="../../assets/default/images/chakra_logo.png" alt="Chakra" title="Chakra"></a></li>
+<li id="welcome"><a href="#tab_welcome" class="selected" >Quadrilaterals</a></li>
+<li id="tutorial"><a href="#tab_tutorial"><img src="../../assets/default/images/tutorial.png" alt="Tutorial" title="Tutorial"></a></li>
+<li id="exercise"><a href="#tab_exercise"><img src="../../assets/default/images/exercise.png" alt="Exercise" title="Exercise"></a></li>
+<li id="game"><a href="#tab_game"><img src="../../assets/default/images/games.png" alt="Game" title="Game"></a></li>
+<li id="resources"><a href="#tab_resources"><img src="../../assets/default/images/resources.png" alt="Resources" title="Resources"></a></li>
+<li id="help"><a href="#tab_help"><img src="../../assets/default/images/help.png" alt="Help" title="Help"></a></li>
 <li id="logo"><a href="http://olenepal.org/" target="_blank"><img src="assets/generic/images/olenepal_logo.gif" alt="OLE Nepal logo" title="OLE Nepal Web site"></a></li>
 </ul>
 
 <div id="tab_welcome" class="usual">
 <div id="welcome">
-Mathematics
-Quadrilaterals
-<a href="assets/en/docs/teachernotes.swf" target="_blank">Teacher's note</a>
-<a href="assets/en/docs/lessonplan.swf" target="_blank">Lesson plan</a>
+
+<div id="subject">Mathematics</div>
+<div id="lesson_name">Quadrilaterals</div>
+
+<div id="tutorial_link"><img src="../../assets/default/images/tutorial.png" alt="Tutorial" title="Tutorial"></div>
+<div id="exercise_link"><img src="../../assets/default/images/exercise.png" alt="Exercise" title="Exercise"></div>
+
+<div id="teachers_note"><a href="assets/en/docs/teachernotes.swf" target="_blank">Teacher's note</a></div>
+<div id="lesson_plan"><a href="assets/en/docs/lessonplan.swf" target="_blank">Lesson plan</a></div>
 </div>
 </div>
 
-<div id="tab_lesson">
-<div id="lesson">
+<div id="tab_tutorial">
+<div id="tutorial">
 <iframe scrolling="no" frameborder="0" src="lesson.html" width="870px" height="500px" name="karma_lesson">
 </iframe>
 </div>
@@ -59,23 +67,26 @@ Quadrilaterals
 </div>
 </div>
 
-<div id="tab_assessment">
-<div id="assessment">
-Assessment...
+<div id="tab_resources">
+<div id="resources">
+<ul>
+<li><a href="assets/en/docs/teachernotes.swf" target="_blank">Teacher's notes</a></li>
+<li><a href="assets/en/docs/lessonplan.swf" target="_blank">Lesson plan</a></li>
+<li><a href="quadrilaterals.zip">Download</a></li>
+</ul>
 </div>
 </div>
 
-<div id="tab_support">
-<div id="support">
+<div id="tab_help">
+<div id="help">
 <ul>
 <li><a href="assets/en/docs/help.html" target="_blank">Help</a></li>
-<li><a href="assets/en/docs/teachernotes.swf" target="_blank">Teacher's notes</a></li>
-<li><a href="assets/en/docs/lessonplan.swf" target="_blank">Lesson plan</a></li>
-<li><a href="quadrilaterals.zip">Download</a></li>
 </ul>
 </div>
 </div>
 
+</div>
+
 <script type="text/javascript"> 
   $("#nav-menu").idTabs(); 
 </script>
author	christophd@sugarlabs.org <christophd@sugarlabs.org>	2009-08-31 11:25:56 (GMT)
committer	christophd@sugarlabs.org <christophd@sugarlabs.org>	2009-08-31 11:25:56 (GMT)
commit	220584288fc30266e5016acc3099c5661b3aa908 (patch)
tree	95c0d7339e1bc3b7917e0e1460c0ee9a22dad7c3 /lessons
parent	89e6b9032fa74765c248a88b0eb0c62ede63591b (diff)