how do I embed my menu on my page?

ludicrousman · Post by **ludicrousman** » Mon Feb 26, 2007 11:34 pm

I can't embed it using a table because I have an iFrame under the menu and Firefox screws up layers. What other way can I embed a menu? I looked all over this site, and the only way I say was with tables.
HELP!

Post by **Ruth** » Tue Feb 27, 2007 8:51 am

Hi,

Can you explain why you can't embed it using the table?

Ruth

ludicrousman · Post by **ludicrousman** » Tue Feb 27, 2007 9:00 am

whenever I embed it using a table, the graphics around it break up. I have them sliced and no matter how I embed it, it leaves a gap between the images

Post by **Ruth** » Tue Feb 27, 2007 12:08 pm

Hi,

Try this setup.

LINK REMOVED

You'll see on the page in that zip what I did. The new images are there also.

You'll have to change the link for the iframe page to what it is on your site. I forgot to change that back. home/ I think it was.

Ruth

ludicrousman · Post by **ludicrousman** » Tue Feb 27, 2007 8:05 pm

once again I used your file but when I viewed it on IE on a PC the images broke up.
http://www.designbyrecroom.com/intelliservices/new/
Isn't there a way to embed it using div tags and css without using layers?

Post by **Ruth** » Tue Feb 27, 2007 9:01 pm

Hi,

I see the break on the page you put up when I increase my resolution. It looks as if you made changes to the page I sent, only using the background image of all the new ones I sent. In order to prevent the split you need to have it setup with the images I sent and the layout, which added two table rows at the top of the table.

LINK REMOVED

I tested this at 800x600, 1024x768, 1152x864 on IE5.5 and 6 and the images don't show any splitting.

As to the div, the problem is that not all browsers treat divs the same way. The menu is made up of divs, spans tables etc. and it seems that FF is not reading the relative position of the menu correctly or it's confusing itself on the absolute positioned div and relative positioned menu inside it.

Did you try the other method of placing the menu relatively, though I don't see how that would make a difference.

Ruth

ludicrousman · Post by **ludicrousman** » Tue Feb 27, 2007 9:04 pm

Yes i did try the relative method. Didn't work. I had to change your images because thats a different layout then most of my pages.
Whats the basic elements or coding that you used so I can copy it on all of my pages?

Post by **Ruth** » Tue Feb 27, 2007 9:31 pm

Hi,

Actually, I added one row to the table, right below the first one. I didn't change the number of columns but I did make a change in the top row to having the colspan be only 2 leaving 2 cells at the right.

This is your existing beginning of the table, down to where you have the left menu table inserted.

Code: Select all

<TABLE id=Table_01 height=100 cellSpacing=0 cellPadding=0 width=872 border=0>
  <TBODY>
  <TR>
    <TD colSpan=4 height=94><IMG height=94 alt=Intelli-Services 
      src="index2_01.gif" width=872></TD></TR>
  <TR>
    <TD rowSpan=2>
      <TABLE id=Table_01 height=622 cellSpacing=0 cellPadding=0 width=177 
      border=0>

The new one I did is this

Code: Select all

<TABLE id=Table_01 height=100 cellSpacing=0 cellPadding=0 width=872 border=1 bordercolor='red' bgColor="#ffffff">
  <TR>
    <TD COLSPAN=2><img src="images/index2_01a.gif" width="705" height="84" border="0"></TD>
    <TD><img src="images/index2_01b.gif" width="166" height="84" border="0"></TD>
    <TD></TD>
  </TR>
  <TR>
    <TD COLSPAN=2 class='logobar'></TD>
    <TD height=10><img src="images/index2_01d.gif" width="166" height="10" border="0"></TD>
    <TD></TD>
  </TR>
  <TR>
    <TD rowSpan=2><table id="Table_01" width="177" height="622" border="0" cellpadding="0" cellspacing="0">

