I have a very simple use case. I have downloaded the flask clean blog files from the link : https://startbootstrap.com/template-overviews/clean-blog/ and my intention is to build a blog website.
For starters i am just trying to load the index page using a very simple script :
Test.py :
from flask import Flask,render_template
app = Flask(__name__)
#app.route('/index')
def index():
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
I have the below module structure :
C:.
│ Test.py
│
├───static
│ └───css
│ bootstrap.min.css
│ clean-blog.min.css
│ font-awesome.min.css
│
└───templates
index.html
Now my index.html file is as follows :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Clean Blog - Start Bootstrap Theme</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}" >
<!-- Custom fonts for this template -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/font-awesome.min.css') }}" >
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link rel="stylesheet" href="{{ url_for('static',filename='css/clean-blog.min.css') }}" >
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="post.html">Sample Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Page Header -->
<header class="masthead" style="background-image: url('img/home-bg.jpg')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Man must explore, and this is exploration at its greatest
</h2>
<h3 class="post-subtitle">
Problems look mighty small from 150 miles up
</h3>
</a>
<p class="post-meta">Posted by
Start Bootstrap
on September 24, 2018</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
I believe every human has a finite number of heartbeats. I don't intend to waste any of mine.
</h2>
</a>
<p class="post-meta">Posted by
Start Bootstrap
on September 18, 2018</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Science has not yet mastered prophecy
</h2>
<h3 class="post-subtitle">
We predict too much for the next year and yet far too little for the next ten.
</h3>
</a>
<p class="post-meta">Posted by
Start Bootstrap
on August 24, 2018</p>
</div>
<hr>
<div class="post-preview">
<a href="post.html">
<h2 class="post-title">
Failure is not an option
</h2>
<h3 class="post-subtitle">
Many say exploration is part of our destiny, but it’s actually our duty to future generations.
</h3>
</a>
<p class="post-meta">Posted by
Start Bootstrap
on July 8, 2018</p>
</div>
<hr>
<!-- Pager -->
<div class="clearfix">
<a class="btn btn-primary float-right" href="#">Older Posts →</a>
</div>
</div>
</div>
</div>
<hr>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<p class="copyright text-muted">Copyright © Your Website 2018</p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/clean-blog.min.js"></script>
</body>
</html>
I am not sure why but this does not seem to work. The navigation bar is not visible .
Even more strangely when i change the lines :
<link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}" >
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/font-awesome.min.css') }}" >
<link rel="stylesheet" href="{{ url_for('static',filename='css/clean-blog.min.css') }}" >
to
<link rel="stylesheet" href="{{ url_for('static',filename='bootstrap.min.css') }}" >
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='font-awesome.min.css') }}" >
<link rel="stylesheet" href="{{ url_for('static',filename='clean-blog.min.css') }}" >
everything works normally and i can see the indentation and navigation bar works normally . Ideally it should not work since the css files are inside the /static/css folder and not directly under static.
Can someone please tell me what is the issue here ?
Thanks in advance.
It looks like you have a problem in your path / folder : Flask seems to be serving files from static/css/ instead of static/.
Try playing with those parameters :
app = Flask(__name__, static_url_path='/static',static_folder='static/')
Related
I have a asp.net application, where I wanted to use a premade bootstrap template for my frontend. I found this one.
The original site from the template looks really nice with a background like this:
I copied all the css into my css folder, and also took the html and cut some parts of it out such that I could just render my own content in it.
My _layout.cshtml that should be a scaffolding for other html files looks now like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Clean Blog - Start Bootstrap Theme</title>
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v5.15.3/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light" id="mainNav">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="index.html">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="post.html">Sample Post</a></li>
<li class="nav-item"><a class="nav-link px-lg-3 py-3 py-lg-4" href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!-- Page Header-->
<header class="masthead" style="background-image: url('../../wwwroot/assets/home-bg.jpg')">
<div class="container position-relative px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<div class="site-heading">
<h1>Clean Blog</h1>
<span class="subheading">A Blog Theme by Start Bootstrap</span>
</div>
</div>
</div>
</div>
</header>
<main role="main" class="pb-3">
#RenderBody()
</main>
<footer class="border-top">
<div class="container px-4 px-lg-5">
<div class="row gx-4 gx-lg-5 justify-content-center">
<div class="col-md-10 col-lg-8 col-xl-7">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-facebook-f fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="#!">
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</ul>
<div class="small text-center text-muted fst-italic">Copyright © Your Website 2021</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="js/scripts.js"></script>
</body>
</html>
As far as I understand, the central line for displaying the background image is this one:
<header class="masthead" style="background-image: url('../../wwwroot/assets/home-bg.jpg')">
Where we set the image as our background.
The problem is though, that the site I get, looks like this:
Instead of having the nice image as a background, I just get grey. I would like for the image to be displayed.
How do I get the image shown in the background, just like in the source i have linked?
EDIT:
I now looked in the dev tool, where I found it:
But clicking the image gets me This localhost page can’t be found.
So it might look like the given path is bad. This is a little bit strange to me, since my IDE actually suggested the entire current path to me.
What should I do with my path such that the image can be found?
Is your mentioned path (../../wwwroot/assets/home-bg.jpg) correct? because image won't be rendered if path is incorrect, and the background color becomes grey because of the classname mentioned.
i after trying the path ../../wwwroot/assets/home-bg.jpg I then tried to assume that my application by default would be looking in the wwwroot directory. So I tried the path assets/home-bg.jpg.
My IDE (rider) shows red lines, and complains about it. But it works
So I am creating a bootstrap website. It is supposed to be a one-page website and I have a navar at the top. My navbar is only sticky for the first section and then it just entirely disappears. How do I make it continue to stay sticky so that when I scroll through the entire page comes along at the top?
Here is my current code:
body,
td,
th {
font-family: muli;
font-style: normal;
color: #000000;
}
body {
min-height: 100%;
width: 100%;
argin-left: 0px;
background-image: url();
background-color: #FFFFFF;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Group</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<link href="vendor/simple-line-icons/css/simple-line-icons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/stylish-portfolio.min.css" rel="stylesheet">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>
var __adobewebfontsappname__ = "dreamweaver"
</script>
<script src="http://use.edgefonts.net/muli:n4:default.js" type="text/javascript"></script>
</head>
<body marginwidth="200px" id="page-top">
<!-- Navigation -->
<header class="header sticky-top">
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<a class="navbar-brand" href="#"><img src="img/MBGlogo.svg" width="200" height="50" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" style="border-radius:30px">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Get Involved</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Career Fair</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ideation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Jobs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Sponsor</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
</header>
<!-- Header -->
<header class="masthead d-flex">
<div class="container text-center my-auto">
<h6 style="font-size:25px; letter-spacing:2px; color: white">CLUB</h6>
<h1 style="font-size:85px; color:white">Industry</h1>
<pre> </pre>
<a class="btn btn-primary btn-M js-scroll-trigger" href="#get-involved">Get Involved</a>
</div>
<div class="overlay"></div>
</header>
<!-- About -->
<section class="content-section bg-primary text-white text-center" id="about">
<div class="container text-center">
<div class="content-section-heading">
<h2 class="mb-5">Vision</h2>
<h4 style="font-weight:normal">business</h4>
<h4 style="font-weight:normal">careers</h4>
</div>
</div>
</section>
<!-- Portfolio -->
<section class="content-section" id="portfolio">
<div class="container">
<div class="content-section-heading text-center">
<h3 class="text-secondary mb-0">Portfolio</h3>
<h2 class="mb-5">Recent Projects</h2>
</div>
<div class="row no-gutters">
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Stationary</h2>
<p class="mb-0">A yellow pencil with envelopes on a clean, blue backdrop!</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-1.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Ice Cream</h2>
<p class="mb-0">A dark blue background with a colored pencil, a clip, and a tiny ice cream cone!</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-2.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Strawberries</h2>
<p class="mb-0">Strawberries are such a tasty snack, especially with a little sugar on top!</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-3.jpg" alt="">
</a>
</div>
<div class="col-lg-6">
<a class="portfolio-item" href="#">
<span class="caption">
<span class="caption-content">
<h2>Workspace</h2>
<p class="mb-0">A yellow workspace with some scissors, pencils, and other objects.</p>
</span>
</span>
<img class="img-fluid" src="img/portfolio-4.jpg" alt="">
</a>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer text-center">
<div class="container">
<ul class="list-inline mb-5">
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="mailto: bio#gmail.com">
<i class="icon-envelope"></i>
</a>
</li>
<li class="list-inline-item">
<a class="social-link rounded-circle text-white mr-3" href="#">
<i class="icon-social-twitter"></i>
</a>
</li>
</ul>
<p class="text-muted small mb-0">Copyright ©2020</p>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded js-scroll-trigger" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/stylish-portfolio.min.js"></script>
</body>
</html>
You can remove the sticky-top class and just add header{position:sticky;} in css as there is some particular javascript which hides your header after first section.
Add 'fixed-top' in the nav tag
and remove the " sticky-top" from header tag
I'm trying out Angular templates by inserting
<ng-include src=="'menu.html'"></ng-inlude>
directive between header and footer of an "index.html" file. The webpage shows properly in firefox but chrome doesn't show the template. It loads a file named "index.html#" that doesn't exist in my app folder. I have absolutely no idea what happens here and found no similar case in web searches. Thanks for your help!
<!DOCTYPE html>
<html lang="en" ng-app="confusionApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ristorante Con Fusion</title>
<!-- build:css styles/main.css -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="styles/bootstrap-social.css" rel="stylesheet">
<link href="styles/mystyles.css" rel="stylesheet">
<!-- endbuild -->
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#/"><img src="images/logo.png" height=30 width=41></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#/">
<span class="glyphicon glyphicon-home"
aria-hidden="true"></span> Home</a></li>
<li><a href="#/aboutus">
<span class="glyphicon glyphicon-info-sign"
aria-hidden="true"></span> About</a></li>
<li><a href="#/menu">
<span class="glyphicon glyphicon-list-alt"
aria-hidden="true"></span>
Menu</a></li>
<li><a href="#/contactus">
<i class="fa fa-envelope-o"></i> Contact</a></li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row row-header">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines, and create
a unique fusion experience. Our lipsmacking creations will
tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-2">
<p style="padding:20px;"></p>
<img src="images/logo.png" class="img-responsive">
</div>
<div class="col-xs-12 col-sm-2">
</div>
</div>
</div>
</header>
<ng-include src="'dishdetail.html'"></ng-include>
<footer class="row-footer">
<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone"></i>: +852 1234 5678<br>
<i class="fa fa-fax"></i>: +852 8765 4321<br>
<i class="fa fa-envelope"></i>:
<a href="mailto:confusion#food.net">
confusion#food.net</a>
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div class="nav navbar-nav" style="padding: 40px 10px;">
<a class="btn btn-social-icon btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus"></i></a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook"></i></a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin"></i></a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon" href="mailto:"><i class="fa fa-envelope-o"></i></a>
</div>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align=center>© Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- build:js scripts/main.js -->
<script src="../bower_components/angular/angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
<!-- endbuild -->
</body>
</html>
menu.html:
<div class="container">
<div class="row row-content" ng-controller="MenuController">
<div class="col-xs-12">
<button ng-click="toggleDetails()" class="btn btn-xs btn-primary pull-right"
type="button">{{showDetails ? 'Hide Details':'Show Details'}}
</button>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"
ng-class="{active:isSelected(1)}">
<a ng-click="select(1)"
aria-controls="all menu"
role="tab">The Menu</a></li>
<li role="presentation"
ng-class="{active:isSelected(2)}">
<a ng-click="select(2)"
aria-controls="appetizers"
role="tab">Appetizers</a></li>
<li role="presentation"
ng-class="{active:isSelected(3)}">
<a ng-click="select(3)"
aria-controls="mains"
role="tab">Mains</a></li>
<li role="presentation"
ng-class="{active:isSelected(4)}">
<a ng-click="select(4)"
aria-controls="desserts"
role="tab">Desserts</a></li>
</ul>
<div class="tab-content">
<ul class="media-list tab-pane fade in active">
<li class="media" ng-repeat="dish in dishes | filter:filtText">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="{{dish.name}}">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p ng-show="showDetails">{{dish.description}}</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
It may be that angular is appending a # to the end of url strings. This was an older workaround used to prevent non-html5 browsers from sending http requests and reloading the entire page content on single page apps.
But it would be helpful to see your index.html as well as your menu.html files.
If you want to call it as tag you have to add src value
<ng-include src="'menu.html'"></ng-include>
Also, you can add ng-include as attribute:
<div ng-include="'menu.html'"></div>
Good Luck !
I think it is html5mode problem. use $locationProvider.html5Mode(true); in angular config.
The problem was that Chrome etc. don't show local files. You have to either check them with a simple webserver or add --allow-file-access-from-files to the google.exe command. Firefox gives access to local files by default. That's why the templates showed in Firefox.
I'm trying to inherit this bootstrap (https://github.com/almasaeed2010/AdminLTE) from my base.html. I use this form to do it:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Dracoin | Dashboard </title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- bootstrap 3.0.2 -->
<link href="media/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="media/bootstrap/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="media/bootstrap/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Morris chart -->
<link href="media/bootstrap/css/morris/morris.css" rel="stylesheet" type="text/css" />
<!-- jvectormap -->
<link href="media/bootstrap/css/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
<!-- Date Picker -->
<link href="media/bootstrap/css/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
<!-- Daterange picker -->
<link href="media/bootstrap/css/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<!-- bootstrap wysihtml5 - text editor -->
<link href="media/bootstrap/css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="media/bootstrap/css/AdminLTE.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body class="skin-blue">
<!-- header logo: style can be found in header.less -->
<header class="header">
<a href="{% url 'vista_principal' %}" class="logo">
<!-- Add the class icon to your logo image or logo icon to add the margining -->
<img src="img/avatar3.png" class="img-circle"/>
</a>
<!-- Header Navbar: style can be found in header.less -->
{% if user.is_authenticated %}
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar-right">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope"></i>
<span class="label label-success">5</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 5 messages</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- start message -->
<a href="#">
<div class="pull-left">
<img src="img/avatar3.png" class="img-circle" alt="User Image"/>
</div>
<h4>
Support Team
<small><i class="fa fa-clock-o"></i> 5 mins</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li><!-- end message -->
<li>
<a href="#">
<div class="pull-left">
<img src="img/avatar2.png" class="img-circle" alt="user image"/>
</div>
<h4>
AdminLTE Design Team
<small><i class="fa fa-clock-o"></i> 2 hours</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="img/avatar.png" class="img-circle" alt="user image"/>
</div>
<h4>
Developers
<small><i class="fa fa-clock-o"></i> Today</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="img/avatar2.png" class="img-circle" alt="user image"/>
</div>
<h4>
Sales Department
<small><i class="fa fa-clock-o"></i> Yesterday</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="img/avatar.png" class="img-circle" alt="user image"/>
</div>
<h4>
Reviewers
<small><i class="fa fa-clock-o"></i> 2 days</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
</ul>
</li>
<li class="footer">See All Messages</li>
</ul>
</li>
<!-- Notifications: style can be found in dropdown.less -->
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-warning"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 10 notifications</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<a href="#">
<i class="ion ion-ios7-people info"></i> 5 new members joined today
</a>
</li>
<li>
<a href="#">
<i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users warning"></i> 5 new members joined
</a>
</li>
<li>
<a href="#">
<i class="ion ion-ios7-cart success"></i> 25 sales made
</a>
</li>
<li>
<a href="#">
<i class="ion ion-ios7-person danger"></i> You changed your username
</a>
</li>
</ul>
</li>
<li class="footer">View all</li>
</ul>
</li>
<!-- Tasks: style can be found in dropdown.less -->
<li class="dropdown tasks-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-tasks"></i>
<span class="label label-danger">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">You have 9 tasks</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li><!-- Task item -->
<a href="#">
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li><!-- end task item -->
<li><!-- Task item -->
<a href="#">
<h3>
Create a nice theme
<small class="pull-right">40%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">40% Complete</span>
</div>
</div>
</a>
</li><!-- end task item -->
<li><!-- Task item -->
<a href="#">
<h3>
Some task I need to do
<small class="pull-right">60%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">60% Complete</span>
</div>
</div>
</a>
</li><!-- end task item -->
<li><!-- Task item -->
<a href="#">
<h3>
Make beautiful transitions
<small class="pull-right">80%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">80% Complete</span>
</div>
</div>
</a>
</li><!-- end task item -->
</ul>
</li>
<li class="footer">
View all tasks
</li>
</ul>
</li>
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="glyphicon glyphicon-user"></i>
<span>{{user.username}} <i class="caret"></i></span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header bg-light-blue">
{% if user.userprofile.photo %}
<img src="/media/{{user.userprofile.photo}}" width="100px" height="100px"/>
{% endif %}
<p>
{{user.username}} - Standard User
<small>{{user.userprofile.email}}</small>
</p>
</li>
<!-- Menu Body -->
<li class="user-body">
<div class="col-xs-4 text-center">
XXXX
</div>
<div class="col-xs-4 text-center">
Sales
</div>
<div class="col-xs-4 text-center">
XXXX
</div>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
Profile
</div>
<div class="pull-right">
Sign out
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
{% endif %}
</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
<!-- Left side column. contains the logo and sidebar -->
<aside class="left-side sidebar-offcanvas">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
{% if user.is_authenticated %}
<div class="user-panel">
<div class="pull-left image">
<img src="/media/{{user.userprofile.photo}}" class="img-circle" alt="User Image" />
</div>
<div class="pull-left info">
<p>Hello, {{user.username}}</p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search..."/>
<span class="input-group-btn">
<button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
</span>
</div>
</form>
{% endif %}
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="active">
<a href="{% url 'vista_principal' %}">
<i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a>
</li>
<li>
<a href="{% url 'vista_aterrizaje' %}">
<i class="fa fa-th"></i> <span>Landing</span> <small class="badge pull-right bg-green">news</small>
</a>
</li>
{% if user.is_authenticated %}
<li>
<a href="/shop/page/1/">
<i class="fa fa-shopping-cart"></i> <span>Shop</span>
<small class="badge pull-right bg-red">5</small>
</a>
</li>
{% endif %}
<li>
<a href="{% url 'vista_contacto' %}">
<i class="fa fa-comment"></i> <span>Support</span>
</a>
</li>
{% if user.is_authenticated %}
<li>
<a href="{% url 'vista_logout' %}">
<i class="fa fa-sign-in"></i> <span>Sign out</span>
</a>
</li>
{% else %}
<li>
<a href="{% url 'vista_login' %}">
<i class="fa fa-sign-in"></i> <span>Sign in</span>
</a>
</li>
{% endif %}
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- Right side column. Contains the navbar and content of the page -->
<aside class="right-side">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Dashboard
<small>Control panel</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Dashboard</li>
</ol>
</section>
<!-- Main content -->
{% block content %}
{% endblock %}
<!-- /.content -->
</aside><!-- /.right-side -->
</div><!-- ./wrapper -->
<!-- add new calendar event modal -->
<!-- jQuery 2.0.2 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<!-- jQuery UI 1.10.3 -->
<script src="media/bootstrap/js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="media/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Morris.js charts -->
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="media/bootstrap/js/plugins/morris/morris.min.js" type="text/javascript"></script>
<!-- Sparkline -->
<script src="media/bootstrap/js/plugins/sparkline/jquery.sparkline.min.js" type="text/javascript"></script>
<!-- jvectormap -->
<script src="media/bootstrap/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js" type="text/javascript"></script>
<script src="media/bootstrap/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js" type="text/javascript"></script>
<!-- jQuery Knob Chart -->
<script src="media/bootstrap/js/plugins/jqueryKnob/jquery.knob.js" type="text/javascript"></script>
<!-- daterangepicker -->
<script src="media/bootstrap/js/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
<!-- datepicker -->
<script src="media/bootstrap/js/plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="media/bootstrap/js/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>
<!-- iCheck -->
<script src="media/bootstrap/js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
<!-- AdminLTE App -->
<script src="media/bootstrap/js/AdminLTE/app.js" type="text/javascript"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="media/bootstrap/js/AdminLTE/dashboard.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<script src="media/bootstrap/js/AdminLTE/demo.js" type="text/javascript"></script>
</body>
</html>
My problem is only index.html display all heritage from base but my other pages (shop.html, contacto.html, landing.html) appear only with inherited content from base.html, the pages appear without any style.
I'm trying to find the mistake but i can't conceive...
I was trying using other styles from this page (http://getbootstrap.com/getting-started/) and heritage run perfectly in all pages. why my other bootstrap doesn't work? I'd have liked that my bootstrap run in all pages.
apologizeme in advance my extensive question and if I overlook something.
Thanks!!
You should use absolute paths for all of your assets:
<link href="/media/bootstrap/css/bootstrap.min.css" ...
(note the leading slash).
Even better, you should use the static tags to generate the locations automatically, according to your STATIC_URL setting:
{% load static %}
...
<link href="{% static "bootstrap/css/bootstrap.min.css" %}" ...
I am designing a web page and one of my link is not working...its even not working as a link..just looking like plain text...This is my code:
<
<a href="index.jsp" class="classname1" > > </a>
My url of link is correct if I place this anchor tag somewhere else in code the link works..but here it doesn't .I am new to web designing and don't know what is the error?Any IDEAs?
This is my full code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="ico/E-Mail.ico">
<title>Mail Detective</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/dashboard.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="css/hover.css" rel="stylesheet">
<link href="css/button.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
a, u {
text-decoration: none;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.jsp">Mail Detective</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>E-Mails</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right" action="Search.jsp" method="get">
<input type="text" class="form-control" placeholder="Search..." name="search">
<!-- a href="index.jsp"><input type="submit" value=login style="color: transparent; background-color: transparent; border-color: transparent; cursor: default;"></a-->
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Inbox</li>
<li>Starred</li>
<li>Spam</li>
<li>Sentmail</li>
<li>Drafts</li>
<li>Trash</li>
<li>All</li>
</ul>
</div>
<% int value=Integer.parseInt(request.getParameter("item"));%>
<a href="index.jsp" class="classname" style=" margin-top:50px;margin-left:1130px";> < </a>
<a href="index.jsp" class="classname1" > > </a>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="margin-top:-60px">
<h1 class="page-header">E-Mails</h1>
<!--<div class="row placeholders">
</div>!-->
<!--<h2 class="sub-header"></h2>-->
<!--NOTIFICATION STARTS-->
<div class="col-lg-4" style="margin-left:850px">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bell fa-fw"></i> Notifications Panel
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="list-group">
<a href="#" class="list-group-item">
<i class="fa fa-comment fa-fw"></i> New Comment
<span class="pull-right text-muted small"><em>4 minutes ago</em>
</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-twitter fa-fw"></i> 3 New Followers
<span class="pull-right text-muted small"><em>12 minutes ago</em>
</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-envelope fa-fw"></i> Message Sent
<span class="pull-right text-muted small"><em>27 minutes ago</em>
</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-tasks fa-fw"></i> New Task
<span class="pull-right text-muted small"><em>43 minutes ago</em>
</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-upload fa-fw"></i> Server Rebooted
<span class="pull-right text-muted small"><em>11:32 AM</em>
</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-bolt fa-fw"></i> Server Crashed!
<span class="pull-right text-muted small"><em>11:13 AM</em>
</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-warning fa-fw"></i> Server Not Responding
<span class="pull-right text-muted small"><em>10:57 AM</em>
</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-shopping-cart fa-fw"></i> New Order Placed
<span class="pull-right text-muted small"><em>9:49 AM</em>
</span>
</a>
<a href="#" class="list-group-item">
<i class="fa fa-money fa-fw"></i> Payment Received
<span class="pull-right text-muted small"><em>Yesterday</em>
</span>
</a>
</div>
<!-- /.list-group -->
View All Alerts
</div>
<!-- /.panel-body -->
</div>
<!--NOTIFICATION ENDS-->
<div class="table-responsive" style="margin-top:-530px;margin-left:-900px;font-size:15px;width:900px;background-color: #f5f5f5">
<table class="table table-striped">
<%# page import="check.test4query" %>
<% test4query demo = new test4query();
//out.println(value);
test4query dem = new test4query();
test4query de = new test4query();
test4query d = new test4query();
String[] id =new String[30];
String[] dat =new String[30];
String[] nam =new String[30];
String[] mailid =new String[30];
int i;
demo.mai("SELECT ?x WHERE { ?y <FOLDERNAME:> 'inbox' . ?y <SUB:> ?x} LIMIT 30 OFFSET"+value);
for(i=0;i<30;i++)
{ id[i]=test4query.arr[i];
id[i] = id[i].substring(0, Math.min(id[i].length(), 100));
}
dem.mai("SELECT ?x WHERE { ?y <FOLDERNAME:> 'inbox' . ?y <DATE:> ?x} LIMIT 30 OFFSET"+value);
for(i=0;i<30;i++)
{ dat[i]=test4query.arr[i];
dat[i] = dat[i].substring(0, Math.min(dat[i].length(), 19));
}
de.mai("SELECT ?x WHERE { ?y <FOLDERNAME:> 'inbox' . ?y <SENDERNAME:> ?x} LIMIT 30 OFFSET"+value);
for(i=0;i<30;i++)
{ nam[i]=test4query.arr[i];
nam[i] = nam[i].substring(0, Math.min(nam[i].length(), 16));
}
demo.mai("SELECT ?x WHERE { ?y <FOLDERNAME:> 'inbox' . ?y <MESSAGEID:> ?x} LIMIT 30 OFFSET"+value);
for(i=0;i<30;i++)
{ mailid[i]=test4query.arr[i];
//mailid[i] = mailid[i].substring(0, Math.min(id[i].length(), 100));
}
for(i=0;i<30;i++)
{ //id[i]=test4query.arr[i];
out.println("<tr height='5'><td width='120'style='font-size:15px'>"+nam[i]+"</td><td width='400'>"+"<a href='final.jsp?itemId="+mailid[i]+"' class='button grow' style=' text-decoration: none; color:black;font-size:15px;'>"+"    "+id[i]+"<hr style='border-color:#E6E6E6;padding:0px;margin:0px'>"+"</a>"+"</td><td width='90' style='font-size:12px'>"+""+dat[i]+"</td>"+"</tr>");
}i--;
%>
</table>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
</body>
</html>
maybe you forgot an semicolon after margin-left:1130px;
Hope this could help
Try this..
Use instead < for < and > for >
I use your HTML code also
<
<a href="index.jsp" class="classname1" > > </a>
It is also working... If it is not redirecting at proper place it means your path in href is incorrect.
Use chrome developer tools to find out why.
Open the page in Chrome browser.
Press the F12 key.
Click on the Magnifying glass icon and click on the Link you want to investigate.
Look at the properties in the right panel to find the problem.
The basic point is that using CSS you can make links look like normal text. If you want to find out where this style is written you can use the developer tools as I've mentioned.