I've implementet a bootstrap 3.0 theme in my MVC-aplication. But the theme only works on my http://localhost:00000/. If I type in the browser like:
http://localhost:00000/home/index
or something like that the css and javascript doesn't work. But I get the html för it. All my code for like the: head, header, footer ect.. I have in my _Layout.cshtml file. I can't see the problem here why it's not working?
It ONLY works on my http://localhost:00000/.
NOT on the: http://localhost:00000/home/index (witch points to the exact same (controller/method/view as the fisrt one)
This is how my _layout.cshtml looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<!--admintemat test-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" href="images/favicon.png">
<link href="bs3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="assets/jvector-map/jquery-jvectormap-1.2.2.css" rel="stylesheet">
<link href="css/clndr.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
</head>
<body>
<!--header start-->
<header class="header fixed-top clearfix">
<!--logo start-->
<div class="brand">
<a href="index.html" class="logo">
<img src="images/logo.png" alt="">
</a>
<div class="sidebar-toggle-box">
<div class="fa fa-bars"></div>
</div>
</div>
<!--logo end-->
<div class="nav notify-row" id="top_menu">
<!-- notification goes here -->
</div>
<div class="top-nav clearfix">
<!--search & user info goes here-->
</div>
</header>
<!--sidebar start-->
<aside>
<div id="sidebar" class="nav-collapse ">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<li>
<a class="active" href="index.html">
<i class="fa fa-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:;">
<i class="fa fa-laptop"></i>
<span>Layouts</span>
</a>
<ul class="sub">
<li>Boxed Page</li>
<li>Horizontal Menu</li>
<li>Language Switch Bar</li>
</ul>
</li>
<li>
<a href="login.html">
<i class="fa fa-user"></i>
<span>Login Page</span>
</a>
</li>
</ul>
</div>
</aside>
<!--sidebar end-->
<!-- sidebar menu end-->
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<!--main content goes here-->
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</section>
</section>
<!--main content end-->
#*</div>*#
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
<!-- ADMINTEMAT TESTPlaced js at the end of the document so the pages load faster -->
<!--Core js-->
<script src="js/lib/jquery.js"></script>
<script src="bs3/js/bootstrap.min.js"></script>
<script src="js/accordion-menu/jquery.dcjqaccordion.2.7.js"></script>
<script src="js/scrollTo/jquery.scrollTo.min.js"></script>
<script src="js/nicescroll/jquery.nicescroll.js" type="text/javascript"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/flot- chart/excanvas.min.js"></script><![endif]-->
<script src="assets/jQuery-slimScroll-1.3.0/jquery.slimscroll.js"></script>
<script src="assets/skycons/skycons.js"></script>
<script src="assets/jquery.scrollTo/jquery.scrollTo.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="assets/calendar/clndr.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"> </script>
<script src="assets/calendar/moment-2.2.1.js"></script>
<script src="js/calendar/evnt.calendar.init.js"></script>
<script src="assets/jvector-map/jquery-jvectormap-1.2.2.min.js"></script>
<script src="assets/jvector-map/jquery-jvectormap-us-lcc-en.js"></script>
<script src="assets/gauge/gauge.js"></script>
<script src="assets/easypiechart/jquery.easypiechart.js"></script>
<script src="assets/sparkline/jquery.sparkline.js"></script>
<script src="assets/flot-chart/jquery.flot.js"></script>
<script src="assets/flot-chart/jquery.flot.tooltip.min.js"></script>
<!--<script src="assets/flot-chart/jquery.flot.pie.js"></script>-->
<script src="assets/flot-chart/jquery.flot.resize.js"></script>
<script src="assets/flot-chart/jquery.flot.pie.resize.js"></script>
<script src="assets/flot-chart/jquery.flot.animator.min.js"></script>
<script src="js/dashboard.js"></script>
<!--common script init for all pages-->
<script src="js/scripts.js"></script>
<!--ADMIN TEMAT TESTscript for this page-->
</body>
</html>
If you open your console, you'll see several 404 errors for each of your css assets and probably afew of your js assets. This is because you're using relative file paths. relative file paths look within the folder of the current file, therefore once you're viewing a file in a sub folder, the relative paths no longer target the correct files. To fix it, use an absolute url.
/css/bootstrap-reset.css
the rest will need to be updated too.
Related
the mdl class mdl-layout__content is blocking my tooltip from showing in my graph. I made a codepen that shows the problem. Are there style settings I can make to still use this class for my nav, but show my tooltip.
Link to CodePen that shows the issue
here's my HTML code
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>New UI 07052017</title>
<link href="css/layout.css" rel="stylesheet" type="text/css">
<!-- Material Design Lite
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.orange-indigo.min.css"> -->
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.orange-indigo.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> -->
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="css/angular-toggle-switch-bootstrap-3.css" type="text/css" media="screen">
<link href="css/bootstrap-material-design.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.resize.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> **** updated to 1.6.1 on 6/29/17-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<!-- <script src="https://www.gstatic.com/firebasejs/3.2.0/firebase.js"></script> -->
<script src="https://www.gstatic.com/firebasejs/3.6.6/firebase.js"></script>
<!-- <script src="https://cdn.firebase.com/libs/angularfire/2.0.1/angularfire.min.js"></script> -->
<script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>
<script src="js/angular-toggle-switch.min.js"></script>
<script src="js/angularScripts.js"></script>
<!-- JustGage tools for the dashboard -->
<script src="js/justgage.js"></script>
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/android-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Pellet Pirate">
<link rel="apple-touch-icon-precomposed" href="images/apple-icon-114x114.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/apple-icon-144x144.png">
<meta name="msapplication-TileColor" content="#3372DF">
<link rel="shortcut icon" href="images/pelletpirate-icon-32x32.png">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.0/material.cyan-light_blue.min.css">
<link rel="stylesheet" href="css/styles.css">
<!-- Import and configure the Firebase SDK -->
<!-- These scripts are made available when the app is served or deployed on Firebase Hosting -->
<!-- If you do not serve/host your project using Firebase Hosting see https://firebase.google.com/docs/web/setup -->
<script src="/__/firebase/4.0.0/firebase-app.js"></script>
<script src="/__/firebase/4.0.0/firebase-auth.js"></script>
<script src="/__/firebase/init.js"></script>
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
</head>
<body ng-app="PelletPirate">
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">smoker</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search">
<label class="mdl-textfield__label" for="search">Enter your query...</label>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
<i class="material-icons">more_vert</i>
</button>
</div>
</header>
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
<header class="demo-drawer-header">
</header>
<nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">whatshot</i>Manage a Cook</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">inbox</i>Inbox</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">delete</i>Trash</a>
<div class="mdl-layout-spacer"></div>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">help_outline</i>
<span class="visuallyhidden">Help</span></a>
</nav>
</div>
<!-- *********************************************************************************************************************-->
<!-- need help here. I'm not sure what settings to make in CSS to enable the tooltip popup to show. If I comment out the -->
<!-- the mdl-layout__content class then the tooltips show but my graph now drifts left behind my left nav -->
<!-- *********************************************************************************************************************-->
<main class="mdl-layout__content mdl-color--grey-100">
<!-- <main class="mdl-color--grey-100"> -->
<div class="mdl-grid demo-content">
<div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
<div class="plot-container">
<div id="temp-placeholder" class="plot-placeholder"></div>
</div>
</div>
<div class="row" id="ControlsRow">
<div class="mdl-cell mdl-cell--12-col">
<div class="plot-container">
<div id="controls-placeholder" class="plot-placeholder"></div>
</div>
</div>
</div>
</div>
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer--middle-section">
<div class="mdl-logo">"It's a Pirate's life for me."</div>
<ul class="mdl-mini-footer--link-list">
<li>Help</li>
<li>Privacy & Terms</li>
</ul>
</div>
</footer>
</main>
</div>
</body>
<script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyD3_xJ0aYVK3VwjuuliOdb6t5wbbi87RB8",
authDomain: "pelletpirate.firebaseapp.com",
databaseURL: "https://pelletpirate.firebaseio.com",
projectId: "pelletpirate",
storageBucket: "pelletpirate.appspot.com",
messagingSenderId: "731610976061"
};
firebase.initializeApp(config);
var Ref = firebase.database().ref()
</script>
<script src="js/scripts.js"></script>
<script src="js/Cscripts.js"></script>
</html>
I figured it out: z-index to bring the tooltip to the forefront. In CSS:
#tooltip {
z-index: 1;
}
I have tried everything I can think of, but my page loads weirdly. With no style or form, and for the life of me, I have no clue why! Here is my code below : and attached is a picture of the outcome I get when running the code.
My outcome when I run this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Demos</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<div data-role="header">
<div class="ui-btn-active" data-role="navbar">
<ul>
<li>
Find Us
</li>
<li>
Call Us
</li>
<ul>
</div>
</div>
<div class="ui-content" data-role="main">
<ul data-filter="true" data-insert="true" data-role="listview">
<li>
Brussels
</li>
<li>
Dublin
</li>
<li>
Cape Town
</li>
</ul>
</div>
<div data-role="footer" style="text-align:centure;">
<button class="ui-btn ui-icon-plus ui-btn-icon-left">Click
Me</button>
</div>
</div>
</body>
</html>
It's a simple typo. The first <ul> in your header's navbar is not closed.
Somehow jquery-mobile dont like this and stops rendering with a error. You should see this error in your browsers dev tools.
If your references to jquery and jquery-mobile are correct. it should work if you close the <li> tag
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Demos</title>
<link rel="shortcut icon" href="favicon.ico">
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="_assets/js/index.js"></script>
<!-- jQuery Mobile -->
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<div data-role="page" data-theme="a">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<div data-role="header">
<div class="ui-btn-active" data-role="navbar">
<ul>
<li>
Find Us
</li>
<li>
Call Us
</li>
</ul>
</div>
</div>
<div class="ui-content" data-role="main">
<ul data-filter="true" data-insert="true" data-role="listview">
<li>
Brussels
</li>
<li>
Dublin
</li>
<li>
Cape Town
</li>
</ul>
</div>
<div data-role="footer" style="text-align:center;">
<button class="ui-btn ui-icon-plus ui-btn-icon-left">
Click Me
</button>
</div>
</div>
Beside that, you have others error in your code.
You should insert your personal javascript code <script src="_assets/js/index.js"></script> after jquery and jquery-mobile. If you do so, you're always sure, that all libraries are loaded before you use them in your "personal" javascript file.
There is no need to include the same CSS Files twice. like you did with
css/themes/default/jquery.mobile-1.4.5.min.css and _assets/css/jqm-demos.css
In Jquery-mobile, there is the possibility to include CSS and/or Javascript file inside of the data-role="page" container. But in this case it makes absolut no sense.
The class ui-btn-active is unnecessary inside of the navbar <div>. If you want to set a button of your navbar active, you have to include this class inside of the <li> tag
And you have a typo inside of your footer. centure
I want to create a very simple layout with buttons on bottom of screen and some centered content.
How may I achieve this with Intel app Framework UI.
I need to support all screen sizes of course.
Here is example in Intel App Framework: http://jsbin.com/valuc/1/edit
<!DOCTYPE html>
<html>
<head>
<title>App Framework</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/af.ui.css" />
<link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/icons.css" />
<script type="text/javascript" charset="utf-8" src="http://cdn.app-framework-software.intel.com/2.0/appframework.ui.min.js"></script>
<style>
#page1 {text-align: center}
</style>
</head>
<body>
<div id="afui">
<div id="content" style="">
<div class="panel" title="Welcome" id="page1" selected="true">
<p>This is come content</p>
<p>This text is centered in the panel</p>
</div>
</div>
<div id="navbar">
<a class="icon home" href="#button1">Button 1</a>
<a class="icon settings" href="#button2">Button 2</a>
</div>
</div>
</body>
</html>
You also refer to some basic templates created using Intel App Framework to get started: https://github.com/krisrak/appframework-templates
I've developed a phoneGap app for iOS and it works.
Now I'm trying to switch it on JqueryMobile in order to improve graphic.
This is the code of index.html page.
What must I change to make it works with JQueryMobile?
I tried to use css styles and library of jQueryMobile and modify header and footer but I can't understand where I must place <div data-role="page"> in my file.
I haven't also understood if I must leave id=header and class=header or not.
<head>
<title>x Directory</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-WebInspector.js"></script>
</head>
<body>
<div id="header" class="header">
Home
<img src="img/mob.png" class="logo" id="logo"/>
<h1>xAsk</h1>
</div>
<div id="wrapper">
<ul id="xList" class="icon-list"></ul>
</div>
<div id="wrapper_hidden">
<div>
<div id="employeeDetails">
<img id="xPic"/>
<h3 id="xName"></h3>
<p id="xEmail"></p>
<p id="city"></p>
</div>
<ul id="actionList"></ul>
</div>
</div>
<div id="footer" class="footer">
<ul id="azioni">
</ul>
</div>
<script src="js/jquery.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/xlist.js"></script>
</body>
Start with one of the examples first. Jquery mobile changes the way your application is structured. You're not including jquery-mobile.js, so your example does not work.
The should be around your header, data and footer, but in order to have multiple (inline) pages, you need more of them.
I tried a test file which is working but this file isn't. I also tried validating from w3c and it showed no errors. I also tried pasting
outside jquery ui tabs but still didn't worked out. Could there be any conflict between plugins. And also when i gave absolute path for demo file it worked while relative path didn't. Here's the two file:
This one is working (demo file)-
<!DOCTYPE html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <!-- optional -->
<!--[if lt IE 9]>
<script type="text/javascript" src="../js/excanvas/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="js/spinners/spinners.js"></script>
<script type="text/javascript" src="js/lightview/lightview.js"></script>
<link rel="stylesheet" type="text/css" href="css/lightview/lightview.css" />
<link rel="stylesheet" type="text/css" href="css/main-style.css" />
</head>
<body>
<a href='img/colorful-abstract.jpg' class='lightview' data-lightview-group='example'>
<img src='img/thumbs colorful-abstract.jpg' alt=''/>
</a>
</body>
</html>
Where as this original ones isn't working-
<!DOCTYPE html>
<head>
<title>Rahul Dagli's Portfolio Website</title>
<!--jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.quicksand.js"></script>
<script type="text/javascript" src="js/jquery-main.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>
<!--lightview-->
<script type="text/javascript" src="js/spinners/spinners.js"></script>
<script type="text/javascript" src="js/lightview/lightview.js"></script>
<script type="text/javascript" src="js/excanvas/excanvas.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<!--CSS-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/navigation-menu.css" >
<link rel="stylesheet" type="text/css" href="css/main-style.css" />
<link rel="Stylesheet" type="text/css" href="css/jquery-ui-1.8.17.custom.css">
<link rel="stylesheet" type="text/css" href="css/lightview/lightview.css" />
</head>
<body>
<!--main navigation-->
<nav>
<ul id="navigation">
<li class="portfolio"></li>
<li class="about"></li>
<li class="contact"></li>
</ul>
</nav>
<!--main content-->
<div id="sections">
<!--Portfolio page starts-->
<section id="section-portfolio">
<header>
<hgroup>
<h1>Rahul Dagli</h1>
<h2> Web Designer</h2>
</hgroup>
<p>Welcome to my online portfolio. Take a look at my work and find out who I am.</p>
</header>
<!--Tabbed Image Gallery-->
<div id="portfolio-list">
<div id="tabs" class="tabs-bottom">
<ul>
<li>Graphic design</li>
<li>Web design</li>
<li>Flash</li>
<li>3d</li>
</ul>
<div id="tabs-1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="tabs-2">
</div>
<div id="tabs-3">
</div>
</div>
</div>
</section>
<!--Portfolio page ends-->
<!--About page starts-->
<section id="section-about">
</section>
<!--About page ends-->
<!--Contact page starts-->
<section id="section-contact">
</section>
<!--Contact page ends-->
</div>
<a href='img/colorful-abstract.jpg' class='lightview' data-lightview-group='example'>
<img src='img/thumbs-colorful-abstract.jpg' alt=''/>
</a>
</body>
</html>
There's an example folder in the download you could use to start from, it shows a proper installation. Once that works, Lightview should work in the tabs as well.
Also keep in mind that all the Lightview related includes on your page are absolute, not relative like your other includes. So it could be that the files aren't where you expect them to be.