I think I can eliminate the addition of that extra row, but I would need to have the colspan be 2 so that you have '3' available row cells. I'm not sure but I'll work on it. Would that help, having it so you don't have another row added? And, the only change would be the colspan being 2 instead of 4?

Ruth

ludicrousman · Post by **ludicrousman** » Tue Feb 27, 2007 9:36 pm

yes it would. Thanks. I have been freaking the last few days because nothing was working

Post by **Ruth** » Tue Feb 27, 2007 10:04 pm

Hi,

Hi,

Well, it seems to work fine with no row added. I'll put up the new images for you. Here are the changes you would need. You can of course change the image names to whatever you want. I did include another test page in the zip file so you can see the changes.

What I did was:

1. make the logo with the yellow bar and not including the right side image as a background image. It is wide so it will expand if that cell has to expand for the users' font size [accessibility].

2. made the right side of the existing image into its own, it is not a bg, it's set as an image.

3. made the bottom part of that to match up with it.

4. created the class called logobar.

The logobar css class is:

Code: Select all

.logobar{
background: #ffffff url(images/index2_01a1.gif) no-repeat left bottom
}

The table top row code has been changed from colspan=4 to colspan=2 and has a class assigned to it for the logo and the next cell has the new right side image:

Code: Select all

<TABLE id=Table_01 height=100 cellSpacing=0 cellPadding=0 width=872 border=0 bgColor="#ffffff">
  <TR>
    <TD COLSPAN=2 class='logobar'></TD>
    <TD><img src="images/index2_01b1.gif" width="166" height="94" border="0"></TD>
    <TD></TD>
  </TR>

The table cell next to the menu has the new bottom right side image to match the new top right side image

Code: Select all

<TD vAlign='top'><img src="images/index2_04a.gif" width="166" height="41" border="0"></TD>

LINK REMOVED

Note, again you'll have to change the bottom html page link in the iframe to be correct.

Ruth

ludicrousman · Post by **ludicrousman** » Tue Feb 27, 2007 10:23 pm

Pretty tricky... I'll give it a shot. Thanks

ludicrousman · Post by **ludicrousman** » Tue Feb 27, 2007 10:39 pm

I LOVE YOU
I LOVE YOU
I LOVE YOU
I LOVE YOU
It works PERFECT!!!

Post by **Ruth** » Wed Feb 28, 2007 12:31 am

That's great - one thing though, that bottom html page, it looks like something is missing, the yellow color was a lot darker/deeper on the first page you had up.

Ruth

ludicrousman · Post by **ludicrousman** » Wed Feb 28, 2007 12:59 am

I'm still working on it but the final comp will be up here:
http://kevinftp.trivalley.com/intelli-services/
for the clients approval

Post by **Ruth** » Wed Feb 28, 2007 5:32 am

Hi,

You forgot the image at the end of the Products submenu.

You, also need to get the images from Milonic rather than use a link to them for the images.

Ruth

ludicrousman · Post by **ludicrousman** » Wed Feb 28, 2007 5:38 am

What did you mean?
"You, also need to get the images from Milonic rather than use a link to them for the images. "

Post by **Ruth** » Wed Feb 28, 2007 7:39 am

Hi,

In the menu data file, you have linked to the images on the Milonic site, Just go to the image links, download them and put them on your site. It may be that the menu you downloaded had those links in it. Usually they also contain the related images, so if the images are in the download, then just change the link to wherever you put them.

Also, there are other available images for menu users, besides the ones that come in the various samples, backgrounds, arrows, shapes, and such.

http://milonic.com/imagepack/

Ruth

ludicrousman · Post by **ludicrousman** » Wed Feb 28, 2007 6:14 pm

You are amazing. I can't thank you enough for all that you have done. You're my hero!!!!!!!

Milonic JavaScript Menu

how do I embed my menu on my page?

how do I embed my menu on my page?

embed

arg

yes

yes

ahh

I LOVE YOU

ya

?

thanks