(I have extensively searched for a solution but nothing that has happened to someone seems to be the problem)
I am a beginner working on a very simple project. I uploaded it to github but github pages won't show the CSS. It works just fine when I run it locally.
It's supposed to look like this:
snapshot of the project
This is the repo: https://github.com/padnama/odin-recipes/
This is the pages link: https://padnama.github.io/odin-recipes/
Your wrongly refered your CSS in HTML :
<!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">
<title>receitas</title>
<link rel="stylesheet" href="./style.css" type="text/css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Source+Sans+Pro&display=swap" rel="stylesheet">
</head>
<body>
<div class="content">
<img src="recipes/images/main.png" alt="the best cook">
<div class="writings">
<h1 id="title">receitas</h1>
<ul id="recipes">
<li>risotto</li>
<li>strogonoff de cogumelos</li>
<li>macarrão com amendoim apimentado</li>
</ul>
</div>
</div>
</body>
</html>
That should work better
Add the link of CSS file to your HTML page, see the attached picture below:
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body class="bg-green-400 h-screen">
test
</body>
</html>
Doesn't work. What can be the reason for this?
Any of the utility classes added to the body tag won't work
Your sample HTML doesn't include a stylesheet, so the bg-green-400 and h-screen classes aren't defined.
In production you should use a proper purged CSS file, but for testing you can load Tailwind from a CDN using this:
<link href="https://unpkg.com/tailwindcss#^2/dist/tailwind.min.css" rel="stylesheet">
Here's a fiddle of your HTML with this stylesheet included, and both of the classes you've used are working: https://jsfiddle.net/vrung30L/
I have an chrome app,with and iframe inside
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<title>Title</title>
</head>
<body >
<div class="container-fluid">
<iframe id="iframe" src="home.html" frameborder="0" height="150%" style="width: 100%;"></iframe>
</div>
</div>
</body>
</html>
in web is loading, but when it is called from index in the chrome app ,bootstrap-theme.css is not loading
I've tried too adding type="text/css" , but neither.
<link rel="stylesheet" type="text/css" href="/css/bootstrap-theme.css">
Does this work for you?
solution:
as #SaucedApples said but without the dot.
<link href="/css/bootstrap-theme.css" rel="stylesheet" />
I think you should allow this files to be appended at the manifest.json, something like this:
"content_scripts": [
{
"matches": ["http://test-website.com/*"],
"js": ["js/content-script.js"],
"css" : ["yourcss.css"]
}
],
In brackets now I can only code jQuery inside the lines of my html file.
But now I want to code jQuery in another file, but of course I stall want that it interact with the html, for example that I can still target the divs:
$(".navbar")
HTML File :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Test</title>
<meta name="description" content="Test">
<link rel="stylesheet" href="main.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script type="text/javscript" src="Javascript.js"</script>
</head>
<body>
<div class="navbar">
<p>Hello</p>
</div>
</body>
JS File :
$(document).ready(function(){
$(".navbar").click(function(){
$(".navbar").hide();
});
});
Apparently the reason why I can't have the jQuery-code in another file is a glitch in Brackets.
This is first time I am trying bootstrap. Everything seems to be in place except the class jumbotron is not working. Class container works and brings content in center but jumbotron which is suppose to give some background does not seems to work. (adding or removing this like class="jumbotron" has no effect on page.)
<!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">
<title>Bootstrap 101 Template</title>
<link href="./css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My first Bootstrap website!</h1>
<p>This page will grow as we add more and more components from Bootstrap...</p>
</div>
<p>This is another paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>
I am attaching the of ide so you can see my file tree. I checked it myself also and seems I have loaded everything correctly.
Update: redownloading the bootstrap solved the problem with exact same code. somehow my first download was not working correctly.
Try:
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
without the ./ instead.
or the CDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Try to use
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
in your HTML head.
I am trying to use the font awesome plugin. But I cannot see the characters. Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<h1>THIS IS IT</h1>
<span class="fa fa-twitter"></span>
</body>
</html
Is this just me or has anyone else had the same problem?
Try with http:
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
I solved it. Turns out all it needed was an http at the beginning. Thank you.