WAMP server loading index.html just fine but not loading any additional css style sheets and script files.
I've tried these
<link rel="stylesheet" href="wamp/www/AngularJS_Practice/css/style.css"/>
<link rel="stylesheet" href="/css/style.css"/>
<link rel="stylesheet" href="css/style.css"/>
edit
My current index.html page is
<!DOCTYPE HTML>
<html lang='en'>
<head>
<title>Electronic Components</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h2>Lorem Ipsum</h2>
</body>
</html>
edit 2
css
h2 {
color: orange;
font-style: italic;
}
Refresh your browser cache. Press 'Ctrl+F5'
That'll do the trick.
This worked for me:
<link rel="stylesheet" href=".\style.css">
You forgot to use type
<link rel="stylesheet" type="text/css" href="css/style.css">
Also note
<link ....> // this is right
<link ..../> // avoid this
Your HTML file seems right , try making this small css file in css folder and link to it
body{background-color:blue;}
Test this
I had a same issue and what worked for me is this
<link rel="stylesheet" type="text/css" href="./css/style.css">
Enjoy
select the full url from url bar and then press ENTER... It works! ;)
Related
I need to change the structure of my files when I put in production :
default :
-dist
--css
--fonts
--img
--js
--favicon.ico
--index.html
and i want like this :
-dist
--index.html
--app
---css
---fonts
---img
---js
---favicon.ico
I try to change directly the html in index.html
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="icon" href="app/favicon.ico">
<title>Roquette</title>
<script defer="defer" src="app/js/chunk-vendors.6e8aa085.js"></script>
<script defer="defer" src="app/js/app.4955a200.js"></script>
<link href="app/css/app.d0b83381.css" rel="stylesheet">
</head>
<body>
<noscript><strong>We're sorry but serveur-roquette doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div>
</body>
</html>
But it doesn't work there must be some paths missing somewhere
Where do I place links like these:
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">"
It gives me error if I just place them in the beginning or end of a .vue file, and it would be redundant, cause I need them available for all the project
.vue single file component format doesn't allow for arbitrary tags. If there's a need for <link> and its type is suitable for <body>, it can be placed into <template> block. Stylesheets can be provided as <style> blocks and don't need <link>. <link rel="icon"> isn't body-ok and needs to be placed in <head>, so it's not suitable for a component that was placed in <body>.
If your using the Vue-CLI place external links and scripts on the <head> Tag in the index.html file. You can find this under the public folder.
Otherwise if you want to import an external file to a component you can do it like:
<style src="/.styleone.css"></style>
<style src="./styletwo.css"></style>
<style src="./stylethree.css"></style>
Here's the minimal configuration that I've figured out so far:
<html>
<head>
<link rel="shortcut icon" href="microsoft.png" type="image/png">
<link rel="stylesheet" href="bootstrap-4.0.0-alpha.2/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<script src="bootstrap-4.0.0-alpha.2/docs/assets/js/vendor/tether.min.js"></script>
<script src="bootstrap-4.0.0-alpha.2/dist/js/bootstrap.js"></script>
</body>
</html>
Q: After the opening body tag, what replaces div class="container"?
Nothing replaces it. Bootstrap 4 still uses containers.
I think a lot of you know about twitter-bootstrap which makes it so easy to design "pretty" websites. I'm recently developing a JSF web application in Netbeans.
Everything except of the glyphicons.
In the header part of your website you will include bootstrap via
<h:outputStylesheet library="css" name="bootstrap.min.css"></h:outputStylesheet>
if you use jsf or
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.min.css"/>
if don't use jsf.
The weird think is that the glyphicons are empty squares like in this question:
Glyphicons rendering as empty box
I already checked with view-source with my browser and both rendered CSS have the same content.
<head id="j_idt2">
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="resources/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="/WWHY/faces/javax.faces.resource/bootstrap.min.css?ln=css" />
<link type="text/css" rel="stylesheet" href="/WWHY/faces/javax.faces.resource/styles.css?ln=css" />
<title>WWHY IT Support Center</title>
<script src="resources/js/ie-emulation-modes-warning.js"></script>
</head>
Maybe you guys know why doesn't work for the glyphicons.
Thanks !
Most likely the same as with font-awesome. Check How to use Font Awesome from webjars.org with JSF
Although in th FA case there already was a jsf specific css
Trying to get this widget to render in a basic way.
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<link rel="stylesheet" href="/eca/resources/dojox/calendar/themes/tundra/MatrixView.css">
<link rel="stylesheet" href="/eca/resources/dojox/grid/resources/tundraGrid.css">
<link rel="stylesheet" href="/eca/resources/dojox/calendar/themes/tundra/Calendar.css">
<link rel="stylesheet" href="/eca/resources/styles/app.css">
<link rel="stylesheet" href="/eca/resources/dojo/resources/dojo.css">
<link rel="stylesheet" href="/eca/resources/dijit/themes/dijit.css">
<link rel="stylesheet" href="/eca/resources/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" href="/eca/resources/dijit/themes/tundra/tundra.css">
<link rel="stylesheet" type="text/css" media="screen" href="/eca/resources/styles/standard.css">
<link rel="SHORTCUT ICON" href="/eca/resources/images/favicon.ico">
<script type="text/javascript">
<script src="/eca/resources/dojo/dojo.js" type="text/javascript">
<script src="/eca/resources/spring/Spring.js" type="text/javascript">
<script src="/eca/resources/spring/Spring-Dojo.js" type="text/javascript">
<script language="JavaScript" type="text/javascript">
....
matrixView = new MatrixView({
style: "position:relative;width:900px;height:600px;"
}, "courseInstanceCalendar");
....
I have excluded dojo code before and after for simplicity.
What I'm getting now is only rows with week number and columns with day name like the screenshot but no grid with date values like this example.
Any idea what's missing?
Removing this style fixed the problem:
<link rel="stylesheet" type="text/css" media="screen" href="/eca/resources/styles/standard.css">
So now I have a calendar that looks like the example.
The lesson learned I guess is when you have rendering problems like this always check clashing styles.