I've been trying to figure out this drop down kind of pop-out menu from http://www.alistapart.com/articles/horizdropdowns I'm not exactly sure what it is I am doing wrong. On the site I've noted, it talks about CSS, and Javascript, and IE fixes, so I'm getting mighty confused. My main focus is to get the verticle drop down menu on my page, and everything else to be in line as well. But I can't even get the menu to show up. I've put the main part of the lists in a CSS file here:

menu.css I'm not even sure if that is right. I looked at the source code on the demo page they had, and it had all that 'head, meta, title' stuff. But I didn't think that was supposed to be in CSS. But none-the-less it was there and it was working, so I didn't change it. Next I have the Javascript part:

drop_down.js That was copied 'as is' from the site. I know nothing of Javascript, so I was just trusting that they knew what they were doing. After that I had the style:
menustyle.css This is where I did get a bit confused. In the directions on the site I went to, It made changes along the way. One of them was about adding the 'li:hover ul, li.over ul { display: block; }' and I wasn't really sure where to put that. Another thing I wasn't sure about was where to put the IE fix. I just put it at the bottom. And finally in the end, this is where it ended up in my main page:

main.php

If anyone can see why the menu isn't working, please let me know. It's probably very simple. It usually is when I can't figure it out.

AListApart is one awesome site for CSS. That's one of the sites which every CSS guru recommends for lots of stuff.

Here's a layout that I made using the 'Suckerfish Dropdown menus' from AListApart:

http://www.abhiram.be/oldlayout/
http://www.abhiram.be/oldlayout/mystyle.css
http://www.abhiram.be/oldlayout/iefix.js

The IE fix should be copied into a separate file called (as in your case) drop_down.js. What this fix does is, it simulates the :hover attribute for list elements for IE. IE doesn't support :hover for any element other than hyperlink (i.e. a:hover). The fix is then included in your header using a <script> tag.

Then to make the appearance the same in both firefox and IE, the code:



should be placed at the beginning of the CSS file menustyle.css (as in your case).

CSS menus take a little time to get used to, but they're not that difficult. I was as confused as you are when I started out with it, but just hang in there .

For some reason, everything I try doesnt seem to work. I follow it exact and still.... nothing. One thing I was wondering though. Do you have to have something special on you computer to do Javascript. I cant open that iefix.js file on this computer because it says I don't have a program to open it. Is this maybe the problem why nothing is showing up when I type out my scripts?

I think I may know what the problem is. I had a background for my site was a picture hosted at photobucket. THe time expired for it to be there, so I no longer have a background. What I am thinking is that the menu needs the anchor of the background, and since I don't have a background at the moment, the menu will not show up. I don't have time right now to check out my theory. I can't make a background on the computer I'm using (my roomate doesn't have Photoshop) and I have no time to seach for a background now either. Hopefully putting up a background will solve my problem.

Okay, I've been having a look at your code and playing about with it, and I've got it working now. But there are several things that need fixing. I'll try to make it all as clear as possible.

First of all:

You're quite right, HTML doesn't go in CSS files. That code is actually the code for the page itself, not part of a CSS file. Since you have your own pages that you want to use the menu on, you don't need the html/head/body part. Just copy the part from the first "<ul>" to the last "</ul>" and paste it into your own page, wherever you want the menu to go.

See where it says "<ul id="nav"><ul>"? That second <ul> is totally unnecessary, and it's messing up the rest of the page. Delete it.

You aren't finished with menu.css yet, though! Find the line that says, "<script type="text/javascript" src="drop_down.js"></script>" and copy that to main.php. It should go in the head section, not the body of the file.

Now have another look at main.php. See your two <link> tags? They should be in the head section, not the body section. (They will probably still work in the body, because browsers are good at figuring out poorly written HTML - nevertheless, it's against the rules of HTML and could cause problems with your page.) The second one has a problem. Notice the REL=stylesheet? It's got a quotation mark at the start of "stylesheet", but not at the end. Add one at the end as well.

We've moved all the important code from "menu.css", so we aren't using that any more. You can delete it now. Change the HREF in the second LINK from "menu.css" to "menustyle.css", so that it links to our real stylesheet. And don't forget to put in "http://" at the start of "ftv.astahost.com/menustyle.css" - otherwise, the server will look for menustyle.css in a folder called ftv.astahost.com, instead of looking for it at your website.

And now your menu should work! In case that wasn't very clear, here is the revised code of your "main.php" file:

O.K. I have just one question though. I wanted it to be that I could use the menu on many pages without having to type it over and over again. Thats why I was using CSS. Can't I just put it in a CSS file and have a link to it in all my pages, along with the menu style?

Instead of having:

or blah blah, try using

in your head tag. Found the thing on www.w3.org. Try searching there for CSS tutorials to get you started. I tried searching they had a really good one, that covers all basics.

Also, try using the PHP include() function to embed the code of another htm/php file in that point.

~souradipm

This post has been edited by souradipm: Jul 17 2006, 02:58 PM

Yeah, HTML does not belong in a CSS file. It won't work there. I see what you want to do and here is the most obvious solution especially since you are already using PHP.

You can put your entire menu in its own file like menu.php.

menu.php:

Then you can simply place all of your style information into a single CSS file. No reason to seperate them. The browser just reads what it needs for the document being shown anyhow. You can still use more than one CSS if you want but it isn't needed. The whole idea is to reduce the number of files you have to edit not increase them.

But in your main.php file, here is where you get to have some fun!
You can now tell PHP to insert the contents of any file where ever you want in your document.
This is done using the PHP function include().

main.php

This would result in the exact same output as was described by Emerald Green. The difference is that you can simple place one line of PHP into any of your PHP documents and that code will be included. Then you need only edit a single menu.php file if you need to make changes later on.

For more information on the subject, try this tutorial:
http://www.astahost.com/cms101-content-man...sign-t7778.html

Hope this helps.

vujsa

I'm not extremely good at CSS Menus and JavaScript. I think that if you just copy and paste the codes that you posted and nto change anything, it will work fine.

If it works, don't change it. If you want to improve it, save a copy and then change it. If it fails, revert to the original copy. That will be much easier.

/(This is my first post)/

I have problems with everything I am doing with my site, it is so frustrating! Ok, I've tried the suggestions here, and I've tried other tutorials but cant get a menu to work. I downloaded a menu maker (CoffeeCup Menu-Maker) and made a Javascript menu that way. Now, when I put the script in a file on my site (in cPanel) and just did the 'View File', it shows the menu as it is supposed to look. But when I use the <?php include ("filename") ?>, I just get this message:



But when I use the <LINK REL="stylesheet" HREF="mymenu" TYPE="text/css">, i get my site as it is supposed to look, but no menu.

So, since I can see the menu fine when I just look at the 'mymenu.js' file, I don't know why I cant get it to work on my other page. Help...Please.