Missing CSS file and images after URL rewrite

Question

I'm trying to make user friendly URL using mode rewrite. My problem is, that after giving category like 'name' to my URL, when I call the page using new URL, it can't load the CSS file or images.

I have a link like:

localhost/mywebsite/project?id=22

New link is something like

localhost/mywebsite/project/22/myproject.project

htaccess code:

RewriteRule ^project/([0-9]*)/.*\.project$ /project.php?project=$1 [L]

(it might not be 100% right but I don't have access to my code right now so I just wrote this and it works fine on the original source)

My root directory is localhost/mywebsite/

and my CSS file is in css/style.css

localhost/mywebsite/css/style.css

my htaccess

localhost/mywebsite/.htaccess

and my project.php file is in

localhost/mywebsite/project.php

So in the project page I have access to CSS file by using relative path,

<link href="css/style.css" rel="stylesheet" type="text/css" />

but when I use rewritten URL page can't find the CSS file.

I can't use absolute path with domain name because I don't have domain yet! and it can be anything.

one way is to use relative path to domain as suggested on the similar questions localhost/mywebsite/project.php and when i run my script localy my root directory is localhost so css link should look like

href="mywebsite/css/style.css"

but when i go live i should change all links to probably something like

href="/css/style.css"

this seems like lots of work

Solution 1

For your local version add

<base href="//localhost/mywebsite" />

to the head section

and for your live versions change it to

<base href="//your.domain.here" />

reference at http://www.w3.org/TR/html4/struct/links.html#h-12.4

Solution 2

you have to define the base path or the server view path in the connection.php and whenever u want that path, make that global. then that variable will b called and the css or images will take the whole path.

for example $SVP="http://www.example.com/"

global $SVP; echo $SVP;

so

Solution 3

Insert an image into the same file with the same relative path as the css href link, load the page in a browser, right-click the image in internet explorer, click properties and you should see where the relative path actually points to.

Comments

[max]

yeah but also there are images and i cant change domain name for every single image after going live

[max]

apparently i should include mywebsite on he link cuz localhost considered to be my root and /mywebsite/ folder is just another directory so it should be included in the link . i cant change all off the links when i'm going live !

[Gabriele Petrioli]

@max, base tag works with images as well.. example at jsfiddle.net/gaby/JE656

[Ozzy]

You cant change all the links understandable hassle so keep all paths relative but adjust each path with the correct relative location. Note: i didnt mean use the absolute path i meant check the absolute path and adjust your relative path until you get it right. You can use ../ to go up a folder.

[LuBre]

Thanks, that fixed my headache.