css file not found in link(html) - html

404 error that the css file not found
Searched YouTube and can't find a solution.
<!DOCTYPE html>
<html>
<head>
<title>itays website </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="buttons">
<button type="button" , class="home">Home</button>
<button type="button" , class="contact">Contact</button>
<button type="button" , class="services">Services</button>
<button type="button" , class="about">About</button>
</div>
</body>
</html>

Check that where did you creat your css file is it any folder
Check the file name properly

Make sure that the css file and html file are in same folder

Related

Linking CSS file to my HTML file doesn't work whatever I do [duplicate]

This question already has an answer here:
html links not working (using base href)
(1 answer)
Closed 2 years ago.
I'm trying to link to a CSS file in my HTML index file. It's just one line of code and apparently whatever I try it doesn't work. I'm using VSCode.
If I type the link from beginning it also auto-completes (or it shows it anyway). So it knows it's there.
I've also tried moving the CSS file out of the folder and next to the HTML file. But that doesn't work either.
I tried the style brackets in the HTML file itsself and the coloring there works.
So my way of testing is that nothing is showing up blue.
I also removed my Javascript from the HTML file into a seperate file linking to it for readability for this question, and that does work
Does anybody else have any idea's?
I also saw the other topics for this same question but it shows nothing new to try out.
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta charset="UTF-8">
<link rel=”stylesheet” type="text/css" href="styles/style.css">
</head>
<body>
<a id="stringCalculation"></a><br>
<a id="stringResult"></a>
<br>
<div id="container-numbers">
<button id="one" class="number">1</button>
<button id="two" class="number">2</button>
<button id="three" class="number">3</button>
<button id="four" class="number">4</button>
<button id="five" class="number">5</button>
<button id="six" class="number">6</button>
<button id="seven" class="number">7</button>
<button id="eight" class="number">8</button>
<button id="nine" class="number">9</button>
<button id="zero" class="number">0</button>
</div>
<div id="operators">
<button id="symbolPlus" class="operator">+</button>
<button id="symbolMinus" class="operator">-</button>
<button id="symbolTimes" class="operator">*</button>
<button id="symbolDivid" class="operator">/</button>
<button id="equals">=</button>
</div>
<div id="other">
<button id="clearButton">Clear</button><br>
<button id="backspace">Backsp</button>
<button id="decimal">.</button>
</div>
<script src="javascript/myscript.js"></script>
</body>
</html>
And the CSS file:
#one {
background-color: blue;
}
.number {
background-color: blue;
}
Here my folder:
And inside:
Change this
<link rel=”stylesheet” type="text/css" href="styles/style.css">
With
<link rel="stylesheet" type="text/css" href="styles/style.css">
Please user opening and closing double inverted commas.
Please try this line of code:
<link rel="stylesheet" href="styles/style.css">

Lose BootStrap Formatting When Use Local Version

