I am creating a website in HTML, and I face a problem.
I have a CSS folder, and I want to be able to access it from every directory
root:
/css
- /skel-noscript.css"
- /skel-noscript.css"
/js
- init.js
- skel.min.js
- skel-panel.min.js
- html5shiv.js
/Downloads
-/Download.html
/Downloads.html
/index.html
...
Now I have trouble when I try to access the stylesheets in Downloads/Download.html
my <head> code:
<head>
<title>TITLE</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<!--[if lte IE 8]><script src="../js/html5shiv.js"></script><![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../js/skel.min.js"></script>
<script src="../js/skel-panels.min.js"></script>
<script src="../js/init.js"></script>
<noscript>
<link rel="stylesheet" href="../css/skel-noscript.css" />
<link rel="stylesheet" href="../css/style.css" />
<link rel="stylesheet" href="../css/style-desktop.css" />
</noscript>
</head>
When I use this code, the stylesheets don't work.
when I delete the <noscript> around the links to the stylesheets, they do work, but my website is totally messed up.
What is happening?
When I use this code in the root directory, it works fine
css files are not being added from tags in this case, is for browsers that don't support js or if js is off.
go to the "init.js" file(one that u attached just before the tag) in your js folder and check it... css is being added from their so change directory paths for css from there.
regards
Are you turning off the javascript when testing this? <noscript> is only activated when the visitor has no scripting enabled. If you want to be able to link the css files always you have to get rid of the tag.
I suggest you to create a file something like header.phtml and call all the files you need to render the template.
<head>
<title>TITLE</title>
<noscript>
<link href"<?= $this->getCssPath(); ?>" rel="stylesheet" type=text/css />
</noscript>
</head>
and greate a file where you create a class something like
<?php class MyTemplate {
public function getCssPath() {
return 'css/skel-noscript.css';
}
}
Related
I am trying to refer to my JS/CSS with a relative path, like ./myScript.js, such that, if I host the site on https://myHost.com/myPath, it should look for the script in https://myHost.com/myPath/myScript.js, but if I host it on http://localhost/, it should look in http://localhost/myScript.js. It is always looking in the root though, as if I had made an absolute path.
Is it not possible to make relative paths? I would prefer if I did not need to change the actual HTML file between environments.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="./favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="./logo192.png" />
<link rel="manifest" href="./manifest.json" />
<title>React App</title>
<link href="./static/css/main.6dea0f05.chunk.css" rel="stylesheet">
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script>/* a bunch of auto generated react code */</script>
<script src="./static/js/2.1ca84f3b.chunk.js"></script>
<script src="./static/js/main.487a42e6.chunk.js"></script>
</body>
</html>
Try to use this:
<base href="https://www.w3schools.com/">
I hopes, that it helps for you!
This is one of those times that I spend 2 hours fiddling with it, to no avail, post a question, and then find the answer directly after..
The issue is that I automatically return index.html if users do not specify it, making chrome think that the current "folder" is the root when accessing https://myHost.com/myPath. If I go to https://myHost.com/myPath/index.html it works.
So, I need to do a proper redirect to index.html, instead of just returning it. Or to anything under myPath, like https://myHost.com/myPath/home.
PROBLEM SOLVED BY DELETING ALL THE FILES ON THE SERVER AND UPLOADING AGAIN MY WEBSITE!
Screenshot of the console error
Hi,
my website looks fine when I open it offline on my browser but after having uploaded it on the server when I go to the web address it only shows the text and images without any formatting and CSS.
I don't know what to do to fix this :\ What could be the problem?
If it can be of help here is the current folder structure of my website:
"public_html" >
css, img, js, mail, scss, vendor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
<meta name="description" content="">
<meta name="author" content="">
<meta content="width=device-width, initial-scale=1" name="viewport" />
<title>website title</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="css/agency-edit.min.css" rel="stylesheet" type="text/css">
<link href="css/adjustment.css" rel="stylesheet" type="text/css">
</head>
And here some scripts that are at the end of the "body".
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Contact form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom scripts for this template -->
<script src="js/agency.min.js"></script>
Thank you
In your case, it can be:
Uncorrect relative location (your css and other files are not found by code, check paths of included files)
Files are not uploaded to server (try to upload them again)
I bet if you put a slash / in front of all of your local paths, things will magically work for you.
Explanation:
vendor/ looks in the current folder for the "vendor" folder.
/vendor/ looks in the root of the site.
../vendor/ looks in the parent of my current folder.
./vendor/ looks "here". (Side note: This is more useful within the server itself when files are referenced by other files in another location for server-side processing.)
I am reading css file from aspx
Login.aspx
<HTML>
<HEAD>
<title>LoginWebForm</title>
<meta name="vs_showGrid" content="True">
<link href="stylesheets/layout.css" rel="Stylesheet" type="text/css">
<link href="stylesheets/LoginWebFrom.css" rel="Stylesheet" type="text/css" />
</HTML>
</HEAD>
and directory structure is,
MyProject
- folder1
- folder2
- stylesheets
- layout.css
- LoginWebForm.css
- Login.aspx
So, here Login.aspx and folder stylepsheets are on same level, it means i can by specifying path as, "stylesheets/layout.css"
but. this does't work. If I run same application on **Windows 2012 server then it works**. but when I run it on Windows 7 then it it doesn't work.
Can you please let me know whether this is OS related problem OR some settings required/ configuration required to be run the application on Windows 7.
Thanks You
Your html structure is not good:
<HTML>
<HEAD>
<title>LoginWebForm</title>
<meta name="vs_showGrid" content="True">
<link href="stylesheets/layout.css" rel="Stylesheet" type="text/css">
<link href="stylesheets/LoginWebFrom.css" rel="Stylesheet" type="text/css" />
</HTML>
</HEAD>
This would be a "normal" html structure:
<HTML>
<HEAD>
(head content)
</HEAD>
<BODY>
(body content)
</BODY>
</HTML>
Try to fix the html structure and maybe works after that ;-)
Another thing you could try is start your CSS paths with "/", for example:
<link href="/stylesheets/LoginWebFrom.css" rel="Stylesheet" type="text/css" />
And... Why one of your "link href..." lines ends with "/>" and the other one ends with ">" ??
I think both are correct ways (not sure now), but... Why you do it in a different way in any case??
good luck
I have my index page head section as follows:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.css.map" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.css.map" />
<link rel="stylesheet" href="bootstrap-3.2.0-dist/css/bootstrap.min.css" />
<title></title>
</head>
Until this morning, the page always used to load fine. But I noticed this morning that css isn't loading at all. I checked the locations of css files. It seems to be correct. Can anyone suggest whats wrong?
There may be a problem with your browser calling the local bootstrap CSS file.
Try requesting the bootstrap CSS via CDN by using:
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css
And then troubleshoot your local CSS file.
Hope this helps!
Your code looks fine, try playing with the css file path. You may not need the "bootstrap-3.2.0-dist." Typically css is just css/bootstrap.min.css if it's located in a CSS folder and your index file is in your root directory.
Kee-doke.
So I have internal style problems. With Wordpress. After many frustrating hours trying to figure out how to change styles on several different items, I discovered that the main html file had a ton of internal style sheets. They were overriding my styles that I input in the style.css file of my Wordpress theme.
The styles are inside the <head> of the web page. I need to know where I can go to edit these internal styles. That is, what template file holds them?
There is a lot of code, but here is the relevant stuff. The styles are way down at the bottom. I removed the actual styles. I just need to find out how to edit them. Obviously they have to be in a Wordpress php file. But which one?
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Trailogy | Find the Trail. Hit the Trail</title><meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="http://localhost/wordpress/xmlrpc.php" />
<link rel="shortcut icon" href="http://localhost/wordpress/wp- content/uploads/2014/10/LogoThumbFav.png" /><link rel="apple-touch-icon" href="http://localhost/wordpress/wp-content/uploads/2014/10/LogoThumbFav.png" /><link rel="alternate" type="application/rss+xml" title="Trailogy » Feed" href="http://localhost/wordpress/feed/" />
<link rel="alternate" type="application/rss+xml" title="Trailogy » Comments Feed" href="http://localhost/wordpress/comments/feed/" />
<link rel='stylesheet' id='nirvanas-css' href='http://localhost/wordpress/wp-content/themes/nirvana/style.css?ver=4.0' type='text/css' media='all' />
<script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/nirvana/js/frontend.js?ver=4.0'></script>
<script type='text/javascript' src='http://localhost/wordpress/wp-content/themes/nirvana/js/nivo-slider.js?ver=4.0'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://localhost/wordpress/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.0" />
<script type="text/javascript">
jquery stuff for a slider.
</script>
<style type="text/css"> /*Hundreds of lines of css*/</style>
<style type="text/css">/* Nirvana Custom CSS */</style>'
And by the way STYLE.CSS ISN'T OVERRIDING THESE INTERNAL STYLES! That's the problem.
EDIT: Why me? Yeah, so after spending a whole day trying to figure this out, my associate up and says, "Dude, you can just add !important to the end of your styles and they'll override everything." So I created a style override css sheet. Talk about the solution staring me in the face!
This should be the stylesheet you are looking for:
/wordpress/wp-content/themes/nirvana/style.css?ver=4.0