table in menu item

clayh · Post by **clayh** » Fri Apr 25, 2003 6:32 pm

I wasn't able to find a reference to this by searching, so here goes:

I am developing a menu in which I need each menu item to have an image to the left and right of the text, aligned to the left and right edges of the menu, respectively.

i.e.
| Text |
| Text |

The only way I can see to do this is to put a 3-column table in the menu item, and the 2 images in the outer columns, aligned to the outside.

i.e.
<pre>
<table width=100% border=0 cellspacing=0 cellpadding=0>
<tr>
<td width=1 height=13 align=left background=side.gif> </td>
<td align=left bgcolor=7D1786>
<div align=center>Item Text</div></td>
<td width=2 height=13 background=side.gif> </td>
</tr>
</table>
</pre>

(all on one line)

This works, however, the text is not touched by the styles applied to the menu. Any ideas on how to make the text respond to the menu styles while
inside a table?

thanks.

clayh · Post by **clayh** » Fri Apr 25, 2003 6:46 pm

actually, i realized that one solution is just to use stylesheets already embedded in the page, just put an <a> tag in the table, and it will adhere to the page's style.

very nice.

kevin3442 · Post by **kevin3442** » Sat Apr 26, 2003 6:17 am

Clay,

Here's another approach to defining a menu item that would probably render the way you want. You could put two images in the Description Text field, and use the align attribute of the image tags to align the image to the left or right of the text... like so:

Code: Select all

,"<img src=pic1.gif border=0 align=left><img src=pic2.gif border=0 align=right>Item Text","theurl.html",,,1

The only problem you might have is in a horizontal menu where the menu's width field has not been set (right align will cause it to align to the right side of the page). This should not be a problem if the width is set, which is necessarily so for a vertical menu (which I believe is what you're after). This might be a little easier than setting up a table in each menu item.

Kevin

clayh · Post by **clayh** » Sat Apr 26, 2003 4:16 pm

Kevin,

thanks for the tip, I had tried something similar earlier but I had the text between the img tags, either way, it still doesn't work quite right - the images are not smashed all the way against the outer edge of the menu, and it leaves a gap between the menu item and the next item below it.

i guess I am stuck with tables. fortunately I wrote a little something that allows me to fill in my link/text outside of that huge table structure on one line.

kevin3442 · Post by **kevin3442** » Sun Apr 27, 2003 4:44 am

Hi Clay,

Just a note... with the approach I suggested, it's important to have both <img> tags to the left of the text; won't work right otherwise (gap, images not on the same vertical level, etc). But I guess the main thing is that you've found something that works for you!

Cheers,

Kevin