I'm writing my first web server, so don't hate.
I am using Golang and HTML with BootStrap.
This program will eventually run on a Raspberry Pi in a small device. So I assume it would be best to use a downloaded version of BootStrap rather than the CDN version right?
But when I do this, my buttons on my page lose their formatting.
Here is my HTML code using the CDN version:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cacophonator Setup</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Cacophonator Setup</h2>
<div class="col-sm-12">
<!-- Camera Positioning -->
<button type="button" class="btn btn-primary" onclick="location.href='camera-positioning.html'">Camera Positioning</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='3G-connectivity.html'">3G Connectivity</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='API-server.html'">API Server</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='network-interfaces.html'">Network Interfaces</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='disk-memory.html'">Disk and Memory Status</button>
</div>
</div>
<h4>{{.Head}}<h4>
</body>
</html>
Here is the new HTML which is not working:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cacophonator Setup</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href = "css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Cacophonator Setup</h2>
<div class="col-sm-12">
<!-- Camera Positioning -->
<button type="button" class="btn btn-primary" onclick="location.href='camera-positioning.html'">Camera Positioning</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='3G-connectivity.html'">3G Connectivity</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='API-server.html'">API Server</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='network-interfaces.html'">Network Interfaces</button>
</div>
<div class="col-sm-12">
<button type="button" class="btn btn-primary" onclick="location.href='disk-memory.html'">Disk and Memory Status</button>
</div>
</div>
I have only changed 2 lines, so that I use (or try to) the local BootStrap CSS and JS.
And I call it from Go like this:
http.HandleFunc("/", managementinterface.IndexHandler)
log.Fatal(http.ListenAndServe(":8080", nil))
And IndexHandler is like this:
func IndexHandler(w http.ResponseWriter, r *http.Request) {
t, _ := template.ParseFiles("../html/index.html")
t.Execute(w, "")
}
One final note: The CDN version is 3.3.7, the version I downloaded is 4.1.1
And also if I look at the local BootStrap CSS file, I can see this:
.btn-primary {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
Which is the styling I want. Any help appreciated, thanks.
it turns out someone else on this open source project answered this.
What they did was pack all the static css and html pages into the Go executable. They did this with a package called packr: https://github.com/gobuffalo/packr
It's a tool that does that for you.
So then you have only 1 file to deploy, which is really nice.
Are you actually serving the JS and CSS code from the Go code? If not, your browser is asking the Go HTTP server for the resources, but it has no idea what you're talking about (if you look at the developer console in your browser it will show you a 404 response on the requests for those files.
You may need to do something like (assuming you've got your CSS and JS in a directory called assets)
cssFs := http.FileServer(http.Dir("/home/user/www/assets/css"))
http.Handle("/css", fs)
jsFs := http.FileServer(http.Dir("/home/user/www/assets/js"))
http.Handle("/js", fs)
More info at http.FileServer

Accordion not working with IE8

The following HTML works in Firefox and Google Chrome. But, it does not work with Internet Explorer 8. The panels would not expand (see code below).
Is there anyway I can make it work with IE8?
<!DOCTYPE html>
<html>
<head>
<title>
Test
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src=" http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.custom {
width: 130px !important;
}
div.panel {
display: inline-block;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="accordion" id="myAccordion">
<div class="panel">
<button type="button" class="btn btn-primary custom" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Section 1</button>
<div id="collapsible-1" class="collapse">
Content
</div>
</div>
<br/>
<div class="panel">
<button type="button" class="btn btn-primary custom" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Section 2</button>
<div id="collapsible-2" class="collapse">
Content
</div>
</div>
<br/>
</div>
</body>
</html>
Indeed, the way you are doing it is not working on IE. I tested the code directly from jqueryui that you can find here and it's working for me.
You can also try to change the compatibility with <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" /> and try different versions but I don't think that's the best way of doing it.

BootStrap Submit Button Not working

I am trying to develop a simple front end for displaying images using BootStrap. However before using BootStrap the button to view images was working fine but after styling the page using bootstrap, It does nothing, Can anybody tell me what am I doing wrong? When I tried seeing in Developer tools of Chrome , I get 2 exceptions:
Uncaught Error: You must include the utils.js file before tether.js
at tether.js:4
(anonymous) # tether.js:4
bootstrap.min.js:7 Uncaught ReferenceError: Tether is not defined
Code:
<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></title>
<script src="script/tether.min.js"></script>
<script src="script/tether.js"></script>
<script src="script/jquery.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css"></link>
<link rel="stylesheet" href="css/styles.css"></link>
<script src="script/bootstrap.min.js"></script>
</head>
<body>
<h1 class="mt-4" align='center'> Demo Website </h1><br>
<div class="container" style="width:300px; background-color:ghostwhite;">
<div class="form-group">
<form action='viewimages2.php' method="GET">
<button class="btn-block btn btn-info" align='center' type="submit" name="Submit"> View Images </button>
</form>
</div>
</body>
</html>
Working Code without Bootstrap:
<!DOCTYPE html>
<!--
-->
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<H1 align='center'>Demo Website/h1><br>
<button align='center' type="button" onclick="window.location='Register.php';" value="Register"> Register </Button>
<button align='center' type="button" onclick="window.location='Login.php';" value="Login"> Login </Button>
<form action='viewimages2.php' method="GET">
<button type='submit' name="Submit"> View Images </button>
</form>
</body>
</html>
You can try this, put the jquery.min.js before the other .js files. I think you can remove tether.js since you are already using tether.min.js
<script src="script/jquery.min.js"></script>
<script src="script/tether.min.js"></script>

Cannot get external stylesheet to work

Hey guys I already know that this is easy but I have tried everything I can think of and cant figure it out. I cannot get my style sheet to work on my html both are saved in the folder website1. inside that there are 2 folders css and index with the files saved in the respective folder. not mind either of my coding these are not my website just a very small example I am sending to find help.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
`<div class="row">
<div class="col-xs-6">
<button class="btn btn-default btn-xl">About</button>
<button class="btn btn-default btn-xl">Portfolio</button>
<button class="btn btn-default btn-xl">Contact</button></button>
</a>
</div>
</div>
</div>
</body>
</html>
My css page looks like this
body{
color: blue;
}
button{
color: aliceblue;
}
If your html file is in the index subfolder, and css is in the css subfolder, then you should reference it like:
<link rel="stylesheet" type="text/css" href="../css/style.css">
Hope this helps :)