I'm trying to deploy my react app on github as pages but the css isn't working. Im attaching my github repository if anyone can help.text.
As right now the page is looking totally messed cause not css is applied.
cLooking at generated index.html file in the gh-pages branch, I can see that the file is malformed; you have missing closing tags in your HTML.
// index.html (I added newlines for readability)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<link>font-family: "Montserrat", sans-serif; href="https://fonts.googleapis.com/css?family=McLaren|Montserrat&display=swap" rel="stylesheet"
<link>rel="stylesheet" href="./styles.css"
...
Notice the link tags aren't closed. Because of this, the CSS file will not be loaded by the browser.
Related
p{
color: blue;
}
<!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>Document</title>
<link rel="stylesheet" href="sport.scss">
</head>
<body>
<p>Helllooo</p>
</body>
</html>
I wrote two other pages in this project correctly. But, when intended to code the third one, changes didn't apply at all.it seems that my html code doesn't receive the styles.
Surprisingly, the sass file fully converted to CSS file, and no problem was evident.
SASS / SCSS is a preprocessor for CSS, and can't be interpreted by your browser.
This is a duplicate question and possible solutions have alredy been described here: Attaching a SCSS to HTML docs
if you are using vs code download a sass extension which will convert your sass code into a css code and then you can link that css file generated by the extension to your html page
i will recommend scss-to-css extension by yutent as it doesn't require you to make it active like other extensions
you must read documentation sass official and follow this guide https://sass-lang.com/guide. if you not install sass this two way how install sass
read this https://sass-lang.com/install
or download extension in visual code
if you are still confused change your sass become sport.css
I have a problem with the navigation bar,
I have a navigation bar for my project. As you can see my code below if I use the link and get it from an external source it is working well. But there is a problem for me when the net is a bit slow I can see the navigation's loading on my screen. it is a very small duration but it disturbs me very much. So I decided to use CSS source from my project folder but could not do that. I tried many code samples but could not do it correctly. If somebody helps me, I will appreciate it. Thanks.
I am also still trying to solve it but I wanted to get some help.
function MyNavBar(params) {
//console.log(params["conpanyID"]);
return (
<div>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
</head>
1-When I use link/external source
[1]: https://i.stack.imgur.com/SO5qB.png
2-When I use CSS file from my project folder.
[2]: https://i.stack.imgur.com/MqHqo.png
you might have linked your stylesheet inside the body instead of the header section , because of which your page will load first, then your CSS
here is an example
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>file</title>
<link rel="stylesheet" href="css/s.css">
<link rel="icon" href="css/si.ico">
</head>
I have a simple html page using font awesome css. Can anyone see why my font awesome check mark is not displaying, I cannot get the check mark to display and I cannot seem to figure out why.
I am using the .min.css link in my <Head> as such:
<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">
<title>LoopLAB Theme</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
When I want to inject it into a <i> element in the DOM, I simply use this:
<i class="fa fa-check"></i>
As you can see above, the check mark does not display. Do you see anything obvious that I am doing wrong? This seems like a beginner's error but I can't find the problem.
Check your CSS. There are a few ways you can do that!
Simply check if font-awesome.min.css is indeed under your CSS folder. If it is, check your folder structure. Can your HTML access this folder using css/font-awesome.min.css? The CSS folder must be a child from the folder you are currently storing your HTML file. Finally, are you using the latest version of font-awesome-min.css? This specific icon might not be included in your CSS file if it's an older version.
Inspect your site using your favorite browser inspect tool and locate your CSS file on inside the inspector. Clicking on it should open your CSS code. The code should be minified. If there is nothing inside of it or some kind of error your website is failing to find your file on your server or computer.
Plus you can also add from a CDN, for example, https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css and import directly to your code.
This page doesn't get the table styles from the style sheet. If I put the same styles in the page itself, they are applied. What could cause this? The css file name is correct and is read by other pages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagelinks | Known Issues</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="pagelinks_windows.css" />
<!-- style>
#known_issues th, #known_issues td {
font-size: 13px;
text-align: left;
}
</style -->
</head>
<body>
<h1>Known Issues</h1>
<p>
Known bugs and issues are listed here.</p>
<table id="known_issues">
<tr><th>Tracking No.</th><th>Category</th><th>Description</th><th>Status</th><th>Workaround</th></tr>
<tr><td>plt001</td><td>Site</td><td>Site navigation broken on Internet Explorer 8</td><td>Closed</td><td>None. That browser version has a major bug involving javascript objects. Users must upgrade to Internet Explorer 9.</td></tr>
<tr><td>plt002</td><td>Site</td><td>Saints and feasts do now show description</td><td>Open</td><td>None. The description data for the Saints and the feasts is being compiled.</td></tr>
</table>
<br/>
<br/>
Test if the content of the css file is visible.
Try to open it in the browser.
Common possible error when letters-case (A\a and so on) in file-names differs - this willn't work on *nix hosting servers, ever if it worked localy on windows.
Another common situation: when is error in path to file from current file-directory.
Are your stylesheets in the same root directory as this html file? Common practice is to put stylesheets, js, includes, etc into different directories. Perhaps you follow this convention and simply forgot href="css/pagelinks_windows.css"? Hard to find the answer to your problem without much more information but it's usually something small you're missing. One of those that you end up with a forehead-slap once you find it :)
What does your stylesheet look like?
I think you might have some conflicting css, try adding your table style at the VERY bottom of pagelinks_windows.css
Inside a web page I have the following snippet:
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<base href="https://XXXXX /">
<title>Example</title>
<link href="Layout/standard.css" type="text/css" title="Example" rel="stylesheet">
</head>
<body>
The referenced page standard.css looks like this:
#import url( "standard2.css" );
#import url( "standard3.css" );
After upgrading the noscript plugin (version 2.4.3) within Firfefox ESR 10.0.4 the css pages standard2.css and standard3.css are not loaded anymore. With an earlier version of noscript everything worked as expected.
Why is noscript blocking this? Is there a known security problem importing a css from within another css? Or is it simply a bug in noscript?
Update: The problem is not the cascaded import. The problem is that I used a short URL (https://hostname/...). If I use a fully qualified URL (https://hostname.mynet.com/...) everything is working.
So it really looks like a bug in noscript 2.4.3.
The NoScript changelog doesn't mention any changes to this, so it's probably a bug.