Member Avatar for manchurianCEO

Hi,
I am working on a website and I am having trouble with the index bar. Perhaps this is the way it's supposed to be but I though a PHP meant only having to have one file for all the pages. So,

When I click to a link that gets me to a page inside a folder, the page opens but the menu will not contain the CSS style. Only the raw links.

So I noticed if I include the menu_bar.php inside that folder it will show perfectly with CSS. But now, if I add a new link, I also have to modify the copy of menu_bar.php inside each folder.

I was thinking there may be a problem importing the CSS but not sure what's going on.

bottom line, bar_menu.php will execute CSS in any page in the main HTML directory, but when going to a page that is inside a folder, CSS disappears.

Any ideas?!

Thank you!

  • 4 Contributors
  • 7 Replies
  • 137 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Member #120589

Dani AI

Generated

The symptom here is almost always a URL-resolution issue: a relative stylesheet path inside the included menu_bar.php is being resolved relative to the page the browser requested, not relative to the folder that contains the PHP include. That explains why sees the menu styled on pages in the site root but not for pages served from subfolders. and were on the right track (absolute/root references), and ’s preference for a root-based link is a common quick fix.

Concrete debugging steps to confirm the cause:

  • View the page source on a subfolder page and check the actual href the browser is trying to load for the CSS.
  • Use the browser DevTools Network tab to see the request and HTTP status (404/403 vs 200) and the Content-Type (should be text/css).
  • If the file is fetched but styles don’t apply, check selector specificity/order and that the menu HTML matches the CSS selectors.
  • Clear caches or disable caching in DevTools while testing.

A robust, maintainable approach: create one canonical base URL for the site and generate absolute URLs for public assets from it (generate server file paths separately when including PHP templates). Example pattern (put in a single config file included site-wide):

<?php
// config.php (load once)
$scheme = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
define('BASE_URL', $scheme . '://' . $_SERVER['HTTP_HOST']);

// usage in templates: echo BASE_URL . '/path/to/asset.css'
?>

Notes and cautions: $_SERVER['DOCUMENT_ROOT'] is a filesystem path (use it for server-side includes), while $_SERVER['HTTP_HOST'] / scheme are for building public URLs. A <base> tag can also normalize relative links but will affect all relative URLs on the page, so use it carefully.

Recommended Answers

All 7 Replies

Member Avatar for Member #120589

Do you have a relative referenced CSS file?
If so, perhaps making it absolute referenced will help:

href="/css/main.css" instead of "css/main.css"

Member Avatar for manchurianCEO

Can you tell me how should it go here?
this is what I got currently

type="text/css">@import url('href="menu/menu_style.css"');</style

Member Avatar for manchurianCEO

Do you have a relative referenced CSS file?
If so, perhaps making it absolute referenced will help:

href="/css/main.css" instead of "css/main.css"

Can you tell me how should it go here?
this is what I got currently

type="text/css">@import url('menu/menu_style.css"');</style

Thank you!

Edited by manchurianCEO because: n/a
Member Avatar for almostbob

this type="text/css">@import url('menu/menu_style.css"');</style means load the css file inside the menu subfolder of the current folder
doesnt work when you are in a subfolder because the menu folder is no longer a subfolder

<style type="text/css">@import url('/menu/menu_style.css"');</style> 
<style type="text/css">@import url('http://www.yoursite.com/menu/menu_style.css');</style>
<style type="text/css">@import url("<?php echo $_server['document_root']; ?>/menu/menu_style.css");</style>
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/menu/menu_style.css">
<link rel="stylesheet" type="text/css" href="<?php echo $_server['document_root']; ?>/menu/menu_style.css">
<link rel="stylesheet" type="text/css" href="/menu/menu_style.css">

all work
take your pick

Edited by almostbob because: n/a
Member Avatar for manchurianCEO

Awesome! thank you

this type="text/css">@import url('menu/menu_style.css"');</style means load the css file inside the menu subfolder of the current folder
doesnt work when you are in a subfolder because the menu folder is no longer a subfolder

<style type="text/css">@import url('/menu/menu_style.css"');</style> 
<style type="text/css">@import url('http://www.yoursite.com/menu/menu_style.css');</style>
<style type="text/css">@import url("<?php echo $_server['document_root']; ?>/menu/menu_style.css");</style>
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/menu/menu_style.css">,
<link rel="stylesheet" type="text/css" href="<?php echo $_server['document_root']; ?>/menu/menu_style.css">
<link rel="stylesheet" type="text/css" href="/menu/menu_style.css">

all work
take your pick

Member Avatar for Stefano Mtangoo

take your pick

My Fav is this one

<link rel="stylesheet" type="text/css" href="/menu/menu_style.css">
Member Avatar for Member #120589

Mark as solved?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.