Include master CSS Layout
I have a CSS-styled HTML drop-down menu that I want common across all web pages. Right now, I have the HTML coding in each file, but the CSS link is broken in subdirectories so the stlying does not work. How can I get the CSS to be linked properly and how could I have a master menu so I only have to change things once? Thanks.
Related Article: CSS Layout Problem
is a Web Design, HTML and CSS discussion thread by Exaktor that has 6 replies, was last updated 11 months ago and has been tagged with the keywords: css, layout, problem.
iamthesgt
Junior Poster
119 posts since Nov 2010
Reputation Points: 10
Solved Threads: 0
Skill Endorsements: 0
Copy the CSS file to each of your subdirectories.
Also please post your html link to the css file. I am basing my above solution that your html is calling for the file to be within the directory the file is in.
Lightninghawk
Posting Whiz in Training
296 posts since Jun 2005
Reputation Points: 35
Solved Threads: 9
Skill Endorsements: 0
It is not in the same directory, but the html link is 'relative' - it is down a level.
Here is the link on the master page (index.html):
<link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet"
type="text/css" />
<link href="css/dropdown/themes/default/default.css" media="screen"
rel="stylesheet" type="text/css" />
iamthesgt
Junior Poster
119 posts since Nov 2010
Reputation Points: 10
Solved Threads: 0
Skill Endorsements: 0
Lightninghawk
Posting Whiz in Training
296 posts since Jun 2005
Reputation Points: 35
Solved Threads: 9
Skill Endorsements: 0
Yes, the css works for all the top-level directories. The folder layout is like
Website
-css (Folder)
-img (Folder)
-subpage1 (Folder)
-product1.html
-product2.html
-subpage2 (Folder)
-product3.html
-product4.html
-index.html
-about.html
-subpage1.html
-subpage2.html
The css works for pages "index", "about", "subpage1", and "subpage2". It does not work for those in folders "subpage1" or "subpage2" (i.e. product1, 2, 3, or 4).
iamthesgt
Junior Poster
119 posts since Nov 2010
Reputation Points: 10
Solved Threads: 0
Skill Endorsements: 0
What's the link href to the css in the pages that aren't working? It should be something like
<link href="../css/dropdown/dropdown.css" media="screen" rel="stylesheet"
type="text/css" />
<link href="../css/dropdown/themes/default/default.css" media="screen"
rel="stylesheet" type="text/css" />
Dandello
Posting Whiz in Training
263 posts since May 2010
Reputation Points: 28
Solved Threads: 23
Skill Endorsements: 0
That worked. I thought I had tried that, but I guess I didn't. Do you know how to make a master menu page so the menu is the same on all pages where I can only change it once?
iamthesgt
Junior Poster
119 posts since Nov 2010
Reputation Points: 10
Solved Threads: 0
Skill Endorsements: 0
That can be done using php/mySQL or another scripting language or simply have two files that are the basically the same except that one has "href='../" and the other doesn't. Or use one file with urls for the links (href="http://www.whatever.com/index...)
I assume you are able to use server side includes? If not then PHP will probably be the best route.
Dandello
Posting Whiz in Training
263 posts since May 2010
Reputation Points: 28
Solved Threads: 23
Skill Endorsements: 0
I don't know...I'm very new to this, but I will look into that and probably ask some more questions later. Thanks for all your help.
iamthesgt
Junior Poster
119 posts since Nov 2010
Reputation Points: 10
Solved Threads: 0
Skill Endorsements: 0
Question Answered as of 1 Year Ago by
Lightninghawk
and
Dandello