I am using express-handlebars in my node.js project. I have included CSS and JS files in the <head> section of my handlebars layout. The problem is, the CSS only gets applied to the <head> part of the code and NOT to the <body>. If I link the CSS within the body tags of the layout file, it still doesn't work. The only way I can get it to come out right is if I link the CSS in each "body" file that gets inserted into the layout. I am using bootstrap if that matters.
I'm somewhat new to using handlebars but I can't find anything like this online, so hopefully someone here knows what the issue is.
Here is my layout.handlebars file:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="/css/main.css"/>
<title>Website</title>
</head>
<body>
<div className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<button type="button" className="navbar-toggle"
data-toggle="collapse" data-target="#my-navbar">
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand" href="/"> Home </a>
</div>
<div id="my-navbar" className="collapse navbar-collapse">
<ul className="nav navbar-nav" role="tablist">
<li> <a href="messenger"> Messenger </a> </li>
<li> <a href="contact"> Contact </a> </li>
</ul>
<ul className="nav navbar-nav navbar-right" role="tablist">
<li > <a href="login"> Login </a> </li>
<li > <a href="register"> Register </a> </li>
</ul>
</div>
</div>
</div>
}
</body>
</html>
And here is the "body" handlebars file:
<div className="container-fluid welcome-msg">
<p>
Welcome.
</p>
</div>
Basically, what I want is to link the CSS files in the layout and have it applied to ALL the content. I do know the CSS is loaded because it is changing the font and background color, so its not a problem with the path. Thanks in advanced.
If you need me to explain this better please let me know.
via drewpel
No comments:
Post a Comment