Let me start with file management. So, there is a main.js and a main.css, both of them having the styles all the HTML Pages have. Now, there are HTML Pages inside child folders, so the directory looks like this:
/The Project
/main.js
/main.css
/Home
/index.html
/styles.css
/Study
/index.html
/styles.css
/scripts.js
When I run the HTML files as a file in the browser, it works perfectly. However, when I run it using python3 -m http.server, it does not link the CSS and JS files that are in the parent directory.
Thank you for answering in advanced!
Home/index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Plompy</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="../main.css">
<script src="../main.js"></script>
</head>
<body style="overflow-x: hidden;">
<div class="nav"><li class="options">Home</li><li class="options">Study</li><li class="options">Discussion</li><li class="options">About</li><li class="options" style="color: rgb(66, 174, 213);">Sign Up!</li></div>
<div class="content">
<h1 class="title">Pompy - The Future of Creatures</h1>
<img src="academicean.png" alt="Academicean Logo" style="float:right;width:400px;height:400px">
<h2 class="body">HAHAHA LOL</h2>
<h1 class="title">Contact Us:</h1>
</div>
<div class="footer">
<h4 class="body">Best experiences may be with a computer, or laptop. Although compatible with other devices such as the hand held phone, not that the experience won't be as smooth as with a laptop.</h4>
</div>
</body>
</html>
Study/index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - Academicean</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="../main.css">
<script src="../main.js"></script>
</head>
<body style="overflow-x: hidden;">
<div class="nav"><li class="options">Home</li><li class="options">Study</li><li class="options">Discussion</li><li class="options">About</li><li class="options" style="color: rgb(66, 174, 213);">Sign Up!</li></div>
<div class="content">
<h1 class="title">Academicean - The Future of Reviewers</h1>
<img src="academicean.png" alt="Academicean Logo" style="float:right;width:400px;height:400px">
<h2 class="body">Academicean, which is the combination of Academic and Ocean, provides much resources to study or to review a topic. Whether thats Mathematics, English, Sciences or any of your academic subjects, you may review for it RIGHT HERE! There will also be a comment section, where you may gather some more opinions about a certain topic, and ask some questions if confused. So what are you waiting for? Log in or Sign up to be able to get started!</h2>
<h1 class="title">Contact Us:</h1>
</div>
<div class="footer">
<h4 class="body">Best experiences may be with a computer, or laptop. Although compatible with other devices such as the hand held phone, not that the experience won't be as smooth as with a laptop.</h4>
</div>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Study - POmpley</title>
<link rel="stylesheet" href="../main.css">
<link rel="stylesheet" href="styles.css">
<script src="../main.js"></script>
</head>
<body>
<div class="nav"><li class="options">Home</li><li class="options">Study</li><li class="options">Discussion</li><li class="options">About</li><li class="options" style="color: rgb(66, 174, 213);">Sign Up!</li></div>
<div class="container">
<h1 class="title">GOogle LOL</h1>
<div class="search">
<input type="text" id="searchbar" onfocus="change_note()">
<h2 id="note">Type something to search</h2>
</div>
</div>
</body>
<script src="scripts.js"></script>
</html>
Related
lately I've been having a problem, where I try to open my html file in any browser but it doesn't display and it's stuck in a state of loading, i've tried opening another html file and putting the same code but it doesn't display. I suspect it's a problem with the 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.0">
<link rel="stylesheet" type="text/css" href="learn.css" />
<script src="learn.js"></script>
<link rel="icon" href="data:image/png;base64,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">
<title>Jordan Jana</title>
</head>
<body id="b0dy">
<nav class="crumble">
<ol class="crumb">
<button class="butt" style="color: #64ffda;">
<a style="text-decoration: none" href="me.html">About me</a>
</button>
</ol>
</nav class="nav">
<p id="potsu">
Hi, I'm
</p>
<br>
<div id="para"><p>Jordan</p>
</div>
<div id="surname"><p>Jana</p></div>
<div id="me"><p>I love making stuff(online not in real life)<br>
I'm currently learning Web Development and a bit of bash on the side.<br>
I also have a Github,Twitter,
and discord(senpai-kun#3773) where I'm most active and you're more likely to reach me</p></div>
<div id="and"><p>And</p></div>
</body>
</html>
I've tried changing browsers and changing some of the code but the problem persists
I Checked your code in multiple browsers it is working fine, Try to refresh the webpage by CTRL+F5. if issue still persists then there is an issue with your javascript.
and also don't use classes on endings of tags like you did with
</nav class="nav">
In this tutorial:
https://www.youtube.com/watch?v=Zz6eOVaaelI
They say to hit a button on the bottom of the window (I have, 'Live Sass Compiler,' downloaded) and that would make a CSS file that VSCode compiles my SCSS to.
Which, it does not seem to be doing; here's the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="stylesheet" href="style.scss"/>
<title>Sassy</title>
</head>
<body>
<header>
<h1>Hello!</h1>
<button>Hello--again!</button>
</header>
<div class="contact">
<button>Submit</button>
<div class="info">
<h1>Our contact info</h1>
<p>This is our info</p>
</div>
</div>
</body>
</html>
Here is the SASS:
header {
background: lightblue;
};
However, when I open a live server, the background does not appear light blue; just basic white.
Lastly, my differs from the video as I just put the HTML and the SASS file in the same folder.
<link rel="stylesheet" href="style.scss"/>
You need to link the actual .css file that's compiled from your .scss file. Sass files themselves cannot be used as the stylesheet for your page.
<link rel="stylesheet" href="style.css"/>
I hosted a site on Github pages, and the material icons are not showing. The issue is that they are showing when I launch the index.html page from my browser (instead of going to the hosted page).
Here's the html for this part:
<head>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div class="row">
<div class="col s12 m6">
<div class="card">
<div class="card-content blue-text text-darken-2">
<span class="card-title">Olivier Grech</span>
<p>Text</p>
<div><i class="material-icons">phone</i><em>Phone</em></div>
<div><i class="material-icons">email</i><em>mail</em></div>
</div>
</div>
</div>
<!--Rest of the page-->
Replace http with https and it will work:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
If you open your developer tools(right click anywhere and click inspect, then go to the console), it would tell you whats wrong. In this case you were accessing the github page over https but were trying to load the font using http which is not considered safe and was blocked by the browser.
Hi I'm new in using Polymer.js and I'm building my HTML custom tags in order to reuse them in my front-end work. The problem is that when I try to open my index.html in Safari and Firefox I see the only HTML without all the CSS. In Chrome everything works perfectly. I can't understand why it happens.
I use Polymer 1.0.0 and Firefox and Safari are in their latest versions.
Any suggestions?
Thank you all in advance.
Here is the code (As you notice I've included the webcomponents-lite.min.js):
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<title>Polymer Project</title>
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="app/components/pd-dashboard/dashboard-articles.html" />
<div class="row">
<dashboard-articles> </dashboard-articles>
</div>
<div class="col-sm-2"></div>
</div>
</html>
dashboard-articles.html:
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="import" href="../../components/articles/article-2col/article-2col.html">
<link rel="import" href="../../components/articles/article-1col/article-1col.html">
<link rel="stylesheet" type="css/text" href="../../components/pd-dashboard/dashboard-articles.css" />
<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Dosis:800,600,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Nunito:400,700' rel='stylesheet' type='text/css'>
<script src="../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<dom-module id="dashboard-articles">
<template>
<div class="container-fluid">
<div class="row" style="margin: 5px">
</div>
<div class="row">
<hr>
<div class="row">
<div class="col-sm-5">
<article-1col></article-1col>
</div>
<div class="col-sm-7">
</div>
</div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: "dashboard-articles"
});
</script>
Problem solved!
The <link> to the .css file must be inside the tag <template> in each component you create!
Hello friends i have created two page one is index.html and second is about.html . I just want to add back button on about.html using jQuery mobile . i have tried it but back button is not working in my code i dont know what is the problem
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="data-add-back-btn ">Back</div>
<div><h1>Page title</h1>
About us</div>
</div>
</body>
</html>
Please help me. Thanks in advance...
You may try creating your back button by using data-rel="back" as follows:
<a data-role="button" data-rel="back">Back</a>
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<a data-role="button" data-rel="back">Back</a>
<div>
<h1>Page title</h1>
About us
</div>
</div>
</body>
</html>
Check the section "Back" button links of the online doc for more information: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html