CSS not getting included in sub directories

I have the following directory structure:enter image description here

I have put up a header which is going to come across all my webpages and the content is in header.html.

header.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8"></meta>
  <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/custom_styles.css"></link>

    <script>     
    $(document).ready(function() 
    {
        var pathname = this.location.pathname;

        if( pathname.indexOf( 'index' ) > -1 )
        {
           $("#homepage").addClass( "active" );
        }
        else if( pathname.indexOf( 'java_archive' ) > -1 ) )
        {
            $("#javapage").addClass( "active");
        }

    });
    </script>
</head>
<body>

<nav class="navbar navbar-inverse navbar-static-top"> <!-- PavanD: navbar-static-top helps in removing the rounded navbar.-->
  <div class="container-fluid" style="background-color:#5F5F5F;"> <!--505050 can also be considered -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
    <div id=headerEntries class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li id="homepage"><a href="index.html"><span class="glyphicon glyphicon-home"></span></a></li>
        <li><a href="#">CONCEPTS</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">C++</a></li>
        <li id="javapage"><a href="java_archives/index.html">JAVA</a></li>
        <li><a href="#">ORACLE</a></li>
        <li><a href="#">DATA STRUCTURES</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">REACH US</a></li>          
        <li><a href="about.html">ABOUT</a></li>
        </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>
      </ul>
    </div>
  </div>
</nav>

</body>
</html>

My index.html looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Programming Pages</title>
    <meta charset="utf-8"></meta>
  <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/custom_styles.css"></link>
    <script> 
    $(function(){
      $("#headerContent").load("header.html"); 
    });
    </script> 
</head>

<body>
<div id="headerContent"></div>

<div class="container"> <!-- PavanD: Evaluate between container-fluid and container.-->
  <div class="row">
    <div class="col-sm-12 img-rounded" style="background-color:#F1F1F1;">
        <!-- PavanD: img-rounded helps in rounding the intro information -->

<h3 class="text-center">Welcome to the site!</h3>

<p>Getting placed into an established Software Company during Campus Recruitments is the dream of most Engineering students. All it needs is demonstrating technical expertise related to Computer Programming.</p>

<p>Computer Programming is a promising area and has great scope for opportunities. It is often misunderstood as being quite difficult. This is especially true for students who are not
from Computer Science or Information Technology braches. Also, students from Computer Science or Information Technology tend to stick to the programmes which they have had in their programming lab and Engineering curriculum itself is a bit hectic that most do not find time or guidance
to explore these areas. Moreover, there can be multiple solutions to the same problem. All these are very simple yet important things that ultimately help a student in building his technical expertise.</p>

<p>The content of this website is written taking into consideration the above fact. This wesite helps students receive programming guidance in an unorthodox way which is more closer to a students perspective and thus helps the student grasp the concept instead of having to by-heart it.</p>

<p>As it stands now, the website has two broad categories. 
        <li><b>BEGINNERS</b></li><li><b>INTERMEDIATE</b></li></p>        
<p>Students can always post their questions by visting the Reach Me page.</p>

<p class="text-right">Happy Programming,</p>
<p class="text-right">Webmaster.</p>

    </div>
  </div>
</div>    


</body>
</html>

My java_archives/index.html looks like this:

<!DOCTYPE html>
<html>
  <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script> 
    $(function(){
      $("#headerContent").load("../header.html"); 
    });
    </script> 
  </head> 
  <body> 
     <div id="headerContent"></div>
      <p>Reached Java Page!.</p>
  </body> 
</html>

I am noticing a difference in the way the header gets rendered in the root/index.html and the root/java_archives/index.html. The difference that I want to convey can be observed in the below screen shot:

enter image description here

Basically, I feel that my css in css folder is not getting picked during the evaluation at java_archives/index.html

My root/css/custom_styles.css looks like this:

.navbar-inverse .navbar-nav{

}

.navbar-inverse .navbar-nav > li > a {
    font-family: sans-serif;
  color: #ffffff; /* PavanD: This is the color of the elements when they load. */
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
  background-color: #000000; /* PavanD: When you click the top menu items, they have to be rendered in black.*/
    color: #ffffff; /* PavanD: This is the color of the elements when they are clicked. We want it to be white so this.*/
}

.navbar.navbar-inverse .navbar-nav > .active,
.navbar.navbar-inverse .navbar-nav > .active > a,
.navbar.navbar-inverse .navbar-nav > .active > a:hover,
.navbar.navbar-inverse .navbar-nav > .active > a:focus {
  background-color: #8AC007;
  color: #FFF;
}

li{
    font-family:"Segoe UI",Arial,sans-serif;font-weight:normal;
}

.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;}
.navbar {min-height:40px !important}

Is there something that I am missing here?. I am fairly new to CSS and so any inputs would be helpful.

Thanks,
Pavan.


Source: css

Leave a Reply