dropdown menu in CSS file & index pg...

User 110693 Photo


Registered User
24 posts

I hestate to ask again, I've received such great help here :D but it has been a while. I've stepped away from the site, due to time issues on my end & design/content issues on the client's end. But I think we are all on the same page again.

The site will have many pages, as you can see by the current site, http://www.lakelinden.net

So I would like to make one drop down menu & be able to change it, if (I should say when) another page is added/needed & not have to go into each page & change it there...that is the perk of CSS isn't it :) But currently my menu is in my index.html file & already it is changing. Some of what people want on the site, doesn't really exsist, so the menu will have to change. But if they create some of these documents in the future they will want to put that back on the menu. I do not want to open every page to make that change. The drop down menu will be the same for each & every page - consistent navagation is key for the client.

So is it possible? & if so does the menu code go into the CSS file or does it get its own file & is referenced. If it is referenced, does that happen in the CSS file or in the HTML file.

Here is the site I'm working on, http://www.lakelinden.net/Latte

I have been trying to find this info, as I'm sure it is out there somewhere but become so frustrated with my site that I just can't look for it anymore. I have already removed the ribbon like banner from the top (like the one at the bottm, it was to be behind the menu) because I was getting several little banners in each drop down & they were interfering with my drop downs. I have managed to get the calendar on the site, but am not pleased that it previews in a pop window, doesn't show multiple events on the same date, until you toggle through the preview window & doesn't really invite people to toggle. I may have to list the events in a box instead, but will deal with that later.

Also, I've edited a CC template & would like to use it for the template for the rest of the site, is there an easy way to do that?

Thank you so much for any help,
Jess
User 184085 Photo


Ambassador
1,707 posts

You can use the object tag to call in your menu html file, I've had some success with it.

this link might help.

http://www.coffeecup.com/forums/website-design-and-development/problems-with-object/
Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 474778 Photo


Registered User
215 posts

Dear Jess,

One way to get exactly the same stuff on multiple pages is to use the PHP include() function.

That "stuff" could be a page header, a page footer, a site navigation menu in Javascript etc.

Background explanation: Whenever a browser demands a page, your hosting service examines the file name for that page. The host transfers files ending in ".htm" or ".html" to the browser directly, without even looking inside them.

However, for any page file ending in ".php," the host opens the file and looks for embedded scripting written in the PHP language. The host does whatever the script requires, perhaps modifying the HTML code, then sends the result along to the browser.

The browser has no idea that the host has done this. It simply renders whatever it's sent.


You can take advantage of this at the cost of a little complication. Here is the outline:

0) Think over how you can reverse any changes that you might end up not liking. A good way to do this is to simply backup the entire site to a new folder before you touch anything.

1) Rename files that are to have PHP scripts embedded in them. For instance, "index.html" becomes "index.php."

2) Identify the stuff that you'd like included on every page in your Web site. For example, suppose you use an unordered list for navigation among three pages. The HTML might look like this:

<ul id="nav_list">
<li>
<a href="index.php">Home Page</a>
</li>
<li>
<a href="another_page.php">Another Page</a>
</li>
<li>
<a href="yet_another_page.php">Yet Another Page</a>
</li>
</ul>

3) Create a new file. Put the above navigation stuff into it. Close it. Name it something like "JessInclude.html."

4) Remove the navigation stuff from each page. In its place, wherever you would like the stuff to appear in each page, type this:

<?php
include('JessInclude.html');
?>

You may have to provide a more elaborate path to the file in order to help the include() find it, such as

<?php
include($_SERVER['DOCUMENT_ROOT'].'/JessInclude.html');
?>

5) Note the id="nav_list" inside the <ul> tag shown in the first code sample. You can refer to this name in your CSS in order to style the navigation stuff identically no matter where it's included.

Whenever you want to add a page to your site, change a page's file name etc., you make the change just once in "JessInclude.html" and the update appears across your site auto-magically.

If you got this to work, congratulations: You are now a server-side PHP programmer! You could use the same concepts to do great things, like tap a database for product information at the request of your site's user.

Now here is the downside. The CC HTML Editor does not understand PHP, and neither does the browser on your PC. So you can't preview the effect of the include() using these tools by themselves. You must either view your site on your hosting service or install a local-hosting package like Wampserver or XAMPP on your development PC.

Alternatively, you might look into CoffeeCup's S-Drive service, which cuts through some of the complication.
halfnium -AT- alum.mit.edu
Yes, I looked just like that in 1962.
User 110693 Photo


Registered User
24 posts

Halfnium,

Thank you!!! I hesitate to even type this, can it really be that easy! I don't want to jinx it, :lol: I backed up the entire site to my external hard drive & went to work. I just pulled out the code for the drop down menu & got worried for a minute, it didn't work the 1st time, I refreshed it :/ (I forgot to put the menu code into the header). Once I added that it was perfect!!! Thank you, thank you, thank you!

So that means I can put all my title stuff (name of village, picture, etc.) & my footer stuff, in different include() files! :D If I could have done this the last time I designed the site, this redesign would have been a piece of cake, since the content of the majority of the pages doesn't change that much.

Thanks again! This is exactly what I needed.

User 110693 Photo


Registered User
24 posts

I knew I should be hesitant to get excited...it looks amazing in Chrome, exacting what I want.

But in:
FireFox 14: the pic is off to the right
Safari 5: the content has alignment problems, the navy background boxes are missing & the text is black, navy & white vs the yellow they should be
IE 8: only the title shows up, the rest of the page is blank

So what do I have to add to my php files or my css file, so all the browsers read the page so they all look similar to the user?

Thanks,
Jess
User 122279 Photo


Senior Advisor
14,624 posts
Online Now

Have you uploaded these new files to somewhere, so that we could take a look at it?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 110693 Photo


Registered User
24 posts

Oh, yes, www.lakelinden.net/Latte/index.php
The include files are IncludePics.html, IncludeDisclaimer.html & IncludeMenu.html in the same Latte file & the CSS is default.css in Latte/stylesheets

Thanks so much,
Jess
User 184085 Photo


Ambassador
1,707 posts

I could be wrong but are you sure you want to declair

<!DOCTYPE html>

and

<xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

and

<xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

and

<xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

all in the same page?

try stripping out the doctype stuff from your linked in pages and see if that helps.

Volunteering to help :)
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
User 187934 Photo


Senior Advisor
20,266 posts

Very interesting source code.;)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 271657 Photo


Ambassador
3,816 posts

CC Editor 2008 <<<<
Maybe an update is in order ;)

Halfnium, thanks for the include instructions... I've been wanting to try that out and your instructions are very clear (not too scary) :D
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.