Hi
I’ve a problem (obviously) and I need your help.
First off, I’ve noticed two things when creating threads on forums.
[LIST=1]
[]I tend to create long threads in the hopes that explaining my problem in detail will lead to improved replies.
[]Very few people actually have the time, energy, or attention span to read such posts.
[/LIST]
So I’ve taken an idea from some websites. On some websites, you can choose to view the website as a full Flash web page, or as a simple in comparison HTML page.
So, you can either read the long version of my problem. Or the short version.
So before you get bored and close this page, heres the
Short version:
I’m trying to turn this CSS menu: http://tutorials.alsacreations.com/modelesmenus/hd1.htm#
Into a CSS menu that looks like this: 
and acts like the menu found on the http://adobe.com home page
The Immediate problem and delay is that the webpage has to aligned to the center of the user browser, but I can’t find away to center the page, without leaving the CSS menu behind. Well, I can, but the method then creates a problem when the menu is rolled over.
(See below for more detail)
Well, that was the short version
Now the
long version:
I usually work with and create full Flash websites, when I have to create a website at all. I understand HTML, but my knowledge of XHTML, CSS, and Javascript is limited. This will change, but unfortunately, not in time to be relevant for this project.
I’ve created several Full Flash websites for this small company at the request of a family member before. But this time, the site will have very few flash elements.
Tools being used:
[LIST]
[]Webpage designed in Adobe Illustrator CS2
[]Imported into Adobe Photoshop CS2. Guides created, slices created
[]Page sent to Adobe ImageReady. Image slices and HTML page exported
[]Page opened in Adobe/Macromedia Dreamwaver 8 and additional elments such as text added, and several one colour graphics replaced with small 1x1 pixel gif or by hexadecimal colour value through code
[/LIST]
I’m not the designer of the website, I’m just the one who’s supposed to take eps files and turn them into a working website.
The website is supposed to be based off of http://www.adobe.com
The problem I’m having is related to creating the main navigation menu Adobe is using, or at least one similar to it.
I originally didn’t know where to begin, and created a thread asking for help.
I received some very useful guidance, code and links.
Now my menu is within site of being completed but It still has some issues.
I’m working on turning this menu: http://tutorials.alsacreations.com/modelesmenus/hd1.htm#
Into something that looks like this:
and works like the one found on the http://adobe.com home page
After some experimentation, and looking up of CSS tags and attributes in Dreamweavers CSS reference I managed to remove the spacing between the individual menu elments: http://albertaintegrated.com/kirupa/Kirupa-menutest/menuTest-1.html
I managed to increase the menus height without a problem, as well as find where to replace the background colour with a background image.
Although I couldn’t find a way to add individual background images to each of the menu elements without the image being applied to all of them.
And when I tried editing the width of the menu elements, I just ended up creating large white gaps between the menu elements, they refused to squish together.
These two problems led me to duplicating a large chunk of the menu code and creating two menus on the page to work side by side: http://albertaintegrated.com/kirupa/Kirupa-menutest/menuTest-1.1.html
That worked. and I proceeded to go back to Photoshop and reslice the website. Because since the menu and logo are the same for EVERY page on the website, I’ll be loading the top part of the page via a small and simple php script I found here: http://www.phpfreaks.com/tutorials/8/2.php
After splitting off and exporting the top of the pages I ran into problems with the menu. I imported the code required by the menu into the new top html document (extension will be renamed later) I moved the menu into place: http://albertaintegrated.com/kirupa/Kirupa-menutest/Top-01.html
Works nicely, but I HAVE have the page center itself in the browser window. Just like I’ve done for my previous Flash sites, just like Adobe.com has done, and the majority of pages on the web have done.
But when I go to center the page I get a result like this: http://albertaintegrated.com/kirupa/Kirupa-menutest/Top-01.1.html
WHen the page centers, it leaves the menu element behind (would be elements, but I’m waiting for the one menu to work before duplicating more) This is because the CSS position is defined as absolute, with top and left coordinates. I can change the position to static, which seems to work at first glance: http://albertaintegrated.com/kirupa/Kirupa-menutest/Top-01.2html.html
But it falls apart when you rollover the menu.
As you can see by the pages code, I’m exporting the html from imageReady as a collection of tables. I can export the page as CSS. And I have: http://albertaintegrated.com/kirupa/Kirupa-menutest/Top-02.html
But I’m having alot of trouble for some reason importing the menu code into the midst of that CSS code while getting the menu to show up and work. Not to mention the fact that I don’t know how to align the site to center when its composed of css like that. I tried adding an align=“center” to the main div container, but it doesn’t do anything.
So thats it. I’m stuck for now, I’ll keep reading of course, but I really think I need someone to help to pull me out. Hopefully your the one who can to do that.
As a side note, there’s a temporary lesser problem with the menu that needs to be solved. (temporary meaning it won’t be less once this problem is out of the way) Namely when you hover over the menu, the sub menu(s) appear. But they do not go away when you stopped hovering over them and there master menu, unless you hover over another menu.
This seems odd. And I just know that I won’t get away with leaving it like that. So I need suggestions on getting the submenus to disappear once you go off them (like over the main content of the page, or out of the browser etc…) Many sites have their menus do that, but I don’t know how to do the same.
But like I said its not of the highest priority right now. However, I will have to create a new thread centered around it later if I don’t find a solution for it.
Thank you for reading this.
I’ll be checking frequently for a response and will post a reply fairly quickly myself if I get one. Although, I can’t check on Saturday.
-Lem
