on some of my pages I have bootstrap included.
Now on one page, I have an alert included, styled by bootstrap.
It's defined as simple as that:
$('#wrongPasswordDiv').html('<br/><div class="alert alert-danger" id="wrongPWAlert" role="alert">Falsches Passwort. Bitte erneut versuchen!</div>');
Also, before, Bootstrap css file is included:
<link rel="stylesheet" type="text/css" href="/bootstrapcss" />
bootstrapcss is routed to the correct css file.
In the network tab, you can see that loading bootstrap works fine:
But also, you can see, that even though it's loading, no classes are applied.
Now if I change the including of bootstrap to a CDN, it is working and the classes are perfectly applied.
Now I have no idea, what the problem is, becaue as you can see, bootstrap is loading and in both cases, it's loading, but only when loading from the CDN, the styles are applied.
Any ideas why?
Edit: after trying, if I load the CSS through the direct link instead of over the router, it's working. In another file, the same line is working perfectly fine though, so the routing seems to work fine (which you can see on the fact, that the file is loaded as well)
You forgot the point, you must go before the first slash in the address of the folder:
<link rel="stylesheet" type="text/css" href="./bootstrapcss" />
As suggested and answered in another thread by Kobi, this is the answer to the question:
Using this route:
$router->map('GET','/bootstrapcss','example.css','bootstrapcss'); And
then while matching:
$match = $router->match();
if($match['name'] === 'bootstrapcss'){
header("Content-Type: text/css");
$fileName = $match['target'];
echo file_get_contents($fileName);
return; }
Complete answer is here.
Thank you for the help again!
you are missing file extension in in html
<link rel="stylesheet" type="text/css" href="/bootstrap.css" />
Related
My CSS file will not work and I have tried everything. They are both in the same "templates" directory in the app titled "bake".
Using a simple example that doesn't work, here's my HTML head and the code I'm trying to change:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta charset="UTF-8">
<title>DataBake</title>
</head>
<body>
<th style="text-align:right"> <h5 id="green">Username:</h5></th>
<p id="test">If you're new to DataBake please register here.</p>
</body>
Here is my CSS file:
#charset "UTF-8";
#green{
color: green;
}
h5{
color: green;
}
#test{
color: red;
}
The CSS works when neither the HTML nor the CSS are in directories and they are the only two files I'm working with. But other than that, I have putting the css file in a separate directory. I have tried changing the link to the 'style.css' to using relative and absolute paths.
When I follow the link from the HTML , it takes me right to the CSS file. When I load the css file independently, it loads fine.
Both files are encoded to UTF-8.
I have cleared my cache and history and reloaded countless times.
I have moved the order between it and my bootstrap link around.
I have used different browsers.
I have checked for typos or little mistakes.
My coding teacher couldn't figure it out either.
Can someone help me figure out why it is not working?
UPDATE
When I put the absolute path into my browser, it works perfectly, but the relative path through my localhost turns up a 404 error for the css stylesheet.
FOUND THE ANSWER
I needed to incorporate {% load static %} into the header, and turn the href of the stylesheet link to "{% static 'css/style.css' %}". Couldn't be happier to finally have this solved.
First of all: There are many things that in my opinion could have been written better when drafting this question.
It's very difficult to help you with your problem when there's so little shared. You should at least share some code where you're actually using the styling. Time to time there's just some typos you end up missing and extra pair of eyes might pick them up.
The one thing that comes to mind that you could try is adding space between the css selector and the bracket. So not #green{ but rather #green {.
I'm suggesting this just because few months ago I agonized with some styles that did not show up in my React project where I was using css-modules. It took embarrassingly long time until I noticed that the class giving me grief was written without the space before bracket and it just didn't compile correctly.
try and remove bootstrap (or add it before you include your file). What kind of server are you using ? maybe it is serving your css file as TXT/html (look at it on the server response, which would mean your browser may not accept it as a stylesheet)
You have to put 1 more dot before ./
I hope it would work.
<link rel="stylesheet" type="text/css" href="../style.css">
EDIT: I never said that the problem was the dot anyway. The OP should share the entire CSS file together with more information so we could help find the answer.
I've never seen a reference to a path using a dot like:
<link rel="stylesheet" type="text/css" href="./style.css">
You should ask yourself if the file is in the same directory as the file referencing it? above? below?
Starting with “/” returns to the root directory and starts there
Starting with “../” moves one directory backwards and starts there
Starting with “../../” moves two directories backwards and starts there
Other than that, is difficult to understand the issue without more details, many things can cause this problem.
I've been trying to connect html with the CSS.
I've checked that:
The stylesheet path of the css is correct, and it is: css2/css2.css
The <link rel="stylesheet" type="text/css" href="css2/css2.css" /> code is well written and I think it is.
I also tried to try several code editors in case it was a preview problem, I've already tried Atom and brackets and the two do not show that the CSS gets connected.
HTML code :
The html close tag is written too at the bottom.
CSS
here is where the html and CSS file is placed
As you have mentioned in your statement that css files is css/css2.css
so it means you should link css file by this code.
<link rel="stylesheet" type="text/css" href="css/css2.css" />
You added css2 instead of css as folder name
This code will 100% work, Just make sure your HTML file and CSS2 folder need to be on same level (in same folder).
otherwise this CSS file not link to your HTML.
I'm kinda new to HTML, PHP and CSS and I have an issue with my stylesheet not applying some changes.
Here is the part in my HTML where I've got an issue:
<div class="container" id="contact">
Some Random Text
<br/><br/>
More Random Text
</div>
And the corresponding ID in my stylesheet:
#contact{
color:white;
font-size:20px;
font-weight:bold;
}
I am using Bootstrap for the grid and such thing and I've already made sure to call the Bootstrap stylesheet before my own (to not overwrite my own changes).
What I really don't understand is that if I type the following HTML, I got the result I need but not with the previous one:
<div class="container" style="color:white; font-size:20px; font-weight:bold;">
Some Random Text
<br/><br/>
More Random Text
</div>
I hope that my question is clear, and that I haven't made to many English mistakes (not a native speaker).
Maybe you didn't link your css right?
For example, if you have your index.html file and style.css file in one directory, you may write like this:
<link type="text/css" rel="stylesheet" href="style.css">
But if your css file on the folder "css" don't forget to write: href="css/style.css"
After following Ths's answer, I've looked for a solution to this possible caching problem.
And after changing my stylesheet call from:
<link rel="stylesheet" media="all" type="text/css"href="css/style.css" >
to:
<link rel="stylesheet" href="css/style.css" media="all" type="text/css <?php echo date('l jS \of F Y h:i:s A'); ?>">
It seems to now update properly.
Here is a link to the explanation on this CSS-caching problem:
https://css-tricks.com/can-we-prevent-css-caching/
It’s because your rules are on the html tag what has more precedence
You should identify with your developer tools what styles are effectively setting the styles
Style precedence is a bit complex to solve as « you new » but first as your rule is « active » (seem not but but using developer tools to see it will help)
Could also try to be more precise with a « .container#contact » does it work ?
Order of stylesheet processing do not drive precedence logic but in some cases it change the result is « active » styles
F12 and Check styles tab...
How is it possible that my whole website works normally without the css file with all the styles? I have this line in the header:
<link rel="stylesheet" type="text/css" href="styles.css" />
I deleted the only styles.css file from the server, but nothing changed. If I delete that line from the header then there are no styles (as expected)
At one point I noticed that none of the css changes I make have any effect, so I made sure that i'm not doing something dumb like editing or referencing the wrong file and that there are not 2 copies of it for some reason. If I change other html files, then I can see the effects, but not the styles file.
I can force it to work by renaming the css file, but I don't really want to do that.
Has anyone seen this happen before?
This is because caching of the CSS. So try clearing the cache of the browser.
You can prevent the CSS caching by below way
<link rel="stylesheet" type="text/css" href="style.css?v=1" />
Using PHP you can do this trick
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
I'm pretty new to the realm of web design, however, I've been having a problem that really has me stumped. My CSS file will not link with my HTML file. I've checked everything(I think). The file paths are identical, I linked the files with the correct syntax, yet it's still not working. I've attached some photos to help you guys get a better understanding of my problem. If you need more info, I'll be happy to provide it.
The first image is the folder I'm keeping the files in. The second one is the syntax I'm using to link the HTML and CSS. And the third and fourth files are screenshots of my editor, with the file paths on top. (And yes, I'm aware the CSS file is empty. But since it wasn't working correctly, I left it blank for now)
How do you know its not working if the CSS is empty?
Type body { background-color: #f0f; } to test if it's working.
Sometimes you need to force the browser to use the latest styelsheet. You can achieve this by adding a query string in the link.
Like this:
<link rel="stylesheet" href="Joe.css?v=1.1" "type="text/css"/>
As you can see I've added ?v=1.1 after "Joe.css
Then simply change version number every time you have done some changes in your CSS file. So in this case, when you have updated the CSS file you can change the number to ?v=1.2 and so on. By doing this you are forcing the browser to use the latest css.
But please note that you should only add this to the link not to the actual filename Joe.css - that stays the same.
Hope that helps!
You should debug your code.
Firstly, replace your <link> tag with the following and see if it works:
<style type="text/css">
body { background-color: #000; }
</style>
If your background color is changed to black - that's a good sign.
If not, something's wrong with your script or browser.
Next, replace the above piece of code with the following:
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
Create the file style.css in the same directory as your HTML script and put the following code in it:
body { background-color: #000; }
If that doesn't work, something's wrong with your script or browser.
btw, try to clear your browser cache.
Use a debugging tool in a web browser - Firebug in firefox, or the F12 developer tools in IE for example - to see what CSS is being loaded with your web page.
Try using syntax: body { background-image: url("Joe-Image/Joe-logo.png");} and are you sure you added the CSS in your html file?
Try this:
<link href="./joe.css" rel="stylesheet" type="text/css" media="all" />
I inserted the relative path. You could also try this:
<link href="./Joe.css" rel="stylesheet" type="text/css" media="all" />
With upper case j. Perhaps your web server is case sensitive?