I am currently working on a blog, and everything on my end (mac) is working perfectly with my html/css. However, when I send the files in a zip to a PC, the css is not reading. I've tried switching the link tag form "style.css" to "/style.css". That did not have any effect on it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="style.css">
Nothing was wrong with the coding. The CSS formatting was rearranged and I made a rookie move of not inspecting before spending hours on google! Just had to go in and put it back to CSS format. Problem solved! Thanks guys!!
Related
I just installed TailwindCSS and would like to learn about it. After some problem-solving during installation, I meanwhile had no more warnings in the installation process, but when now trying in VSCode some of the first examples from the Tutorial, some of the Tailwind classes used in the HTML file can be applied and have an effect in the browser, while others seemingly cannot be applied and have no effect in the browser.
Could anyone please help me, what needs to be done to make the TailwindCSS installation fully work and be able to make use of all Tailwind classes?
For example, this very first example from the tutorial on the Tailwind homepage works correctly for me and the button is correctly shown in blue and gets darker, when hovering over it in my browser (MacOS, Safari):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="tailwindout.css" />
</head>
<body>
<button class="bg-sky-500 hover:bg-sky-700">
Save changes
</button>
</body>
</html>
But one of the next examples in the tutorial on the homepage has no effect and the selected text is not shown in fuchsia color in my browser (MacOS, Safari), neither when calling the html file with live server from VSCode nor when directly opening the html file in the browser from the Mac Finder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="tailwindout.css" />
</head>
<body>
<div class="selection:bg-fuchsia-300 selection:text-fuchsia-900">
<p>
So I started to walk into the water. I won't lie to you boys, I was
terrified. But I pressed on, and as I made my way past the breakers
a strange calm came over me. I don't know if it was divine intervention
or the kinship of all living things but I tell you Jerry at that moment,
I <em>was</em> a marine biologist.
</p>
</div>
</body>
</html>
This question already has answers here:
How to reference CSS / JS / image resource in Facelets template?
(4 answers)
Closed 3 years ago.
I'm working in my final university project of this year using JSF and NetBeans 8.2. But I have a problem with css. When I login I save the category using this line:
FacesContext.getCurrentInstance().getExternalContext().getSessionMap().put("categoria", cat);
That's work fine, I debug it.
It's redirects me, to main page, for my category, in this case:
image of page with css
Then I press Main Menu button and It's redirects me to main page of my category Main menu botton and that's the error, the same page of first picture without css same page of picture one, without css. The links works fine, and the page have css, but the css does not working when I go back.
Head of this main page:
<h:head>
<link href="../resources/css/main.css" rel="stylesheet" type="text/css"/>
<link href="../resources/css/bootstrap-4.3.1-dist/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<title>Gestionar Plan Anual Departamento</title>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
</h:head>
Sorry my English, thanks in advance.
The problem is with the tag: <link/>. This is not the correct tag for work with *.xhtml, the correct tag is: <h:outputStylesheet/>.
Finally, I remplace
<h:head>
<link href="../resources/css/main.css" rel="stylesheet" type="text/css"/>
<link href="../resources/css/bootstrap-4.3.1-dist/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<title>Gestionar Plan Anual Departamento</title>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
By:
<h:head>
<h:outputStylesheet name="css/principal.css"/>
<h:outputStylesheet name="css/bootstrap-4.3.1-dist/css/bootstrap.css"/>
<title>Gestionar Plan Anual Departamento</title>
<meta charset="UTF-8"> </meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
</h:head>
I am trying to link my css to my vue.js file. I was building this out without the webpack. So I had many style worked out.. However, when I decided to move it to a webpack none of my custom css is even calling. I did research that said to include the css in the index.html as a link so that is what I have done. Is there a better way to do this that I didn't see? Any help would be much appreciated. It is also worth mentioning that I tried to use Include in the App.vue as well as require as I had seen in other suggestions but both pulled up errors and refused to compile any of my files....
<!DOCTYPE html>
<html>
<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">
<link rel="shortcut icon" href="<%= webpackConfig.output.publicPath %>favicon.ico">
<link rel="stylesheet" type="text/css" href="../src/assets/css/main.css">
<title>my-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but my-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<p>this is test script</p>
<!-- built files will be auto injected -->
</body>
</html>
When I open https://bomengeduld.github.io/debadkamers/ on my mobile device, half of the project is not rendering. Only headr & first section is showing. Second section not. It looks completily blanc. It does renders perfect on desktop.
What I have tried so far
1) I have added:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2) I tried to add css to <style> tag in <head>
3) The css is held in seperate file, and I already tried to add it to the style.css file.
https://github.com/bomengeduld/debadkamers/blob/master/css/responsive.css
It should look like this
You are not referring to the css folder change <link rel="stylesheet" href="style.css"> to <link rel="stylesheet" href="css/style.css">
I have just shifted from Atom text editor to Brackets , both are experimental and quite new i know :) , well i have a very basic question. Bracket definitly seems more refined and has been on the block for a longer time. Now in atom i used to create custom sinppets like so:
".source.html":
"HTML snippet":
"prefix": "spithtml"
"body": """<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title here</title>
<link rel="author" href="humans.txt">
</head>
<body>
</body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</body>
</html>
"""
How would i create a simple HTML snippet in Brackets ? Thats my question , i surfed the net alot , some aspects of brackets is quite well Documented, some are not , I really can't find any documentation on how to create a custom snippet in Brackets , as that would really help my workflow.
Can anybody tell me how would i go about building a custom snippet in Brackets ?
Thank you.
Alex-z.
I'm not quite sure but probably you only need something like this:
https://github.com/chuyik/brackets-snippets