I am new to web development, learning everything on my own. I created a simple cf web site with 10 pages all located in the root directory. I have a directory called assets, and within that directory I have several other directories such as css, images, logos, js, php etc. This is where I am storing these files. Web site works fine.
Now I am starting to simplify things by placing all of my header and footer information in separate files (in a directory called cf_includes and using <cfinclude template="cfm_includes/header.cfm"> in all my pages. Everything still works correctly.
Now taking it a step further, I moved 5 of 10 of my pages in a new directory called pages, and this is where everything falls apart. When I navigate to pages inside and outside of the pages directory the links break, either I get a cf error include file cannot be found or some of my graphics, logos, cannot be found because the link pointers are the same in the header include for both inside and outside the pages directory. Does anyone know how to remedy this?
| Directory Structure | /cf_includes/header.cfm | index.cfm | from inside pages | |
|---|---|---|---|---|
/root directory /assets /images /css /js /cf_includes header.cfm footer.cfm /pages main.cfm page1.cfm page2.cfm page3.cfm index.cfm page5.cfm | <!-- MAIN NAVIGATION --> <div id="main-nav" class="navbar-collapse collapse navbar-mega-menu"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown active"> <a href="index.cfm">HOME</a> </li>
<!--page Navigation--> <li class="dropdown "> <a href="#">../pages/main </a> <ul class="dropdown-menu" role="menu"> <li><a href="../pages/page1">Page 1</a></li> <li><a href="../pages/page2">Page 1</a></li> <li><a href="../pages/page2">Page 1</a></li> </ul> | the path i am using at this level to go to
the header include <cfinclude template="cfm_includes/header.cfm"> the images <img src="assets/images/logos.png">
the css <link href="assets/css/styles.css" rel="stylesheet" type="text/css"> | the path i am using at this level to go to
the header include <cfinclude template="../cfm_includes/header.cfm"> the images <img src="../assets/images/logos.png">
the css <link href="../assets/css/styles.css" rel="stylesheet" type="text/css"> | |