table in menu item

Poster: clayh
Dated: Friday April 25 2003 - 18:32:05 BST

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>&nbsp;</td>
<td align=left bgcolor=7D1786>
<div align=center>Item Text</div></td>
<td width=2 height=13 background=side.gif>&nbsp;</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.

Poster: clayh
Dated: Friday April 25 2003 - 18:46:41 BST

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.

Poster: kevin3442
Dated: Saturday April 26 2003 - 6:17:23 BST

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:

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

Poster: clayh
Dated: Saturday April 26 2003 - 16:16:18 BST

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.

Poster: kevin3442
Dated: Sunday April 27 2003 - 4:44:25 BST

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