From 33cf79252077c8225172774f60a34e8d85883549 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Batista?= <jnfbatista@gmail.com>
Date: Sat, 4 Aug 2012 22:44:30 +0200
Subject: [PATCH] Navigation and topbar merged

---
 css/structure.css |  66 ++++++++++++++++++++++++
 main.html         |  36 ++++++++-----
 nav.htm           | 128 +++++++++++++++++++++++-----------------------
 3 files changed, 153 insertions(+), 77 deletions(-)

diff --git a/css/structure.css b/css/structure.css
index 13d4066..a743ac2 100644
--- a/css/structure.css
+++ b/css/structure.css
@@ -10,7 +10,9 @@
 
 #topbar {
     width:100%;
+    height: 0;
     position: absolute;
+    top: 0;
 }
 
 #nav-button {
@@ -21,5 +23,69 @@
     padding-right: 1em;
     padding-left: 1em;
     margin-right: 5em;
+    z-index: -1;
 }
 
+#wrapper {
+    z-index:100;
+}
+
+body {
+    background: url(img/testbg.jpg) no-repeat;
+    background-size: 100%;
+    margin: 0;
+    padding: 0;
+}
+.slide {
+    font-size: 100px;
+}
+
+.arrow {
+}
+
+#go-next, #go-prev {
+    transition: opacity 0.5s;
+    -moz-transition: opacity 0.5s; /* Firefox 4 */
+    -webkit-transition: opacity 0.5s; /* Safari and Chrome */
+    -o-transition: opacity 0.5s; /* Opera */
+
+    opacity: 0.3;
+    top: 0;
+    bottom: 0;
+    padding-top: 25%;
+    overflow: hidden;
+    display: block;
+    height: 100%;
+    position: fixed;
+    width: 5%;
+    text-align: center;
+}
+
+#go-next:hover, #go-prev:hover {
+    opacity: 0.7;
+    cursor: pointer;
+}
+
+#go-prev {
+    background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
+    background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
+
+    left: 0;
+}
+
+#go-next {
+    background: -moz-linear-gradient(left, rgba(0,0,0,0.0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(left, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(left, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(left, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
+    background: linear-gradient(to right, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
+
+    right: 0;
+}
diff --git a/main.html b/main.html
index dc7d3ae..9e977ee 100644
--- a/main.html
+++ b/main.html
@@ -8,23 +8,42 @@
 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
         <script src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js" type="text/javascript"></script>
+
+        <script src="js/jquery.bxSlider/jquery.easing.1.3.js"></script>
+        <script src="js/jquery.bxSlider/jquery.bxSlider.min.js"></script>
         <script src="js/javascript.js"></script>
+        <script src="js/slider.js"></script>
         <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
         <link href="css/structure.css" rel="stylesheet">
         <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
-        <!-- Le javascript
-        ================================================== -->
-        <!-- Placed at the end of the document so the pages load faster -->
         <script src="bootstrap/js/bootstrap.js"></script>
 
     </head>
     <body>
+        <div id="wrapper">
+            <a id="go-prev"><img class="arrow" src="img/arrow_left.png"/></a>
+            <a id="go-next"><img class="arrow" src="img/arrow_right.png"/></a>
+
+            <ul id="slider">
+                <li class="slide"><h1>First slide</h1>
+                <li class="slide"><h1>Second slide</h1>
+                <li class="slide"><h1>Third slide</h1>
+            </ul>
+            <!-- <div id="left-hidden">
+            </div>
+            <div id="main" class="span12">
+                fopjefoj apojpefjpwj pwej epfj 
+            </div>
+            <div id="right-hidden">
+            </div>-->
+        </div>
         <div id="topbar">
             <div class="navigation">
                 <ul class="nav nav-pills" >
                     <li class="active">
                     <a class="image-link"  >
                         <img class="chapter-image" src="img/firefox.png" >
+
                         <p>Subtitle</p>
                     </a>
                     </li>
@@ -45,16 +64,7 @@
             <a id="nav-button" class="pull-right" href="#">Nav me!! <i class="icon-chevron-down
                     icon-white"></i> </a> 
         </div>
-        <div style="clear: both;"></div>
-        <div id="wrapper">
-            <div id="left-hidden">
-            </div>
-            <div id="main" class="span12">
-                fopjefoj apojpefjpwj pwej epfj 
-            </div>
-            <div id="right-hidden">
-            </div>
-        </div>
+
         <script>
             $(".collapse").collapse();
 
diff --git a/nav.htm b/nav.htm
index 723d313..b4902d5 100644
--- a/nav.htm
+++ b/nav.htm
@@ -7,82 +7,82 @@
 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
         <script src="http://code.jquery.com/ui/1.8.22/jquery-ui.min.js" type="text/javascript"></script>
-				<script src="js/jquery.bxSlider/jquery.easing.1.3.js"></script>
-				<script src="js/jquery.bxSlider/jquery.bxSlider.min.js"></script>
+        <script src="js/jquery.bxSlider/jquery.easing.1.3.js"></script>
+        <script src="js/jquery.bxSlider/jquery.bxSlider.min.js"></script>
         <script src="js/javascript.js"></script>
-				<script src="js/slider.js"></script>
+        <script src="js/slider.js"></script>
         <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
-				<style>
-					body {
-						background: url(img/testbg.jpg) no-repeat;
-						background-size: 100%;
-						margin: 0;
-						padding: 0;
-					}
-					.slide {
-						font-size: 100px;
-					}
+        <style>
+            body {
+                background: url(img/testbg.jpg) no-repeat;
+                background-size: 100%;
+                margin: 0;
+                padding: 0;
+            }
+            .slide {
+                font-size: 100px;
+            }
 
-					.arrow {
-					}
+            .arrow {
+            }
 
-					#go-next, #go-prev {
-						transition: opacity 0.5s;
-						-moz-transition: opacity 0.5s; /* Firefox 4 */
-						-webkit-transition: opacity 0.5s; /* Safari and Chrome */
-						-o-transition: opacity 0.5s; /* Opera */
+            #go-next, #go-prev {
+                transition: opacity 0.5s;
+                -moz-transition: opacity 0.5s; /* Firefox 4 */
+                -webkit-transition: opacity 0.5s; /* Safari and Chrome */
+                -o-transition: opacity 0.5s; /* Opera */
 
-						opacity: 0.3;
-						top: 0;
-						bottom: 0;
-						padding-top: 25%;
-						overflow: hidden;
-						display: block;
-						height: 100%;
-						position: fixed;
-						width: 5%;
-						text-align: center;
-						z-index: 2;
-					}
+                opacity: 0.3;
+                top: 0;
+                bottom: 0;
+                padding-top: 25%;
+                overflow: hidden;
+                display: block;
+                height: 100%;
+                position: fixed;
+                width: 5%;
+                text-align: center;
+                z-index: 2;
+            }
 
-					#go-next:hover, #go-prev:hover {
-						opacity: 0.7;
-						cursor: pointer;
-					}
+            #go-next:hover, #go-prev:hover {
+                opacity: 0.7;
+                cursor: pointer;
+            }
 
-					#go-prev {
-						background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
-						background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
-						background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
-						background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
-						background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
-						background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
-						filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
+            #go-prev {
+                background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
+                background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
+                background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
+                background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
+                background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
+                background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); /* W3C */
+                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
 
