I am making a static site in Github, but when I try to load the site, the CSS page is not loading up. I looked up many solutions like these -
CSS not loading for GitHub pages
&
How to link my CSS to my HTML in a github hosted site
And found out that here CSS is not implicitly linked with HTML, rather CSS is stored in Github as HTML type copy, and to get CSS correct, we need to get CSS implemented correctly. That is why we can use {{site.github.url}}, or maybe give <link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-common/base.css">, things like that. But my question is how I can implement it and do my work done?
Here are my code and link to the Github site -
<head>
<meta charset="utf-8">
<title>To-do list app</title>
<link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="https://iamdeb28.github.io/node_modules/todomvc-app-css/index.css">
</head>
link - https://github.com/iamdeb28/OpenClassRoom_Project_8
Github Static Site - https://iamdeb28.github.io/OpenClassRoom_Project_8/
Well, one thing that I want to mention is that when I loaded chrome dev tools and inspected the sources tab, I found index.css and base.css file totally empty, and when I inputted the code, it just works fine. But when I refresh, same thing happens. I am pretty new to JS and Git, if you can please help.
Can anyone please help???
Edit: Here is a screenshot that proves that internally, the CSS is empty and contains nothing.
As #Senatrius said, the main problem was the node_modules folder, and also the .gitignore file. Previously I was not looking at this .gitignore, but as name suggests, it is just ignoring the files, I want to show (it has the files names and paths with a '!' sign). Also, don't know why node_modules folder name is just not working out, so I copied my files to the root directory and everything seems okay. Thanks #Senatrius.
You have to link the stylesheets from the directory where your HTML file is. THis is your solution. Thanks.
<link rel="stylesheet" href="./node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="./node_modules/todomvc-app-css/index.css">
Hey guys i have a really strange issue, and that is that when i go the route http://localhost:5000/posts/edit/<%=idofblog%> all the CSS styling and Js code is not loaded and i have a very ugly looking web page i have no idea what is going on, all the other routes are working just fine.
All the CSS and Js folders are inside the public folder
app.use(express.static(path.join(__dirname,'public')));
this is my entire file structure
enter image description here
Inside the _layout folder i have a header.ejs file which has all the links to css like this:- <link rel="stylesheet" type="text/css" href="../css/register.css">
every route is working perfectly but as soon as i go to this route http://localhost:5000/posts/edit/<%=idofblog%> every CSS and JS code is gone and the images as well.
Inside the posts.js route i have this
router.get('/edit/:id',(req,res)=>{
res.render('edit');
});
And the href link in the ejs file is this
Edit
The page is loaded and everything like the input fields, textarea are there but there is no styling, i don't know what im doing wrong.
I am not sure but what I see, your problem might be that you are using relative paths to load your styles and scripts. You should use absolute, so for example to load css you need to do it this way(make sure to use path according to your project structure):
<link rel="stylesheet" type="text/css" href="public/css/register.css">
I'm new to JavaScript. I need a CSS text animation to setup a part of my website. Here I found an attractive animation link is in the 3rd comment because stackoverflow doesn't allow me to put the link here (keep showing an error)
When I copy these HTML code, CSS code and JS code and create a webpage including them, It doesn't work properly. Actually no any animation.
How can I solve this to work?
For javascript
Make script tag and copy all the JavaScript between it.
<script>...</script>
For css
Make a style tag and copy all the CSS between it.
<style>...</style>
And to fix your problems double check your code and see whether you are missing some library or not.
The codepen project us using jquery, font-awesome and other things. This will help you import some of them.
<script src="https://use.fontawesome.com/230e98b440.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
This is an Option :
Signup in the codepen.io
Goto your link
Click on the Export button at the right bottom corner
Select Export.zip
After download the zip file, unzip it
Open index.html and you'll see the result.
Check the code of index.html for the missing codes
Ok, going to rewrite this…
I have a project. It has 2 layers. Top layer is HTML5 animation (rollovers, slides etc). Bottom layer is kaleidoscope animation using images and CSS.
Bottom layer displays correctly. Top layer does not.
Client has requested that we use relative pathways.
Client has requested we use a strict directory structure of: Pages, Documents, PlusImages.
Pages= html/txt (where the css/javascript is attached in)
Documents= where the CSS and Javascript files are
PlusImages= where all the images are stored
Here's the issue: The images are NOT displaying for the top layer which is called by a javascript file. The program that generated this script is called Tumult Hype
How can I correct this? I thought about adding ../PlusImages/imagename.png to the agilent_hype_generated_script.js file.
Here is the pathway client wants to use:
http://www.XYZ.com/en-US/Products-Services/Services/
HTML File code connecting the CSS and JS files:
<link rel="stylesheet" href="/en-US/Products-Services/Services/Documents/main.css" type="text/css" media="all">
<script type="text/javascript" charset="utf-8" src="/en-US/Products-Services/Services/Documents/agilent_hype_generated_script.js?55531"></script>
main.css:
.kal_main{background-image:url(/en-US/Products-Services/Services/PlusImages/Animation-Background.png);overflow:hidden;width:920px;height:510px;margin:auto}
agilent_hype_generated_script.js:
(function(){(function k(){var h="Agilent.hyperesources",e="Agilent",d="agilent_hype_container"; if(false==!1)try{for(var f=document.getElementsByTagName("script"),b=0;b<f.length;b++){var a=f[b].src;if(null!=a&&-1!=a.indexOf("agilent_hype_generated_script.js")){h=a.substr(0,a.lastIndexOf("/"));break}}}catch(n){}if(false==!1&&null==window.HYPE_316)null==window.HYPE_dtl_316?(window.HYPE_dtl_316=[],window.HYPE_dtl_316.push(k),e=document.getElementsByTagName("head")[0],d=document.createElement("script"),
b=navigator.userAgent.match(/MSIE (\d+\.\d+)/),b=parseFloat(b&&b[1])||null,d.type="text/javascript",d.src=h+"/"+(null!=b&&10>b?"HYPE.ie.js":"HYPE.js")+"?hype_version=316",e.appendChild(d)):window.HYPE_dtl_316.push(k);else{f=window.HYPE.documents;if(null!=f[e]){a=1;b=e;do e=""+b+"-"+a++;while(null!=f[e]);for(var c=document.getElementsByTagName("div"),a=!1,b=0;b<c.length;b++)if(c[b].id==d&&null==c[b].getAttribute("HYP_dn")){var a=1,g=d;do d=""+g+"-"+a++;while(null!=document.getElementById(d));c[b].id=
d;a=!0;break}if(!1==a)return}for(var a=new HYPE_316,c=[],c=[],g={},l={},b=0;b<c.length;b++)try{l[c[b].identifier]=c[b].name,g[c[b].name]=eval("(function(){return "+c[b].source+"})();")}catch(m){a.log(m),g[c[b].name]=function(){}}a.z_a({R:5,S:0,aI:0,T:0,bG:3,aJ:0,bH:2,aK:0,X:0,bI:3,aL:0,Y:1,bJ:3,bK:3,bL:3,a:0,b:0,c:0,d:0,aS:0,e:3,bQ:0,aT:0,f:2,g:5,bR:2,aU:0,bS:"NumberValueTransformer",aV:0,aW:3,A:5,l:2,aX:0,B:5,m:5,C:5,aY:2,n:5,D:5,E:0,aZ:0,G:5,t:0,bA:5,RotationAngle:2,tX:4,bB:0,M:0,N:0,bC:0,tY:4,O:0,P:0,Q:0});a.z_b({"25":{p:1,n:"../PlusImages/Overlay-Type-4.png",g:"127",t:"#1x"},"18":{p:1,n:"../PlusImages/Overlay-Type-3.png",g:"86",t:"#1x"},"10":{p:1,n:"../PlusImages/03-over-1.png",g:"101",t:"#1x"},
(you can see how the images are referenced above) - ../PlusImages/imagename.png Will this work or am I missing something??
Alright your text is a bit confusing, but I will give this a shot.
It sounds like your javascript file is being linked into an HTML page? If this is the case, then the path from the javascript to the images should be the same as it is for your HTML since that's where it's being run from.
I am new to html and css. I am trying to customize the slider as provided on this:
http://slidesjs.com/#overview
I am using the - Linking demo from the download.
The only thing I have done so far is add a folder under img, css and js called slider and have added the files under that folder.
So the only difference in the index.html is:
<link rel="stylesheet" href="css/slider/global.css">
which earlier was:
<link rel="stylesheet" href="css/global.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"/>
<script src="js/slides.min.jquery.js"/>
everything works fine except the pagination at the bottom of the image frame.
if I restore the path for css from "css/slider/global.css" to "css/global.css"
it works fine. I tried to locate the places where the *.css file is called but I ma not able to locate the issue.
Line 132 in the css file references a 'pagination' image path. If the location has changed then you'll need to update that css file.
Ex.
background-image:url(../img/pagination.png);
Based on what you said above, it should probably now read:
background-image:url(../../img/slider/pagination.png);