Hi I have a spip website that I need to get working on my localmachine.
I copied everything over and the site seems to be "working" with all the databases.
The problem is I think there is a base href set.
The stylesheet in the header was linked like this:
<link rel="stylesheet" type="text/css" href="/css/style.css" />
and was not working as it was going to the root of the localhost instead of the website folder.
However changing the link to this (without the forward slash) works perfectly.
<link rel="stylesheet" type="text/css" href="css/style.css" />
The problem is I have tons of links on the site that are all acting like this. Is there anywhere I can look to see what is causing this? I can't find a base href set anywhere and the htaccess file seems to have no effect.
Resource URLs and link hrefs that begin with a slash (/) do not use the <base href="xyz"> value. They tell the browser to fetch the resource from the root of the host/domain path.
For example, if you have:
<base href="http://mysite.com/res/">
<!-- style sheet 1 -->
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<!-- style sheet 2 -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
style sheet 1 will attempt to fetch it from http://mysite.com/css/style.css regardless of the base href value, since its URL starts with a / indicating host document root.
style sheet 2 however will use the base href value and attempt to fetch it from http://mysite.com/res/css/style.css
Possible Solutions
Update your HTML/PHP/JSP etc. to remove the / prefix from all your style sheet urls, links, images etc. You should probably be able to find and replace this using a good editor like Notepad ++
Ugly way - Modify those URLs using some JS after your page loads. This has a problems that the user will likely see wrong/incomplete content before the JS completes execution.
URLs that start with / (absolute-path references) are useful only when the document is on an HTTP server or it has its base URL set (via the base tag) to refer to an absolute HTTP URL. If you try to use them in a local HTML document (without a base tag), the base URL used will be a file:// URL, so a URL like /foo/bar gets interpreted as file://foo/bar, which normally won’t work – you would need to have a foo/bar that constitutes the full path name of a resource in your computer’s file system.
So sites that should be downloadable for local use simply must not use URLs that start with /.
Related
I'd like to scrape all the linked javascript and css files on a give domain with Scrapy. The issue is that I don't quite understand how to extract the links from the link elements.
Assume I'm scraping example.com. There are links to js and css of the form:
<link rel="stylesheet" href="/path_to_css/example.css"/>
<script src="/path_to_js/example.js"></script>
These links start from the root domain, so no problem. But if the links are like the ones below, it starts to get confusing:
<link rel="stylesheet" href="path_to_css/example.css"/>
<script src="path_to_js/example.js"></script>
These relative URLs are supposed to work such that if I'm on example.com/some_page/ the link paths are appended to that like: example.com/some_page/path_to_js/example.js. That's not how it always works in actual web pages however. On some web sites with language selection eg.example.com/en/some_page, the relative paths start from example.com/en instead of the full path of that page.
So, while expecting to find the files at example.com/en/some_page/path_to_js/example.js, you find them at example.com/en/path_to_js/example.js
Is there any way to understand from where the relative paths start from?
While scraping, Scrapy allows you to create an absolute URL from a Relative URL
You could do something like this
for link in response.css("link"):
response.urljoin(link.css("::attr(href)").extract_first())
for script in response.css("script"):
response.urljoin(script.css("::attr(src)").extract_first())
I am relatively new to CSS and HTML, but I just had a tutorial on connecting HTML documents to CSS sheets. It didn't work, and I have searched everywhere for the answer. All the sites had feasible answers, but none worked for mine.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<title>FlyHighGames|Home</title>
<meta charset="utf-8" /> <!--Bro what does this even mean?-->
</head>
<body>
<div>
<p>Hello</p>
</div>
</body>
</html>
Please help!
use folder name if you saving css in any folder
<link rel="stylesheet" href="foldername/stylesheet.css"/>
As others have said, you need to use the link element:
<link rel="stylesheet" href="pathToCSSFile">
FYI the: type="text/css" part is no longer needed in HTML5
But, to correctly indicate the path to the .css file, follow these
rules:
If the resource you need is part of the same web site (not talking about folder structure here, talking about domain), you should use relative paths, where:
a. fileName.ext is all you need if the resource is in the same folder as the currently loaded document.
b. folderName/fileName.ext is what you need if the file you need is in a sub-folder of the current folder that the loaded document is in.
c. ../fileName.ext is what to use if the file you need is one directory higher than the current document's folder. The ../ can be repeated if you need to go up more than one level (i.e. ../../fileName.ext).
d. /fileNameext or /folderName/fileName.ext indicates that the file or folder specified should be found starting from the root of the web site, regardless of where the current document is.
If the resource you need is located on another domain, you'd use an Absolute Path (http://something.something/file.ext).
a. DO NOT use absolute paths for local resources! This may work but causes the domain name to have to be resolved again, resulting in a longer load time.
WARNING: Different servers have different configurations and requirements that may affect whether these reference rules work or not. For example, GoDaddy web hosting provides an "httpDocs" folder at the root of a web site. You don't have to use it, but that's where their servers expect the site's content to be placed. Not following those rules result in relative paths not working.
NOTES:
If you feel that you've referenced the CSS file correctly, you may have a syntax error in that file which is preventing the CSS from being processed. You can run your CSS through a validator (https://jigsaw.w3.org/css-validator/) to see if it's valid.
You can also hit the F12 key with your web page open and click on the Network tab and refresh the page. This will show you all the network requests made by the current page. If you see the CSS file listed and then see a 404 message next to it, you know the file wasn't found.
The link tag is used to link to external style sheets. check your css file path try this code work fine
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
you need to attech style sheet beetween head tag.
As other said, use the link tag, but I sometimes get an error, if I add a slash at the end as required in XHTML as it automatically closes the tag and doesn't allow it to access other parts of the page.
Create a css stylesheet.css file and save in folder where HTML file exits
Provide complete path of your stylesheet file
example
<link href="Content/css/stylesheet.css" rel="stylesheet" />
Ok, I have a feeling I've really done it this time. I've developed a Wordpress site locally and then transferred it to my remote server. I did a search and replace on the database using the script.
Now, I go into my site on the remote server and the HTML is good, but the CSS stylesheet is not linking properly.
Here is how it appears when I view source:
<link rel="stylesheet" type="text/css" media="all" href="www.fairchildwebsolutions.com/jesusandg/wp-content/themes/Sky/style.css" />
Now when I click on the link in source, I am directed to this:
www.fairchildwebsolutions.com/jesusandg/www.fairchildwebsolutions.com/jesusandg/wp-content/themes/Sky/style.css
Obviously, one too many domain names in there, so the file cannot be found. My question now is, how do I go back and do a search and replace on this to remove the extra domain without messing things up even worse?
<link rel="stylesheet" type="text/css" media="all" href="http://www.fairchildwebsolutions.com/jesusandg/wp-content/themes/Sky/style.css" />
Without the http:// it thinks its a local link not direct.
Wordpress can also link to the stylesheet or theme directory:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Here is some more information on the function to call out the theme directory: http://codex.wordpress.org/Function_Reference/get_template_directory
when you add the stlyesheets in your functions.php try to stay away from using exact links and instead use the get_template_directory_uri (or something like that i can't remember the syntax exactly. it's referenced here Wordpress codex for template directory
Add http:// to the beginning of your style href. Alternatively, since it appears you are on the same domain, simply modify the href to be the following:
href="/jesusandg/wp-content/themes/Sky/style.css"
The former is an absolute path. The latter is an absolute path relative to your domain root.
Your stylesheet call is missing its http:// at the beginning of the href. This means the browser interprets it as a relative path not an absolute one and breaks the link.
What does your stylesheet call say (probably in header.php)? It should be something like:
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" />
The get_stylesheet_directory_uri() call returns the absolute path of the theme directory.
If it's not in header.php it's probably referenced in functions.php using the wp_enqueue_script() function. Same deal - use get_stylesheet_directory_uri() or one of the several template tags that do the same thing and make sure that is used to build the url to the stylesheet rather than defining it explicitly.
I am using ibm websphere and creating a Dynamic web project. All of my JSP files are in my WEB-INF folder and i use servlet mapping in my web.xml file to make them accessible. This has worked fine so far. however i have problem with my CSS. as always, my CSS file is located in WebContent in a folder named css. heres my link for my jsp
<link rel="stylesheet" href = "css/styles.css">
I'm having no luck getting my css to show...
what am i missing?
The relative URLs in the generated HTML output are by the browser interpreted relative to the request URL (as you see in browser's address bar), not to their physical location in the server's disk file system. It's namely the webbrowser who has got to download them by a HTTP request, it's not the webserver who has got to include them from disk somehow.
One of the ways is to use a domain-relative path for those resources, i.e. start with /. You can use ${pageContext.request.contextPath} to dynamically inline the current webapp's context path.
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/styles.css">
This will end up in the generated HTML output as follows:
<link rel="stylesheet" href="/yourContextPath/css/styles.css">
This way the browser will be able to download them properly.
See also:
Browser can't access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
I think you need to see it from the browser's perspective, how it is the URL of the page, the context path and the current path.
If your app context path is for example "myApp" then you can do something like this to make it work:
<link rel="stylesheet" href = "/myApp/css/styles.css">
If you want to make it relative so it does not depend on the context path, then if your url looks like http://localhost:8080/myApp/myservlet/file.jsp
Then your link tag would be
<link rel="stylesheet" href = "../css/styles.css">
Firebug or the chrome console may be really helpful to understand what the browser is trying to fetch.
Hope this helps!
when i write localhost/profil the css works.
But when i write localhost/profil/ the css doesn't work.
app.use(express.static(__dirname+'/public'));
app.get('/profil',[checkCo],require('./routes/profil.js'));
Why?
thanks!
edit:
it's because it thinks that profil/ is a folder, so how can i get around this?
You likely need to use absolute paths within your HTML.
For example, instead of
<link rel="stylesheet" href="style.css">
you need to do
<link rel="stylesheet" href="/style.css">
In the first example, the browser tries to access style.css in the current directory the user is navigated to. So if the user is navigated to /profil/, it tries to load the css from /profil/style.css. In the second example, the browser is told to load the css from /style.css no matter what.