I'm trying to create a navbar that will appear on every page, by using ng-include to reference it. The navbar works by itself, but for some reason it isn't showing up on the page(s) that I am trying to ng-include it on (for example, the dashboard). I am not using bootstrap because I'm trying to do it from scratch, for learning purposes. I feel like I'm possibly not understanding how AngularJS works?
Here is the code I have so far:
dashboard.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel='stylesheet' href='dashboard.css'>
<title>Dashboard</title>
</head>
<body ng-app='MyApp'>
<nav class="navbar"><div ng-include src="'navbar.html'"></div><p>Hi!</p></nav>
<div class='dashboard'>
Here be contents
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
navbar.html:
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<link rel='stylesheet' href="navbar.css">
</head>
<body ng-app='MyApp'>
<nav class='navbar'>
<ul>
<li>Home</li>
<li>Temp</li>
</ul>
</nav>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
navbar.css:
.navbar {
font-family: Arial, sans-serif;
font-size: .9em;
}
.navbar ul {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
background-color: lightslategray;
position: fixed;
top: 0;
width: 100%;
}
.navbar li {
float: left;
}
.navbar a {
display: block;
text-decoration: none;
cursor: pointer;
padding: 14px 16px;
text-align: center;
background-color:lightslategray;
color: white;
}
.navbar a:hover {
background-color: darkslategrey;
}
.active {
}
Your navbar template shouldn't be an entirely new HTML page. You are just injecting markup, so that file should include code as it would be written.
navbar.html should ONLY consist of
<nav class='navbar'>
<ul>
<li>Home</li>
<li>Temp</li>
</ul>
</nav>
Try removing the single quotes around navbar.html and also make sure that navbar.html exists in the same directory as dashboard.html. If it's in a different directory, you must specify.
First, ng-include must only have the code you need in that part, for example just <nav> </nav> tag.
Second, because you didn't add navbar.css on dashboard.html that is the reason why the navbar doesn't show.
Related
I'm trying to import an markdown file into an HTML.
I've used the iframe tag to do so but it is shortening the content inside a box.
As I'm using markdown to write the text thats going inside the main tag, so my intention is that it keeps the height of the text in markdow.
I also used the lib https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js but it didn't worked.
And a common import, and it didnt work it either.
The codes are the following:
HTML
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<!-- CSS styles -->
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/fontawesome.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/solid.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/brands.min.css"/>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" />
<!-- Javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js" integrity="sha512-dnvR4Aebv5bAtJxDunq3eE8puKAJrY9GBJYl9GC6lTOEC76s1dbDfJFcL9GyzpaDW4vlI/UjR8sKbc1j6Ynx6w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Lightweight client-side loader that feature-detects and load polyfills only when necessary -->
<script src="https://cdn.jsdelivr.net/npm/#webcomponents/webcomponentsjs#2/webcomponents-loader.min.js"></script>
<!-- Load the element definition -->
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md#1/src/zero-md.min.js"></script>
<script type="module" src="javascript.js"></script>
<!-- Simply set the `src` attribute to your MD file and win -->
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.js"></script>
<title></title>
</head>
<body>
<header>Header</header>
<aside>
<div id="mySidenav" class="sidenav">
<p>nav bar</p>
</div>
<aside>
<main>
<!-- include my markdown file here -->
<!-- try 1 -->
<link href="mkd.md" rel="import" />
<!-- try 2 -->
<pre class="hljs"><code>
<link class="hljs rel="import" href="mkd.md">
</code></pre>
<!-- try 3-->
<div w3-include-html="mkd.md"></div>
</main>
<footer>Footer</footer>
</body>
</html>
CSS:
header{
background-color: #000000;
padding-left: 4%;
padding-top: 1%;
padding-bottom: 1%;
margin-top: -0.001%;
}
main{
padding-left: 4%;
max-width: 86%; // set maximum width of the container
white-space: wrap; // do not let text wrap
overflow: hidden; // do not let overflow out of container
text-overflow: ellipsis; // shorten all overflowing text
}
body, html,main {
height:100%;
width:100%;
}
iframe {
height:100%;
width:100%;
background:cyan;}
#mySidenav a {
position: fixed;
left: -230px;
transition: 0.3s;
padding: 15px;
width: 270px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 0 5px 5px 0;
margin:0;
padding-top: 0;
padding-bottom: 0;
}
And I used a markdown available at https://markdown-it.github.io/
All the solutions I've found it I had to install a package, is there a way to do it just importing it ?
Edited:
There is a scroll bar and if I remove it doesn't show the whole content, and the markdown is plain, it not enhanced, as it should be since I'm using <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.js"></script>
Thanks you all guys!
I have been trying to place my Menu Div above my background, and it is failing to appear at all. Even in inspect element nothing appears when I try to show where the div is. I have already tried z-index and position relative/absolute/fixed.
I am trying to make a landing page for my website and have been stuck up on this for a long time now. I have tried rearranging the order of the Menu Div in front of the
This is My HTML Code
.body{
margin: 0;
padding: 0;
height: 100%;
}
.menu_top{
background-color: #ffffff;
position: relative;
top: 0;
width: 100%;
height: 100;
z-index: 5;
}
.home_logo_box{
z-index: 5;
}
.home_logo{
top: 30%;
position: absolute;
left: 42%;
}
<html>
<head>
<title>
Home
</title>
<meta charset="utf-8">
<link rel="stylesheet" href="coincontrast_home.css">
<link rel="stylesheet"; style="text/css" href="style.css">
</head>
<body>
<div src="particles">
<div id="particles-js"></div>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
</div>
<div src="menu_top">
<img src="https://image.flaticon.com/icons/png/128/33/33447.png" class="home_logo">
</div>
<div class="home_logo_box">
<img src="https://image.flaticon.com/icons/png/128/87/87386.png" class="home_logo">
</div>
</body>
</html>
There are no error messages
Your issue is because you are not giving the div elements an id or class.
<div src="menu_top">
Should actually be:
<div class="menu_top">
This means that it will also line up with your CSS. If you wanted to change the div element to an id it would look like this:
<div id="menu_top">
And you need to change your CSS from: .menu_top to #menu_top.
Also, as Thomas Byy said, you should move your <script> tags to outside of the <body> element, they could be moved to the <head> element or just before the closing </html> element.
This will help you
.body{
margin: 0;
padding: 0;
height: 100%;
}
#menu_top{
background-color: #ffffff;
position: relative;
top: 0;
width: 100%;
height: 100;
z-index: 5;
}
.home_logo_box{
z-index: 5;
}
.home_logo{
position: relative;
bottom:0;
left: 42%;
}
<html>
<head>
<title>
Home
</title>
<meta charset="utf-8">
<link rel="stylesheet" href="coincontrast_home.css">
<link rel="stylesheet"; style="text/css" href="style.css">
</head>
<body>
<div src="particles">
<div id="particles-js"></div>
<script type="text/javascript" src="particles.js"></script>
<script type="text/javascript" src="app.js"></script>
</div>
<div id="menu_top">
<img src="https://image.flaticon.com/icons/png/128/33/33447.png" class="home_logo">
</div>
<div class="home_logo_box">
<img src="https://image.flaticon.com/icons/png/128/87/87386.png" class="home_logo">
</div>
</body>
</html>
I think you shutdown your computer to solve that problem. Hehehe sorry just kidding, I think JackU was right when you name a class you should use a class element so that we you go to your css files you can easily call it. Because in your situation you didn't declare menu_top as a class name, Unfortunately, you make your menu top as a link or source from.
I would like to style a language select button for my website. This is the design of what it should look like:
I am using Bootstrap 3.
How can I achieve that? Any help is appreciated!
EDIT
Solved it by creating a custom dropdown using css+jquery, see the result below.
There were many useless comments and downvotes. Useless comments should have downvote option as well.
At least giving some advice would have been helpful.
But anyway, got my problem sorted.
<!DOCTYPE html>
<html>
<head>
<title>Custom dropdown</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled Bootstrap JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Google font -->
<link href="https://fonts.googleapis.com/css?family=Raleway|Rancho" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
/* Custom dropdown */
.custom-sel a {
text-decoration: none;
text-transform: uppercase;
margin: 0;
padding: 10px;
text-align: left;
font-family: Raleway;
color: #546e7a;
font-size: 15px;
font-weight: 700;
line-height: 24px;
display: block;
}
.custom-sel a:hover {
text-decoration: none;
background-color: #EDF0F2;
color: #ffffff;
}
.custom-sel a.selected {
background-color: transparent;
}
.custom-sel a.selected:hover {
background-color: transparent;
color: #546e7a;
}
.hidden {
display: none;
}
.lightblue {
color:#03a9f4;
margin-left: -4px;
}
.show-sel {
background-color: #ffffff;
box-shadow: -5px 0px 65px 0px rgba(0, 0, 0, 0.18);
}
.custom-sel {
margin: 30px;
display: inline-block;
}
/* Custom dropdown */
</style>
<script type="text/javascript">
$(document).ready(function () {
// Show dropdown
$('.selected').click(function () {
$('.custom-sel').addClass('show-sel');
$('.custom-sel a').removeClass('hidden');
});
// Hide dropdown when not focused
$('.custom-sel').focusout(function () {
$('.custom-sel').removeClass('show-sel');
$('.custom-sel a:not(:first)').addClass('hidden');
}).blur(function () {
$('.custom-sel').removeClass('show-sel');
$('.custom-sel a:not(:first)').addClass('hidden');
});
});
</script>
</head>
<body>
<div class="container">
<!-- Custom dropdown -->
<div class="custom-sel">
<a class="selected" href="#">ENG <i class="fa fa-caret-down lightblue" aria-hidden="true"></i></a>
<a class="hidden" href="#">EST</a>
<a class="hidden" href="#">RUS</a>
<a class="hidden" href="#">FIN</a>
</div>
</div>
</body>
</html>
Here's the result I'm currently happy with:
https://jsfiddle.net/manb0hzh/
I am trying to add a custom font in CSS but it does not work.
My HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shout!</title>
<meta name="author" content="Jordan Baron">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div>
<img src=images/logo.png alt="logo" height="54" wdth="133" class="logo">
<hr class="divider">
<h1 id="wis">Shout!</h1>
</div>
<script src="scripts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"> </script>
</body>
</html>
My CSS:
#font-face {
font-family: SanFran;
src: url(SF-UI-Display-Thin.otf);
}
div {
text-align: center;
}
.divider {
margin: 0;
padding: 5px;
}
.logo {
margin: 0;
padding: 5px;
}
.wis {
font-family: SanFran;
}
I am using Bootstrap 3 on Mac OS X. I am using Chrome.
The font changes when I don't use Bootstrap but when I do use Bootstrap the font doesn't change
It won't change because you're using an ID on your <h1> but you're trying to target a class of .wis instead of an ID of #wis.
Try changing
.wis {
font-family: SanFran;
}
to
#wis {
font-family: SanFran;
}
This question already has answers here:
How to import Google Web Font in CSS file?
(13 answers)
Closed 6 years ago.
I was working on an html page, got halfway through, and decided to start styling somethings. . . All of my styling worked fine! That is until I tried to get a Google Font. I followed all of the instructions and inserted everything into css correctly. However, when I view the page on Chrome, it only displays the "fallback" generic sans-serif font. Here is my css:
#page-first-open {
border: 1px solid black;
width: 1000px;
height: 500px;
text-align: center;
margin: auto;
position: relative;
top: 50px;
}
#import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open p {
font-size: ;
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
Could someone please tell me what I am doing wrong (If I a doing it wrong), or point me in the right direction of getting it to work?
Try to put your import on the top of your file, before any declaration.
Include the #import directive at the top of the file.
#import url(https://fonts.googleapis.com/css?family=Raleway);
#page-first-open {
border: 1px solid black;
width: 1000px;
height: 500px;
text-align: center;
margin: auto;
position: relative;
top: 50px;
}
#page-first-open p {
font-size: ;
font-family: 'Raleway', sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
You can remove:
#import url(https://fonts.googleapis.com/css?family=Raleway);
And add:
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
To your <head>. Like so:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<script>
</script>
<title>User Test</title>
</head>
<body>
<div id="wrapper">
<div id="page-first-open">
<p>Hello, and welcome to this page. . .<br>
If you don't mind me asking, <br>
What is your name (or what you'd like to be called)?</p>
</div>
</div>
</body>
</html>
Try to add the following in the head section of your html code and see if it fixed the problem:
<meta charset="UTF-8">
In addition, you need to move the #import to the top of the CSS file, so the font will load