Linking to a parent stylesheet - ../? - css

I am having an issue with style sheets in a higher director. Here is the example;
I have index.php and style.css in the example.com home folder. Then, I have example.com/contact with index.php in there. The index.php in the contact folder, points to the stylesheet at example.com home folder.
The issue I am having is say I want a div to be displayed as a block and be a hyperlink. The style.css works fine at example.com/index.php, but if you click the link while in the /contact folder, it will try to access /contact/index.php instead of just /index.php.
Is there a way to fix this?
Thanks!

I assume you mean you are having problems with the CSS path in different directories of your site?
You can link to the stylesheet absolutely, or by using base href ~
<link rel="stylesheet" type="text/css" href="http://mysite.com/style.css" />
or
<link rel="stylesheet" type="text/css" href="/style.css" />
or
<base href="http://site.com/" />
<link rel="stylesheet" type="text/css" href="style.css" />

Rather than using ../ (which I believe goes up 1 directory) use just /, which will go to root directory (e.g example.com/):
<link rel="stylesheet" type="text/css" href="/style.css" />

Related

Github not showing correct CSS file

The file structure in my GitHub repo is
--root
index.html
resume.css
--folder assets
resume.css
(yes I made two identical css file just in case one of them works but none of them works...)
I tried to reference css file as
<link rel="stylesheet" type="text/css" href="resume.css" media="all" />
or
<link rel="stylesheet" type="text/css" href="assets/resume.css" media="all" />
But again none of them works..
When I download the entire GitHub repo as a .zip file on my computer and unzippit, the website can display normally.
Is it something else I could do?
The webpage shows on my local file
and webpage on github
Can you check where you placed the <link> tag?
It should be inside the <head> tag
EDIT:
You can move highlighted section in here to parent <head> tag and remove <head> tag inside <div> tag

Linking to stylesheet in root directory

I am having a major issue trying to link to a stylesheet which is my root directory. I am connecting to it from a HTML file which is in a subdirectory of the root directory.
I would think this code would work (seeing as / means root directory)
<link type="text/css" rel="stylesheet" href="/style.css" />
However, it does not. Because the subdirectory is also only one folder down from the root directory, I also tried:
<link type="text/css" rel="stylesheet" href="../style.css" />
this also does not work.
Your first code line should work as "/" really means root :
<link type="text/css" rel="stylesheet" href="/style.css" />
This will find the file https://MY_DOMAIN/style.css
Are you sure that your file style.css is at the root of your project and not in another folder ?
Also you can try
<style>
#import url('/style.css');
</style>
I finally found a solution that works. For whatever reason, I could not link back to the root directory. I am still completely baffled about that, however, I did find a way to make it work.
I did it with this code:
<head>
<link type="text/css" rel="stylesheet" href="http://engagearcade.com/style.css" />
</head>

How to serve css files in djangos's flatpages?

I'm building a basic site and thought of using the flatpages app for a couple of pages. Problem is, I'm not sure how to serve static files in my flatpages.
The link in my flatpage template is this:
<link type="text/css" rel="stylesheet" href="static/base.css" />
However, firebug shows that file is being looked at:
localhost:8000/example_flatpage/static/base.css
instead of
localhost:8000/static/base.css
Infact, every link in the template works this way.
Instead of
localhost:8000/home/
localhost:8000/example_flatpage/home/
Here's my default flatpage template:
<html><head>
<title>title</title>
<link type="image/x-icon" rel="icon" href="static/favicon.ico" />
<link type="text/css" rel="stylesheet" href="static/base.css" />
</head>
<body>
mainly plain text
</body>
</html>
Any ideas??
Use "/static/base.css" instead of "static/base.css". The first one is a path relative to root '/', while the second form is a path relative to the current page.

<link> tag does not import the .css

I'm having some issue with importing a .css file in my jsp within the eclipse using this tag
<link rel="stylesheet" href="css/style.css" type="text.css">
The structure of my pages is so
WEB-INF
>jsp
>css(folder)
>style.css
>home.jsp
So basically home.jsp and the css folder are parallels, a relative url like the one i'm using should be fine according to most tutorial.
Do you see some problem?
Thank you
<link rel="stylesheet" href="css/style.css" type="text/css" />
Change it to a slash.
In your structure the css folder is style and in your link it is css
<link rel="stylesheet" href="style/style.css" type="text/css">

How to specify a standard path (location) for stylesheets

Is there a way to specify a standard path for stylesheets (analogous to the "include_path" directive in the php.ini file that specifies the location of PHP includes files) such that you only need to specify the unqualified stylesheet filename in the href value of the link element? Example, just be able to write:
<link rel="stylesheet" href="main.css" />
in all files, regardless of their location on the website, without having to worry about where the main.css file is located?
Thank you
Start your path with a / and it will be interpreted relative to the root of your website and will work on any file regardless of its location:
<link rel="stylesheet" href="/main.css" />
or if main.css is not in root:
<link rel="stylesheet" href="/some_folder/main.css" />
Use the HTML-base-tag:
<base href="http://your.domain/and/path/here/" />
Now, all your links will start at that position, even URL's inside a <LINK>.

Resources