-						left: 0;
-					}
+                left: 0;
+            }
 
-					#go-next {
-						background: -moz-linear-gradient(left, rgba(0,0,0,0.0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
-						background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
-						background: -webkit-linear-gradient(left, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
-						background: -o-linear-gradient(left, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
-						background: -ms-linear-gradient(left, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
-						background: linear-gradient(to right, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%); /* W3C */
-						filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
+            #go-next {
+                background: -moz-linear-gradient(left, rgba(0,0,0,0.0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
+                background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
+                background: -webkit-linear-gradient(left, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
+                background: -o-linear-gradient(left, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
+                background: -ms-linear-gradient(left, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
+                background: linear-gradient(to right, rgba(0,0,0,0.0) 0%,rgba(0,0,0,1) 100%); /* W3C */
+                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
 
-						right: 0;
-					}
-				</style>
+                right: 0;
+            }
+        </style>
     </head>
     <body>
-				<a id="go-prev"><img class="arrow" src="img/arrow_left.png"/></a>
-				<a id="go-next"><img class="arrow" src="img/arrow_right.png"/></a>
+        <a id="go-prev"><img class="arrow" src="img/arrow_left.png"/></a>
+        <a id="go-next"><img class="arrow" src="img/arrow_right.png"/></a>
 
-				<ul id="slider">
-					<li class="slide"><h1>First slide</h1>
-					<li class="slide"><h1>Second slide</h1>
-					<li class="slide"><h1>Third slide</h1>
-				</ul>
+        <ul id="slider">
+            <li class="slide"><h1>First slide</h1>
+            <li class="slide"><h1>Second slide</h1>
+            <li class="slide"><h1>Third slide</h1>
+        </ul>
     </body>
 </html>