0

A page's urls are not worked properly.I made common header's html(header.html). I wrote in it

{% load static%}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="{% static 'header.css' %}">
<header class="clearfix">
        <h1 class="title">WEB SITE</h1>
　　　　　<ul class="top-menu">
            <li class="top-menu-item"><a class="icon_head" href="send">SEND</a></li>
            <li class="top-menu-item"><a class="icon_head" href="see">SEE</a></li>
            <li class="top-menu-item"><a class="icon_head" href="know">KNOW</a></li>
     　 </ul>
        <a class="logout_button" href="logout_view">LOGOUT</a>
</header>

In index.html,header.html is read like

<html lang="ja">

<head>
    <meta charset="UTF-8">
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/accounts/detail.css">
    <link rel="stylesheet" href="/static/bootflat/css/bootflat.min.css">
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

    <title>WEB SITE</title>
</head>

<body class="relative">

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="/static/accounts/header.css">
{% load static%}
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'header.css' %}">
    <header class="clearfix">
            <h1 class="title">WEB SITE</h1>
    　　　　　<ul class="top-menu">
                <li class="top-menu-item"><a class="icon_head" href="send">SEND</a></li>
                <li class="top-menu-item"><a class="icon_head" href="see">SEE</a></li>
                <li class="top-menu-item"><a class="icon_head" href="know">KNOW</a></li>
         　 </ul>
            <a class="logout_button" href="logout_view">LOGOUT</a>
    </header>

    <main>
        <div class="container">
            <p>Hello World</p>
        </div>
    </main>

    <footer>
      <div class="footers">
        <ul class="bottom-menu">
              <li class="bottom-menu-item"><a class="bottom_index" href="">XOXO</a></li>
        </ul>
      </div>
    </footer>
</body>

</html>

When I put header's SEND&SEE&KNOW links,they worked properly. On the other hand,I wrote in detail.html like

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/css/bootflat.min.css">
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/js/jquery.fs.selecter.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/js/jquery.fs.stepper.min.js"></script>
<title>WEB SITE</title>
<body class="relative">
<header class="clearfix">
    <h1 class="title">WEB SITE</h1>
    <ul class="top-menu">
        <li class="top-menu-item"><i class="fa fa-plus" aria-hidden="true"><a class="icon_head" href="send">SEND</a></i>
        </li>
        <li class="top-menu-item"><i class="fa fa-eye" aria-hidden="true"><a class="icon_head" href="see">SEE</a></i>
        </li>
        <li class="top-menu-item"><i class="fa fa-search" aria-hidden="true"><a class="icon_head"
                                                                                href="know">KNOW</a></i></li>
    </ul>
    <a class="logout_button" href="logout_view">LOGOUT</a>
</header>

<main>
    <div class="container">
        <div class="detailimg col-xs-8">
            <div class="relative_ele">
                <div class="image">
                    <img class="absolute-fill" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=results.jpg"
                         width="500px" height="300px" alt="SEE">
                </div>
                <div class="vertical-center-container ">
                    <p class="hthree">I LOVE YOU</p>
                    <p class="hthree_small">I MISS YOU</p>
                </div>
            </div>
            <div class="table-padding">
                <table border="0 " class="table table-bordered ">
                    <thead>
                    <tr>
                        <th class="index " colspan="4 " bgcolor=pink>ITEMS</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td bgcolor="#FFEEFF " rowspan="2" align="center ">XOXO1</td>
                        <td align="center ">
                            <a class="index" href="results1">XOXO2</a>
                        </td>

                        <td bgcolor="#FFEEFF " rowspan="4" align="center ">XOXO3</td>
                        <td align="center ">
                            <a class="index" href="results2">XOXO4</a>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>
    </div>
</main>
<footer>
      <div class="footers">
        <ul class="bottom-menu">
              <li class="bottom-menu-item"><a class="bottom_index" href="">XOXO</a></li>
        </ul>
      </div>
</footer>

</body>

</html>

but when I put header's SEND&SEE&KNOW links,they did not work and error happens.For example SEND link in index.html,it sends http://localhost:8000/accounts/send and it is ok. But SEND link in detail.html sends http://localhost:8000/accounts/detail/send. http://localhost:8000/accounts/detail is to acsess url of detail.html . I really cannot understand why this happens.Can't I use header.html to both index.html & detail.html?How should I fix this?

user8504021
  • 303
  • 5
  • 23

1 Answers1

0

In <a href="send">Send</a> the href attribute "send" is a relative url: the browser resolves it by appending it to the current page url.

This isn't usually the behaviour that you want. The solution is to provide an absolute path from the root of the site. So if the location of the "send" page is http://localhost:8000/accounts/send then construct the url a leading /, like this:

<a href="/send">Send</a>

and the browser will always resolve the url correctly.

See also the answers to this question.

snakecharmerb
  • 47,570
  • 11
  • 100
  • 153