Wow, I don't know what I did here, mutliple bgimages.

Poster: dmacman
Dated: Monday September 26 2005 - 19:26:45 BST

Hi all,

I am trying to take what I've learned (obviously, not enough yet!) and reproduce our website header with HTML and the Milonic menus.

Our original site had a flash header and I want to change it to as much HTML as possible, and the Milonic menus will let me, if I can figure out what I did here.

http://intheclassroom.org/noFrames/menus/head/head.htm

The header should like like this one when I am done.

http://intheclassroom.org/noFrames/index.htm

I can setup the table, google search and create the ticker in java or flash, but I am trying to reproduce the button effects with Milonic, but have messed something up.

Thanks fo the help in advance,

Don

Poster: Ruth
Dated: Monday September 26 2005 - 22:28:07 BST

You have the itemsize incorrect so the images are beginning to repeat. Because you are using tables, I'd suggest the top logo be made in one piece and put in an absolute positioned div. I made it and a bg image for the wide gold you can get here The following is the code I used on the page. I'm not too good with divs...



Try that it looks just about exactly as the page with the flash. You have the transparent.gif I used as the table spacer to get it down.

Make sure the code doesn't wrap when you paste it.

Ruth

Poster: dmacman
Dated: Tuesday September 27 2005 - 16:47:44 BST

Thanks again Ruth.

Here is what I have so far, based on your code, and some other things I a working on.

Remember, this is a "work in progress" page.

http://intheclassroom.org/noFrames/menus/head/test2.php

I am open to any and all suggestions.

Thanks,

Don

Poster: dmacman
Dated: Tuesday September 27 2005 - 19:07:59 BST

BTW,

I noticed several things.

1) I cannot seem to get the text for the menus positioned lower. I tried valign="bottom"; and it does not effect the text. Right now, it is near the top of the image and I want to lower it 10-15 pixels.

2) That the first 2 buttons you mouse-over are temporarly missing and a white box shows up, but then after you mouse-over the 2 buttons again, they all work correctly.

3) I also noticed on "some" machine with explorer, again, my javascript ticker on the right has a white box. I do not believe the the menus are causing this, but I thought I should mention it, just in case.

Thanks,

Don

Poster: Ruth
Dated: Tuesday September 27 2005 - 20:54:07 BST

Hi Don,

You shouldn't have the table with the menu in it in the div. It has to do with positioning, relative, absolute etc. and how different browsers treat div positioning. I'm sure you've noticed various css layouts that have things like FF workaround, Moz workaround, IE hack [interesting it's a hack for IE but workaround for the others, ] Anyway, because the menu is in a table, position=relative, some browsers may have a problem mostly with submenu position when they open, if you leave it in the div. It would be best to have your top div set and then the table outside of it. You'll notice that's what I did on the one I gave you. The other divs, since the menu isn't in them shouldn't be a problem as they are.

As to the text. I have never been able to get vertical align to work even in css for text. The way to do it in the menu is to create a css class and set the top padding higher than it is in the menuStyle and then call it. Then in the menu, since you have menuStyle for the main menu, IF you don't use that style in any other menu put the class calls there. You can name them what you like, of course.

The reason for calling the same class twice is you want the position to be the same in both the on and off mouse state.

As to the images, I don't believe that is the menu. When I tried to get the images, [copy and paste the url for them] all the images opened right away in the browser, but the overimages when I clicked the go button, it took a good 10 secs for them to load. There is a module for preloading menu images. http://www.milonic.com/menumodules.php I think it's the first one.

One other suggestion, you are using pagebgcolor="black"; so that when the person is on the page the item highlights to show where they are, since you are using bgimages you could either make a different colored one and use pagebgimage=mynewimage.gif; which would show that when on the corresponding page, or given you have the overimage with the arrow, you could actually use that as the pagebgimage also. In the aI you'd add this to the string Remember to use the narrow one for that narrow item.

Hope this helps.

Ruth

Poster: dmacman
Dated: Wednesday September 28 2005 - 15:27:37 BST

Hi Ruth,

I follow you on the pgimage, but not on div issues.

When I take the table out of the div, I get this result:

http://intheclassroom.org/noFrames/menus/head/test3.php

With it in, I get this result:

http://intheclassroom.org/noFrames/menus/head/test2.php

It does not work correctly, atleast, for me.

I will have to add this header to a real page to test the pgimage fix to see it work.

I added the toppadding for the text and updated the page to allow everyone to see it. It moved the text down where I wanted it, but now I need to fix the white gap between the tabs and the middle yellow image.

Thanks for the conitinuing help,

Don

Poster: Ruth
Dated: Wednesday September 28 2005 - 21:31:40 BST

Well, whatever works for you and those using the site. I guess since you're not using submenus it wouldn't matter. I can't really tell from the two pages what you want. The original page had the search box next to the scroll.

To fix the white line below, add padding to the myclass, and remove the imagepadding=2 and padding=5 from the menu_data.js file.

Then call the offclass="myclass";onclass="myclass"; in the menuStyle, where you removed the other padding.

Ruth

Poster: dmacman
Dated: Thursday September 29 2005 - 13:36:03 BST

Sorry for the confusion Ruth.

I didn't even think about it, but I was modifying the test2.php page and what you now see is the end results, not what it looked like when I gave the url in this post.

