Question about Headers and Separators

Poster: ACalder
Dated: Saturday May 7 2005 - 22:54:36 BST

Hi,

I'm trying to make this:
http://fas.harvard.edu/~freedoms/miloni ... lonic.html

resemble this (as closely is as feasible):
http://fas.harvard.edu/~freedoms/miloni ... image.html

I know that I'll have to put the logo in a layer and put it on top of the menu and I've given up on creating the thin border lines that go in between the rows (I only want the horizontal lines, not compete borders between items)

I've tried to use separators to mimic the separators in the image-based menu but obviously have goofed somewhere:
http://fas.harvard.edu/~freedoms/miloni ... rator.html

If someone could tell me 1. what attributes I should be using to get a header to resemble the one I have on the index_image.html page and 2.where I'm going wrong with the separators, I would be phenomenally grateful.

I tried splitting it into 3 rows and using 5 header items at the top, but that didn't seem to work either.

All the code should be visible from http://fas.harvard.edu/~freedoms/milonic/


Even a small hint would be a big help.

Thanks!!

Poster: Ruth
Dated: Sunday May 8 2005 - 2:31:00 BST

Hi,

You need to do a couple of things

1) put a semi_colon after the separatoralign=center; you have left that off and that is causing the shifting problem.

2) you will need to make two separators, one that has the yellow color and one that has the darker color for the items in the bottom row.

As to the border, you can make a border using a css class. With a menu not using divides you would code top and bottom and the left and right would be 0px. However with the divides, if you do that it doubles in the middle because you get a bottom on the top row and a top on the bottom row. But, you could code the class only for the bottom border and it will give you that line in the middle and bottom. There's nothing I can do about the top.

If you place this in your style sheet [or on all the pages, which seems a lot of work] you'll get a border in the middle and bottom. If you don't mind it being double i.e. 2px in the middle then just set the top to 1px also.

You could also do this without using divides and using the table you have now, but making each row of the existing menu items span all the columns. Then you would create two menus, one with the top row and one with the bottom row. You would do this and set both to be always visible, putting each in its own table row. Hope that made sense.

Ruth

Poster: Ruth
Dated: Sunday May 8 2005 - 7:02:02 BST

Hi again,

I will bet you are pretty frustrated right now. And, I'm embarrassed. When I gave you that information, I had forgotten that I made a correction in your original file. There is a space on the second line of the menu between the semi-colon after showmenu=people; and the word text that is what is causing the shift.

I've put up a test page for you to see and a zip file with all the data.

There are two menus, one using class with the border on the bottom [meaning middle and bottom] and one without borders. The zip also includes the images. I hope this helps, and I apologize for not seeing the error sooner.

Test1

A couple of things to note. Because this uses divides, when you put the separators on the bottom they will have the yellow background. That's the menu background color. The only way to really do what you want is to use images. Though I believe you could probably do the top line with the separators as you have them, but the bottom will need images with matching color.

Ruth

Poster: ACalder
Dated: Monday May 9 2005 - 0:30:17 BST

Okay.
Thank you so much for those 2 posts. Yes, I was getting a little frustrated but that's only because I'm the one who left out the semi colon and goofed on that one space. Thanks for the fast help.

I'm closer now, but still not there yet. I just can't make the border appear and I copied your stuff in line by line. (this menu is slightly different so I had to cut and paste rather than just grab the work you did).

Here is the latest:
http://www.fas.harvard.edu/~freedoms/test/index.cgi

Had to put in 2 menus, because otherwise the spacing between items was uneven (items previously were centered but top to bottom, not left to right)

http://www.fas.harvard.edu/~freedoms/te ... _bottom.js
http://fas.harvard.edu/~freedoms/test/menu_data_top.js

Also, a new wrinkle, I guess my stylesheet is causing the links in the menu to be underlined. I'm hoping I can create a special class for the header and set it to decoration=none to get rid of that problem.

I think it's going to be great when it's finally done. Thanks in advance for any additional wisdom about the border problems.

A.

Poster: Ruth
Dated: Monday May 9 2005 - 6:52:26 BST

Hi,

I don't work much with divs or css. That's my disclaimer On the border. You didn't put in the .border class I had on the html page in your stylesheet.

As to having two menus, you don't need to menu files for that, just for future reference. You can put them in one file, set the top/left properties for each and set each to alwaysvisible=1.

Now, as to the new page. Try this and see if that is what you want. I tested it in Netscape 7.1, IE5.5, Opera 7.54, Firefox 1.0.2 and Firebird .07 [old firefox] and it works OK. There is a 'note' on the html page itself in the head for you.

To explain in a little more detail, I put everything into a table at the top of the page. To put a menu in a table so you understand, you cut it from the data file and put it between script tags and put a second drawMenus(); at the end of the 'main menu'. You leave all the style and submenus in the data file and you call the file right immediately after the body tag. The submenus have to be built first before the main menu is read.

Here is the page and thezip file. Sorry it took so long, I'm not very good with css which was needed for the reddish borders, and I did get one at the top of the top menu [actually it's a border on the top line of the table cell in which the menu is using border-collapse] but it doesn't show very well.

As a side note, when you use divides the top and bottom 'cells' match in width, so if you have uneven numbers of aI strings that can cause a problem in design.


Forgot to say. I put decoration="none"; in the data file. I also put in ondecoration="underline"; so when you mouseover a link it underlines in the menu, if you don't want it just remove it. You might also take a look at the menu data file so you see how I did the styles for the menus and also at the tables because I have styles and bgcolors in the table cells.

Ruth

Poster: ACalder
Dated: Monday May 9 2005 - 12:50:00 BST

I'm supposed to be working on another project this morning, but I couldn't resist looking at your reply. It's fantastic--looks just right.
Can't wait to implement. Sorry for overlooking your stylesheet on the last go, I'll make sure to include everything this time.

I'll let you know when it's up.

Can't thank you enough.

A.

Poster: Ruth
Dated: Monday May 9 2005 - 16:41:21 BST

Hi,

Just so I didn't confuse you. I didn't do anything to your style sheet on this new page. I just put the stuff in style tags in the head and it's different than the previous code. So if it works then you'll need to include that in the style sheet you use Good luck.

Ruth