how do I embed my menu on my page?

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:40

how do I embed my menu on my page?

Poster: ludicrousman
Dated: Monday February 26 2007 - 22:34:31 GMT

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!

Poster: Ruth
Dated: Tuesday February 27 2007 - 7:51:42 GMT

Hi,

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

Ruth

embed

Poster: ludicrousman
Dated: Tuesday February 27 2007 - 8:00:42 GMT

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

Poster: Ruth
Dated: Tuesday February 27 2007 - 11:08:04 GMT

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

arg

Poster: ludicrousman
Dated: Tuesday February 27 2007 - 19:05:08 GMT

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?

Poster: Ruth
Dated: Tuesday February 27 2007 - 20:01:09 GMT

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

yes

Poster: ludicrousman
Dated: Tuesday February 27 2007 - 20:04:09 GMT

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?

Poster: Ruth
Dated: Tuesday February 27 2007 - 20:31:40 GMT

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:

<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:

<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

yes

Poster: ludicrousman
Dated: Tuesday February 27 2007 - 20:36:13 GMT

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

Poster: Ruth
Dated: Tuesday February 27 2007 - 21:04:25 GMT

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:

.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:

<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:

<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

ahh

Poster: ludicrousman
Dated: Tuesday February 27 2007 - 21:23:52 GMT

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

I LOVE YOU

Poster: ludicrousman
Dated: Tuesday February 27 2007 - 21:39:21 GMT

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

Poster: Ruth
Dated: Tuesday February 27 2007 - 23:31:43 GMT

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

ya

Poster: ludicrousman
Dated: Tuesday February 27 2007 - 23:59:05 GMT

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

Poster: Ruth
Dated: Wednesday February 28 2007 - 4:32:32 GMT

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

?

Poster: ludicrousman
Dated: Wednesday February 28 2007 - 4:38:01 GMT

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

Poster: Ruth
Dated: Wednesday February 28 2007 - 6:39:33 GMT

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://www.milonic.com/imagepack/

Ruth

thanks

Poster: ludicrousman
Dated: Wednesday February 28 2007 - 17:14:54 GMT

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