I am facing an issue with the styling of my JSP page. When I link the external style sheet using this code:
<link rel="stylesheet" type="text/css" href="/doctor/css/form_input.css" />
it seems to have no effect on the appearance of my page. However, if I directly include the same styles in the HTML heading, it works perfectly fine. Here is how my directory structure looks like:
|--web
|----doctor
|-------------css
|---------------------form_input.css
|-------------view
|---------------------view.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/doctor/css/form_input.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<form action="/changeLanguage">
<select id="language" name="language" onchange="submit()" style="margin-left: 50px">
<option value="en" ${language == 'en' ? 'selected' : ''}>English</option>
<option value="ru" ${language == 'ru' ? 'selected' : ''}>Русский</option>
<option value="es" ${language == 'es' ? 'selected' : ''}>Español</option>
</select>
</form>
<ex:info-time/>
<div id="tabs">
<div class="container">
<ul class="nav nav-tabs">
<li><a href="#tabs-1"><fmt:message key="login.button.submit"></fmt:message></a></li>
<li><a href="#tabs-2">Register </a></li>
</ul>
<div id="tabs-1">
<div class="account-status">
<form method="post" action="account">
<fieldset>
<label class="form-label" for="username"><fmt:message key="login.label.username" />: </label>
<input type="text" class="form-control form-input" name="username" id="username" placeholder="Login">
</fieldset>
<fieldset>
<label class="form-label" for="password"><fmt:message key="login.label.password"></fmt:message> </label>
<input type="password" class="form-control form-input" name="password" id="password" placeholder="Password">
<input type="submit" class="btn btn-primary form-button" value="Login">
</fieldset>
</form>
</div>
</div>
<div id="tabs-2">
<div class="account-status">
<form method="post" action="account?action=register">
<fieldset>
<label for="username_register" class="form-label"><fmt:message key="login.label.username"></fmt:message> </label>
<input type="text" name="username_register" id="username_register" class="form-control form-input">
</fieldset>
<fieldset>
<label for="password_register" class="form-label"><fmt:message key="login.label.password"></fmt:message> </label>
<input type="password" name="password_register" id="password_register" class="form-control form-input">
</fieldset>
..etc
<fieldset>
<input type="submit" class="btn btn-primary form-button" value="Register">
</fieldset>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
UPDATE
After changing the href to the following piece of code:
href="${pageContext.request.contextPath}css/form_input.css"
When inspecting the page (F12), it shows me the error message below:
GET http://localhost:8086/doctor/css/form_input.css 404 NOT FOUND account:14