CodeIgniter Forums
Problem loading CSS file with relative path - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forum-20.html)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forum-23.html)
+--- Thread: Problem loading CSS file with relative path (/thread-29442.html)

Pages: 1 2


Problem loading CSS file with relative path - El Forum - 04-09-2010

[eluser]mihaibaboi[/eluser]
Hello,

I hope I'm not starting a new topic for nothing. I had a look around and couldn't find anything that matches my problem. I guess it's a very trivial problem, but there's something I'm missing. Here's the problem. I've set up CodeIgniter like this:

D:\work\php\www\codeigniter\ (where "D:\work\php\www\" is the document root on my local server)

I have a view file located at D:\work\php\www\codeigniter\system\application\views\layout.php

I want to set up an external css file that's located in D:\work\php\www\codeigniter\system\application\views\css.main.css

To do that wrote:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
&lt;html &gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;title&gt;My layout page&lt;/title&gt;
&lt;link href="css/main.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;

The problem is that it refuses to apply the styles that I wrote in my css file, and when I inspect it with FireBug, the &lt;link&gt; tag has a 404 error. I also tried writing it like this:

Code:
&lt;link href="system/application/views/css/main.css" rel="stylesheet" type="text/css" /&gt;

because I figured that it would be relative to the index.php file in the codeigniter folder. It didn't work. Any ideas?

Sorry for the long post, but I wanted to provide you with all the details that I thought might help.

Thanks


Problem loading CSS file with relative path - El Forum - 04-09-2010

[eluser]bobbob[/eluser]
Put your css file in the root of your site where the index.php is which is also where the system folder is. Then reference it as http://yousite.com/css.css
This applies to all your images,js etc


Problem loading CSS file with relative path - El Forum - 04-10-2010

[eluser]Bart v B[/eluser]
is it not easyer to make absolute paths?

What i always do, is work with the helper url.

in youre application/config/autoload.php

Code:
$autoload['helper'] = array('url');
in youre application/config/config.php
Code:
$config['base_url'] = "http://path to youre site/";

in youre view:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
&lt;html &gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;title&gt;My layout page&lt;/title&gt;
&lt;link href="&lt;?php echo base_url();?&gt;css/main.css" rel="stylesheet" type="text/css" /&gt;
&lt;/head&gt;

Then it's alway's correct Wink


Problem loading CSS file with relative path - El Forum - 04-10-2010

[eluser]mihaibaboi[/eluser]
@bobbob Thanks for your help. Your idea works, but I don't like to put my css files in the root of my site. I feel it goes against the framework model. I have a views folder, so I can keep the UI files there.

@Bart v B That's a more elegant solution. For now, I just hard coded an absolute path to see if it works, and it does. I'm sure that the autoload will work, but I don't have the time to tinker with it right now. I'll get back if I encounter any problems.

It still bugs me that I can't get it to work with a relative path. I'm sure that there's a small thing that I'm missing. I'm new to CodeIgniter and I don't know about the design patterns that are commonly used. I'm used to relative paths, but if I can't do it, tough... I can work with an absolute path just as well.

Thanks.


Problem loading CSS file with relative path - El Forum - 04-10-2010

[eluser]Bart v B[/eluser]
you can also use

&lt;link href="../css/main.css" rel="stylesheet" type="text/css" /&gt;
what it means, that it goes to de docroot, and from there to the folder css/
Wink

But, my first solution works al the time..
If you put it on a other application / website it still works.

EDIT better explaination:

It does not have any thing to do with design paterns..
It is just a file/folder/paths problem what you have.


Problem loading CSS file with relative path - El Forum - 04-10-2010

[eluser]mihaibaboi[/eluser]
@Bart v B

Ok, so it worked with a ../ approach but I had to write the code like this:

Code:
&lt;link href="../system/application/views/css/main.css" rel="stylesheet" type="text/css" /&gt;

I'm still having a little trouble wrapping my head around how CodeIgniter sees relative paths but I guess I'll get it in the end...

Thank you for all you help


Problem loading CSS file with relative path - El Forum - 04-26-2010

[eluser]egunay[/eluser]
@mihaibaboi

Did you try to use absolute path?

"/system/application/views/css/main.css"

Ofcourse I don't know your virtual server configuration so if the "/" points to "D:\work\php\www\codeigniter\" you shouldn't be getting any problems.

Instead if "/" points to "D:\work\php\www\" you should also add your codeigniter folder to link href.
"/codeigniter/system/application/views/css/main.css"


Also check your .htaccess configuration. For example take a look at mine:

Options +FollowSymLinks
Options -Indexes
DirectoryIndex index.php
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule ^(.*)$ /index.php/$1 [L]

Hope it works for you.


Problem loading CSS file with relative path - El Forum - 04-26-2010

[eluser]mihaibaboi[/eluser]
Thanks @egunay. I'm at the office right now, so I can't try your solution until tonight. Being that I'm in a development environment, I don't have a .htaccess file right now, but I will create it, and I'll take your solution into account. I'll get back to you with the results.


Problem loading CSS file with relative path - El Forum - 04-26-2010

[eluser]egunay[/eluser]
Your welcome,

Let me know if it works for you because I had the exact same problem yesterday and solved it with this way.


Problem loading CSS file with relative path - El Forum - 04-26-2010

[eluser]Tominator[/eluser]
If you use this template parser: http://ellislab.com/forums/viewthread/153269/
You can do everything without using .htaccess or helpers, just:

Code:
&lt;link href="{T_Folder}/css/main.css" rel="stylesheet" type="text/css" /&gt;