CODEWITHSUNDEEP
phphtmlcssapache.htaccess
Alexander Sagen
Alexander Sagen

Reputation: 127

Css does not load if I have 2 `/` in the url

I have this .htaccess file:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^(.*)$ index.php?url=$1 [QSA,L]
</IfModule>

And in my index.php, I have this:

<!DOCTYPE HTML>
<?php
include "php/config.php";
include "php/RemoteAddress.php";

$remoteAddress = new RemoteAddress();

$ip = $remoteAddress -> getIpAddress(); // The clients ip address;
$tid = date( "Y-m-d_H-i-s" ); // A string representing the time

$fir = "hjem";
$sec = "";

$tot = isset( $_GET[ 'url' ] ) ? $_GET[ 'url' ] : "";
$tot = str_replace( "#", "", $tot );
$split = explode( "/", $tot );
if( isset( $split[0] ) && $split[0] !== "" ) $fir = $split[0];
if( isset( $split[1] ) && $split[1] !== "" ) $sec = $split[1];

if( $fir == "hjem" )
{
    $page = "home.php";
}
else if( $fir == "regler" )
{
    $page = "rules.php";
}
else if( $fir == "nyheter" )
{
    $page = "news.php";
}
else if( $fir == "om" )
{
    $page = "about.php";
}
else if( $fir == "kontakt" )
{
    $page = "contact.php";
}
else 
{
    $page = "page_not_found.php";
}

include 'php/content/header.php';
echo "\n".'        <div id="contents">'."\n";
include "php/content/".$page;
echo "\n".'        </div>';
include 'php/content/footer.php';
?>

And the problem if if I have the URL localhost/hjem it works perfect, but if I have localhost/hjem/ or localhost/hjem/info the browser does not load the css file.

Can anyone of you tell me why? How I can fix this?

EDIT:

Source code from browser:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Nordbyen</title>
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
    <div id="header">
        <div>
            <div class="logo">
                <a href="hjem"></a>
            </div>
            <ul id="navigation">
                <li class="active">
                    <a href="hjem">Hjem</a>
                </li>
                <li>
                    <a href="regler">Regler</a>
                </li>
                <li>
                    <a href="nyheter">Nyheter</a>
                </li>
                <li>
                    <a href="om">Om</a>
                </li>
                <li>
                    <a href="kontakt">Kontakt</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="contents">

        <style>
            table { 
                border-spacing: 0;
                border-collapse: collapse;
            }
        </style>
        <div id="tagline" class="clearfix">
            <h1>Nordbyen - Norsk Datafreak Forum</h1>
            <div>
                <p>
                    Jeg har startet på et nytt prosjekt, et norsk forum for forskjellige Java prosjekter.
                </p>
                <p>
                    Ideén bak dette er å skape et lite miljø for de norske som enten kan eller ønsker å lære <a href="http://no.wikipedia.org/wiki/Java_(programmeringsspr%C3%A5k)" target="_blank">Java</a> 
                </p>
                <p>
                    Dette er bare startfasen, så jeg vet ikke hvordan dette vil bli, men håper på både en bra og inspirerende side samt mange aktive medlemmer
                </p>
            </div>
            <div>
                <p>
                    Han du tro på prosjektet og ønsker du å delta? Bli med å bygge opp og vedlikeholde prosjektet ved å kontakte ...:
                </p>
                <table>
                    <tr>
                        <td><p>Kontakt meg på:</p></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td><p>Skype:</p></td>
                        <td><p>...</p></td>
                    </tr>
                    <tr>
                        <td><p>Facebook:</p></td>
                        <td><p>( <a href="https://www.facebook.com/..." target="_blank">...</a> )</p></td>
                    </tr>
                    <tr>
                        <td><p>Mail:</p></td>
                        <td><p>...</p></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>        
    <div id="footer">
        <div class="clearfix">
            <p>
                © 2014 .... All Rights Reserved.
            </p>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Views: 61

Answers (2)

Sumurai8
Sumurai8

Reputation: 20737

Your link to your css is "css/style.css". This is a relative url. Relative to what? Right, it is relative to the url that is in the address bar of your browser. If you visit localhost/hjem, then the prefix is localhost/ and the page you request is hjem. When you visit localhost/hjem/, then the prefix is localhost/hjem/. It tries to load localhost/hjem/css/style.css and this obviously failes.

You have two options:

  • Use an absolute path. You can use /css/style.css. This will load it relative to the root of your domain, in this case localhost/css/style.css.
  • You can use the base-html tag, like so: <base href="/"> (mdn). This will load any relative url relative to the href element of the base tag, thus loading localhost/css/style.css.

Upvotes: 2

Shirin Abdolahi
Shirin Abdolahi

Reputation: 1067

instead of relative url for css try absolute url. I think the problem exist in the relative address.

like this:

<link rel="stylesheet" href="http://yoursite.com/PATH_TO_CSS_FILE" type="text/css">

Upvotes: 2

Related Questions