CSS Styling vs Folder Path Query

Just when I think I know what I’m doing …

In an attempt to do some basic folder organization I have brought my nav styling to a halt. I hope I can explain this clearly enough to be understood. My public_html folder has the following folders (in part):

css folder / navStyle.css, reset.css, NO-NAV-minorStyle.css, …
minor folder / joinery folder / butterfly-keys.html
.
.
.

As can be seen I have placed my butterfly-keys.html file in the joinery folder which is in the minor folder. Fine.

In the butterfly-keys.html file I have set my style sheet links as follows:

    <link rel="stylesheet" href="../../css/reset.css"> 
    <link rel="stylesheet" href="../../css/navStyle.css"> 
    <link rel="stylesheet" href="../../css/NO-NAV-minorStyle.css"> 

These changes have produced the correct results to the butterfly-keys.html file as shown next:

While the page looks as it should the nav styling is non-responsive. If the navStyle.css were not being referenced correctly the page would look as follows:

From this I know that the nav styling file is being referenced so my obvious question is this:

What is preventing the nav styling from working as it should?

Thanks.

1 Like

Can you post the URL of the site?

1 Like

@ronpat

Thanks for your post.

I can but this will take me a few minutes to do. I have been tweaking locally only. I will post back when I have it one line.

@ronpat

Ok the page with the nav issue is up. Here is the starting link:

http://www.wwbydesign.com/home.html

Once you are on the home page please do the following:

  1. Click on the nav menu at top right and select ‘Joinery’ from the menu items;
  2. Once on the Joinery page, at the bottom of the blue list select ‘Butterfly keys’;
  3. Once in the Butterfly Keys page click on the nav menu and you will find it to be unresponsive.

The fact that the menu is appearing correctly and not working is very strange. I must be missing something very obvious but I have no idea what that may be.

Thanks for your help.

1 Like

You’re much better off using absolute URLs sitewide to avoid having to figure out the file paths on each page. For example, you can put this same link on every page:

<link rel="stylesheet" href="/css/reset.css">

or

<link rel="stylesheet" href="http://www.wwbydesign.com/css/reset.css">
1 Like

@ralphm

Thanks for your post.

I think I understand paths as you’ve posted, but my issue is that my butterfly-keys.html file is buried two folders away from the css file that affects its styling. My problem is that the nav menu styling is styling the nav menu but its functionality is missing for some reason. I hope that makes a bit of sense.

Thanks.

Yes, but that is no longer an issue once you convert your file paths as described above. The same path works from anywhere.

On the page where you are having troubles, some of your paths to the JS files are incorrect—for the very same reason. So I recommend converting all your file paths (CSS, JS etc.) to that format (that is, either the full URL to the file or with a / at the front.)

Ideally, you should be using something like PHP includes, also, so that you only have to edit one file that is included in the <head> section of each page.

1 Like

@ralphm

Ok got it. Funny you should mention PHP: I’m working my way through a udemy PHP course as we speak.

Thanks for your help.

1 Like

santafe,

Please copy this file to your PC and place it in the http://www.wwbydesign.com//minor/joinery/ directory.

butterfly-keys.html (13.8 KB)

Be sure to scroll down the page.

Let me know if it works.
Thanks

1 Like

@ronpat

Worked like a charm!!!

I will take a microscope to what you did but have noticed that you added ‘…/’ to all the js scripts. I was under the impression that so long as I was linked correctly to my css files my styles would work correctly. I suppose it was not as simple as that. What I could not understand was that if the page styling worked correctly why wouldn’t the nav styling?

Anyway, you have solved my problem and for that I will forever be grateful to you. I should probably be taken out behind the barn for a good whipping, but I suppose making mistakes and learning from them has always been the best way to learn. Even if you’re embarrassed in the process.

I sincerely appreciate your time and effort in helping me solve my folder path structure problem.

2 Likes

You’re welcome, santafe.

All I did was fix the relative paths. You could have used either of the methods suggested by @RalphM and accomplished the same thing.

 
Please note that on the butterfly-keys page, you will need to make that same adjustment to the paths of two of the pages in the primary-nav selector, Japanese Saws and Hand Tools…

            <ul class="primary-nav">
                <li><a href="../minor/japanese-saws.html">Japanese Saws</a></li>
                <li><a href="#0">Planes</a></li>
                <li><a href="#0">Wooden Planes</a></li>
                <li><a href="#0">Carving Gouges</a></li>
                <li><a href="../major/hand-tools.html" class="goBack">Hand Tools</a></li>
                <li><a href="../../home.html" class="home">Home</a></li>
            </ul>

 

Plus, in pursuit of valid code, the <figcaption> tag should reside inside a <figure> tag. All you have to do is change the parent <div> tags to <figure> tags around the images. Example…

                    <figure>
                        <img src="../../images/butterfly-key-01.jpg" alt="butterfly keys" class="figure">
                        <figcaption class=fig-caption>
                            Photo 1.  Butterfly keys in walnut crotch coffee table top.
                        </figcaption>
                    </figure>

 

Finally, down at the bottom of the page, the copyright div is missing a close tag. Instead of adding a close tag, though, I’d recommend deleting the <div>s and combining the css rules, something like this…

footer.copyright {
      position: fixed;
      bottom: 0;  
      left: 0;
      right: 0;
      margin: 0 auto;
      max-width: 1440px;
      background-color: rgba(20, 20, 20, 0.6); /* same background color as the menu drop down */
      color: white;
      /*border: 1px solid red;*/ /* used for tesing purposes only */
      text-transform: capitalize; 
      font-family: Titillium, Arial, sans-serif;
      font-size: 0.9em;   /*  my code  */
      font-weight: 100; /* orig was 700 */
      /*color: white;*/
      text-align: center;
}


      <footer class="copyright">
          <p>Copyright 2010-2016, PAB Digital Design</p>
      </footer>

The class “copyright” isn’t actually needed since all of the styles are unique to the footer tag. I used it for testing purposes. Your choice .

1 Like

@ronpat

I hear you loud and clear on all points.

I knew full well that moving the butterfly-keys.html file into the joinery folder was going to wreak havoc with my folder path structure, but in order to organize my files into their respective subcategories I took the plunge and hoped for the best. And ‘for the record’, my plan was to get my page and nav styling paths correct and then I would correct all of the other links that I knew would now be out of sync.

I will spend the day doing some ‘reverse engineering’ by breaking some of your paths to try and determine what was preventing the nav menu styling from working because as best I can tell my original styling links were identical to what you had in your version of the butterfly-keys.html file. So there is something else that you changed that brought the nav styling back to life and I would really like to know precisely what that is.

I will absolutely make all of the changes that you have so thoughtfully suggested.

Lastly, I would strongly encourage you to teach a HTML/CSS class at udemy.com (or here on sitepoint??) because you are a goldmine of knowledge on both of these subjects.

Warm Regards!

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.