I have a weird issue. I have a website project that I am currently working and I am am using node sass. While in the IDE, I am using VS Code, everything is fine and the styles are there. If I open the html file outside of the VS Code the css disappears for some reason. The css gets compiled fine and the .css file is there. The link tag points to it just fine, but no styles and no images either. Have I missed something in the setup of my project that would cause these issues when opening the html file externally?
Related
I'm new to Stack Overflow and I'm a bit familiar with HTML & CSS.
So I've been trying to get my CSS to work with my HTML for a week or 2, and this is my file structure before VSC "Solved" my problem: TestProj/HTML/index.html (for my HTML) TestProj/Resources/CSS/test.css (for CSS)
I'm using the following Boiler for HTML https://textbin.net/4hzjievpq0 (the reason there is no css link is because that is a boiler generator, I've put the link in my code so that's not the issue)
But whenever I "Go Live" (Extension in VSC to view in chrome) it displays it with no custom fonts or anything, but when I do background-color in the html file NOT THE CSS it works.
When I follow the css link in the html file it says there is no such file, and asks to create a file, then it creates a CSS file in the html hierarchy and then it somehow works?
I thought the CSS file was supposed to be in a different folder.
Any Suggestions?
Thanks,
Critical
This is pretty much my first go at HTML and CSS. I thought I was getting a hang of it until I added more pages. I wanted each page to have the same top navigation bar format, but when I linked the same CSS Stylesheet to all of my pages it just doesn't want to work? How should I go about fixing this?
Also, somehow my google fonts link did work at first, but once I added in the pages and tried linking the single stylesheet to all the pages, it stopped working completely.
Here's what is going on:
index.html file code & link href to css
Preview of index.html/my homepage
menu.html file code & link href to the same css stylesheet
Preview of menu.html/menu page
My CSS stylesheet
The preview works with index.html, but when I navigate to the menu page, or contact page I have created through the preview, it completely breaks and doesn't have the navigation bar I created across all the pages at all.
Did I do something wrong here? I tried creating multiple CSS files and gave them different names since each page is going to look different anyways, but kept the html the same across all the other html pages and the css the same.
The reason why the css script is working for the index page only is because index.html is the only script that has the right directory to your css script. So the browser can't find the css script as a result. Remember that the other pages are not in the same location as index.html (they are in Pages instead of the root directory). All you would have you do is just change the directory path on the other scripts.
Add this on all your other scripts (excluding index.html):
<link rel="stylesheet" href="../CSS/style.css"/>
It should work after this.
Here is an example:
Your actual problem is not knowing how to navigate from one/folder to another. This link below will help you further on how to navigate around folders.
https://learn-the-web.algonquindesign.ca/topics/paths-folders/
Don't take out the files from Pages but leave them where they, all you need to do is to change the path to the different files. You'll see how I did on the screenshots above.
If I had more time I would go more in detail but this should be sufficient info for you to solve the problem and understand what mistakes you made. I hope this helps.
Currently, I am trying to use Codepen Project's environment to build a website and later deploy it. I am using a template that I want to start building from. It has its own HTML pages as well as CSS and JS that is linked. However, when I am working in the project environment I cannot seem to get the CSS to apply to the html code (in other words, the live preview keeps showing naked HTML). I have tried uploading the files into the project's root, tried copying them in newly created css files, and tried using them as external sources (href to an external url in the head tag).
It is really to bad because I feel the Project environment can really offer a lot, though I just can't get it to work.
Thanks in advance, and take care!
LINK TO CODEPEN PROJECT:
https://codepen.io/Thumpertje/project/editor/DxxkqM/
<div class="code">
</div>
I'm working with some pre-existing web files for a website, and I see there are files with .hinc ending. The code inside them is HTML, but Sublime Text 2 doesn't seem to recognize it, and doesn't color anything. Also, the code still runs on the website.
.hinc is an included HTML source file in c++. See this link http://www.open-std.org/jtc1/sc22/wg21/docs/papers/2012/n3325.html#style.hinc
I am trying to get bootstrap to work with eclipse Dynamic Web Project (Helios). However when I run (Tomcat v7) on the server I get regular html. I think there must be an error with the link. I downloaded bootstrap and imported the file system in WebContent, there is a bootstrap folder (with css, img, js) inside WebContent.
I have tried:
"href="boostrap/css/bootstrap.css". "href="WebContent/boostrap/css/bootstrap.css". "href="css/bootstrap.css". "href=bootstrap.css".
I also copied the bootstrap folder outside of WebContent and tried all of the above. What's wrong?
The code I used is exactly (copied and pasted) the source from http://getbootstrap.com/examples/starter-template/#
with the href modified. I did not put it here because I'm getting weird formatting from StackOverflow.
Could it be that you spelled boostrap instead of bootstrap when using "href...?
I am getting the same problem. When I am using eclipse server to run webpage(using bootstrap) then it doesn't work.
But if i go to the webroot or webcontent folder and open the webpage then bootstrap works fine.
I hope you have downloaded jquery.min.js.