Two menus per page; one same and one varies by page

Two menus per page
- one is the same on all pages and is included in template - top horizontal menu

- second menu is vertical on left side of page - will be different for each set of pages

- This works fine for the first set of pages; for the second set of pages, the menu looks ok when in preview but on actual page, font size and bold on (same at the top menu on the page. I have carefully reviewed all the html on the page and see no difference

help please

Donate.html

AboutUs.html


thanks

victor

Hi Victor,

Depending on which page you are on, there are various different css files and file paths referred to, - I haven't traced them all, but these are just some of them:

../../CSSMenuWriter/cssmw8/menu.css
../CSS/main08.css
CSS/main08.css
../../CSSMenuWriter/cssmw1/menu.css
../CSSMenuWriter/cssmw1/menu.css
CSSMenuWriter/cssmw1/menu.css
../../CSSMenuWriter/cssmw0/menu.css


Also, some pages link to more than one cssmw css file.

Ideally, you would need to have only two cssmw css files (one for each menu) that all your pages refer to for consistency and in order to keep track of style changes.

Best to choose one good css file for all pages to link to and get rid of the rest, otherwise keeping track of styles will be a bit of a nightmare and you will end up with different styles on different pages.

Thanks for the help

I have cleaned up one page

AboutUs.html

but I an not sure what to do next

I want to put a vertical menu in the left column - it would be the items that are visible when you put the cursor over "About Us" on the horizontal menu - same font size and color

How do I do that

thanks


victor

Hi Victor,

Sorry if I was unclear in my last post. It's fine to have two CSSMenus on the same page, and your plan for the 1 x horizontal and 1 vertical is a sound idea.

What I was getting at before, is that you had the page pointing to each cssmw item (cssmw0 and cssmw8) in more than one location. I believe that this was what was causing you to have varying results in the way the menus looked (e.g the bold / normal text).

When you create a menu with CSSMenuWriter, it will create one stylesheet and one javascript file for each menu. If you have more than one of these items with the same names but in a different directory, and have the page refer to those also, then it is easy to lose track of which stylesheet you are referring to!

All that needed to happen with your page was to remove the references to the duplicate css files. There was nothing wrong with having the vertical menu the way you had it, you were on the right track, - there was just a little confusion about the stylesheets.

If I was unclear, I apologise. If you need any more help with this, post back.

Edit: Just to add to that, - as your top horizontal menu will be the same on each page, you will only need to have created this the one time. For the vertical menu, this will (I take it) be different on each page. As long as you don't change the directory structure of your site, these vertical menus will create new menu include pages (cssmw/menu.php, cssmw0/menu.php, cssmw1/menu.php etc.), and you can use the same CSSMenuWriter style preset for each one.

Thanks for all the help - I am progressing well with your excellent guidance - but I do have another question. The main horizontal menu is part of the page template. The side menu will be in an editable area.

The following text

<style type="text/css" media="all">
<!--
@import url("../../CSSMenuWriter/cssmw7/menu.css");
-->
</style>
<!-- TemplateBeginEditable name="menu_ie" -->
<!--[if lte IE 6]>
<style type="text/css" media="all">
@import url("../../CSSMenuWriter/cssmw7/menu_ie.css");
</style>

<![endif]-->

is not in placed in the editable area but in the non editable area with a message that it will be lost if an updated template is applied to the page. How do I resolve this?

thanks so very much


victor

Templates can be awkward things to manage. The secret seems to be to make sure that all the paths in it are correct from the start (and that your site structure will not change), and will therefore place the correct paths in all new pages created using it.

Before going any further, could you please create a new page from the template (don't bother putting any content in it) and save the new page in your 'AboutUs' folder, as 'test.html'? Then upload the page to your remote server.

File > New > Page from Template > (your template) > Create

This is just to check the current paths being created by your template. We can go on from there.

neilo

test.html

thanks again - I am a volunteer with Habitat and not a professional web developer - just trying to help out

victor

Hi Victor,

Thanks for that. This does seem to show that the template itself is creating a couple of wrong links in your new pages' code. Where it shows links beginning with ../../ should really be showing ../

However, the pages and menus themselves seem to work OK - apart from the some-bold, some-normal text in the links.

As there are a couple of different templates in use on your site and a couple of different cssmw types (in the top horizontal menu and obviously more in the vertical menus) I am reluctant to mess with the templates remotely, so I suggest for the moment we concentrate on just getting the stylesheets the same so that the text presents as you like it.

Can we work through this one (main) page at a time? Please could you let me know which page (if any) shows the menus as you would like them all to be?

This is what the final page should look like

AboutUs.html

Thanks Victor,

Not sure what you want to do with the horizontal top-menus, at the moment you have four of them (AboutUs, Donate, ReStore, Home) as CSSMenuwriter menus, and the other three (Homes, Volunteer, Photos) as javascript menus. Are you planning to change those too?

You can change the vertical (CSSMW) menus by adjusting the css as described below, but the vertical sub-menus on all the 'Homes' and 'Volunteers' pages (18 of them) and some of those under the other pages which are still javascript menus can only be changed in the javascript files themselves in the 'LeftMenuData' folders in their respective directories. I don't know if you are keeping those javascript menus or changing them to CSSMenuwriter. Have you decided?

Your 'Photos Pages' has a different menu system from the rest - specially for the gallery pages. I take it that shouldn't be touched.

For the moment, to change the vertical sub-menus for the main (CSSMenuWriter) 'AboutUs', 'ReStore' and 'Donate' pages to look like your 'AboutUs' page, you will need to make these changes to your CSS files:

1. In CSSMenuWriter/cssmw1/menu.css

Change font-size from '16' to '11' , and change font-weight from 'bolder' to 'normal' in this rule:

ul#cssmw1 > li > a {
	background-color: #51b948;
	background-image: none;
	background-position: left;
	border-style: none;
	color: #FFFFFF;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px; /* change this to 11px  */
	font-style: normal;
	font-weight: bolder; /* change this to normal  */
	margin: 0 0 0 0;
	padding: 3px 3px 3px 3px;
	text-decoration: none;
	text-transform: none;
	width: 138px;
}

2. In CSSMenuWriter/cssmw2/menu.css

Change font-size from '16' to '11' , and change font-weight from 'bolder' to 'normal' in this rule:

ul#cssmw2 > li > a {
	background-color: #51b948;
	background-image: none;
	background-position: left;
	border-style: none;
	color: #FFFFFF;
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px; /* change this to 11px  */
	font-style: normal;
	font-weight: bolder;  /*  change this to normal  */
	margin: 0 0 0 0;
	padding: 3px 3px 3px 3px;
	text-decoration: none;
	text-transform: none;
	width: 100px;
}

4. Your main horizontal menu in your 'Home' page (index.htm) - is currently linked to the 'cssmw1' styles and script, so if you change that, it will also change the vertical menu in your Donate page. If you don't want to change it you can leave it as it is. If you do want to change it, you will need to seperate off the css files.

If you are not planning on changing the javascript menus under the 'Homes' and 'Volunteer' pages and want me to look at changing those font styles, let me know.