I made the changes you suggested to this file,and the test2.php file:

http://intheclassroom.org/noFrames/menus/head/test3.php

This is what I am looking for.

I removed the Java Ticker, since I was getting a white box behind some of it and the Java boards are no where near the help as you and this board!

I was moving the search box based on some feedback I was getting here at work.

I think this will work for us.

Thanks for ALL you help!

Don

Poster: dmacman
Dated: Thursday September 29 2005 - 17:31:57 BST

Hi Ruth,

I am getting close.

http://www.intheclassroom.org/noFrames/index2.php

I added an include to my site and I am going to have this as my header.php.

I am having an issue.

As you can see, it looks great except the "tabWide.jpg" and "tabNarrow.jpg", are positioned too high. The tabWideOver and tabNarrowOver are in the correct positions?

I had to move a bunch of files and changes the paths to the files, so I probably, messed something up.

Thanks for being patient with me.

Don

Poster: Ruth
Dated: Thursday September 29 2005 - 20:30:37 BST

Hi Don,

I have one question. Is this layout supposed to center if screen resolution is changed. Let's say someone has 1024 resolution, should the whole thing shift to the center of the screen, or should it remain left?

Ruth

Poster: dmacman
Dated: Sunday October 2 2005 - 15:26:45 BST

Hi Ruth,

The page and header should remain centered. That is what I am trying to achieve.

Thanks,

Don

Poster: Ruth
Dated: Sunday October 2 2005 - 22:18:06 BST

Hello Don,

I've done another page in zip file for you.

Some things to note:

1. put everything in the same directory to test. You can change the paths later, but right now all the paths just show src=milonic_src.js and so on.

2. You have a code in there which is throwing an error. It's the src="font.css" I'm not sure why you have that, but it throws an error in IE and shows an error in the js console in FF.

3. I took you at your word that what you wanted was the layout to center if screen size is changed. If what you meant was you wanted it to 'expand' you cannot use this layout or the one you have been working on.

4. I made some changes, which you can change back, of course.

First, I made a different pagebgimage. It's the same one but I made the arrow darker so it looks different than the overbgimage.

I converted the images to gifs. The reason is that with a good monitor and graphics resolution the jpgs will show spots and lines. The gifs shouldn't do that.

I made a 'footer' bg to go behind the footer image so that when the footer image is centered, the bg_footer covers up the white space to right and left and makes it look like the top. If you wanted the footer to be smaller than the top just take out the style="background-image:url [bg_footer.gif] part in that table cell.

I added a class to make the copyright a tad smaller than the other text, it's set at 11px instead of 12 like the rest of the document.

Finally, since you decided not to use the scroll, I thought you could catch the eye of the viewer if the numbers of teachers, schools and students were in different colors. Again, you can just take out those font color changes if you don't like that. [It's an I like color designer's thing ]

So you know what I did, though you can look at the source. I removed the div at the top, and changed the other two divs. If you want the page to shift, you can't absolutely position the div. With a top and left it will always stay top and left. I went back to your original table and logo and worked that for the top of the page, the advantage is that the menu will not have problems on some browsers since the menu is no longer in the div.

The reason for the images not working is that you cut one set of them down. They have to match in size. You took the extra top white space out of the bgimage ones so they began to repeat at the bottom where the extra space was to accomodate the overbgimage. I also couldn't find the class on the page anymore. I've made the bgimages to the same size as the over ones and put the myclass style section back. You also no longer have the menu items set to have the itemwidth= for the width of the images. I don't know if that will be a problem since I don't know how all browsers work. If you have the itemwidth set, then the bgimage shouldn't ever repeat if some browser ignores the sizes of the images.

I fixed your tables. There were a lot of missing closing tags so they were messing up.

Hope this helps. Let me know when you get it so I can remove the files.

Ruth

Poster: dmacman
Dated: Monday October 3 2005 - 19:21:14 BST

Thanks for the help, Ruth.

You can remove the files from the server.

Here is my page with the code/files, you put in the zip file.

http://intheclassroom.org/noFrames/index2.php

I am testing it with the "include" option of PHP and will edit all the files to use this header.php file.

I really appreciate your help/info.

Thanks a bunch,

Don

Poster: Ruth
Dated: Monday October 3 2005 - 19:51:50 BST

You're welcome.

You need to take a look at your source on the page you put up. It has the thing with showing up twice, and the body tag twice. In the first body tag is a table width 799 which puts a scroll bar at the bottom of the browser. That's why I changed the table width to 776, which prevents that scrollbar in 800x600 res I have.

That author script, the reload page script, the font.css and the style code for the menu should be in the head. Then the body tag, the call for the menu files and the tables I gave you.

Ruth

Poster: dmacman
Dated: Tuesday October 4 2005 - 14:18:44 BST

Hi Ruth, or should I call you "master?"

Thanks for the debugging/QC on my page.

I am not used to using "includes" with such "mixed" code pages like this.

IE, the menus ar DHTML, I am using Java, php, etc, and trying to keep all the code working, using includes, and making sure the scripts etc, stay in the head and not the body, are new to me.

Thanks for all the help.

I think I fixed all you suggested and hopefully, this post helped some other folks, I KNOW it helps me!!!

Bless you,

Don