How to make links work, regardless of location in directory structure?

Tags: php,html,css,twitter-bootstrap,href

Problem :

So in the included image, you can see a copy of the website I'm currently working on. The site is going to have separate pages for each of the company's machines. Obviously the navigation bar and menu bar are going to be the same throughout the whole website so I thought I'd make use of a single line of PHP script to just load the menu in each time. (Attached image as I do not have +10 rep yet)

Though, from what I understand, the pages within folders (Not within root) wont be able to link to the rest of the site without the use of ../ within the href.

So if I load the menu part of the site containing the navbar, etc, it won't work on all the pages because they'll all be within different folders, meaning every folder will need it's own version of the navbar PHP import.

Am I going about this the wrong way? I'm just trying to minimize the amount of code I'm using on each page. Not only that, but once I finish the site if I have to make a change to the menu-bar, I don't want to have to update 30-40+ pages. I figured the PHP import would save me that sort of trouble? Is there a better way of doing this that isn't terribly complicated?

It should also be noted that I'm doing this in HTML5 with Twitter-Bootstrap as my main CSS.

I would also be making a similar PHP call that would import a footer as well. If I missed anything that could be of help, please do ask.

TL;DR - How do I make links work throughout the entirety of the site, regardless of where they are in the folder hierarchy. Thought about using a tiny PHP script that would contain the menubar, etc and would be loaded on every single page. Though I'm not sure if that will work due to folders?

Solution :

Try to start your links from /. This means that url is started from site root. For example:

<a href="/products/kettles/kettles_patch.html">Patch Kettles</a>

    CSS Howto..

    How to hide a div with jquery or alternative?

    how to make a list float left or not according to the size of the browser?

    CSS bottom bar isn't correctly shown with chrome

    How do I inspect CSS pseudo classes with firebug?

    Need help determining how to position this element with CSS

    I applied CSS auto-resizing to image, now how do I push it to the background?

    How to get and set CSS class in TinyMCE editor?

    How to get this partially diagonal shape from an image in CSS

    How to centre and make responsive a row of divs

    How to override inline css through javascript?

    how to make opacity of div lower than the over layered iframe

    How to make parent fullscreen div to grow with absolutely positioned child using CSS and jeet?

    Both DIV Popups Shown Instead of One

    How do I make circles within a larger circle, and text within the center of all the circles, in CSS?

    How to use add/subtract in css propert?

    With HTML and CSS, how to have an image that is vertically aligned with a horizontal line?

    How to (and how not to) load a css file that uses @font-face

    How to make text box to overlap with the image?

    How to horizontally center-align the content of a div by manipulating the CSS of the wrapper div only?

    How to properly apply CSS style to H elements in ordered list

    How to get the root directory of wordpress in css

    How to create a dropdown menu like google's 'More' button?

    How to hide the div on click through animation css

    How to change menu icon when scrolling to specific sections of the website?

    How to toggle two buttons on mouse hover?

    How to segment a circle with different colors using CSS

    How to horizontally center two divs within a header div?

    save CSS - while browsing, how can I save the css files from inside chrome dev or firebug to local directory [duplicate]

    How to apply css just to element that curser is on?

    How can I make a pointy arrow with a div in CSS