X-Cart forums - i can't center images in menu titles!

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - i can't center images in menu titles! (https://forum.x-cart.com/showthread.php?t=5077)

i can't center images in menu titles!

i've tried various things (and searched these forums among others), and i just don't know enough about html, or something is screwy. i just don't know what i'm doing wrong. here's my code for the menu.tpl. the titletest.jpg is what i'm trying to center:

<TABLE border=1 cellPadding=5 cellSpacing=0 width="100%" style="border-collapse: collapse" bordercolor="#FFFFFF">
<TR>
{if $link_href}
<div style="text-align:center">
<TD align="center" class=VertMenuTitle background="{$ImagesDir}/titletest.jpg" style="background-repeat: no-repeat" height=26 align=center valign=center width=100% font class=VertMenuTitle>
<font color="#000000"></font><font color="#000000">{$menu_title}</font></font></TD>
{else}
<TD align="center" class=VertMenuTitle background="{$ImagesDir}/titletest.jpg" style="background-repeat: no-repeat" height=26 align=center valign=center width=100%
<font class=VertMenuBoxNewsTitle color="#000000"> {$menu_title}</font></TD>
{/if}
</TR>
<TR>
<TD colspan="2" class=VertMenuBox>{$menu_content}
</TD></TR>
</TABLE>

thanks in advance for any help. i know you guys get lame questions like this all the time. Reuben

try something more like this

Code:

<TABLE border=0 cellPadding=5 cellSpacing=0 width="100%">

<TR> 

<TD class=VertMenuTitle height=26>{$link_begin}[img]{$ImagesDir}/{$dingbats}[/img]{$link_end}</TD>

{if $link_href}

<TD width=80% height=26 align="center" valign=center class=VertMenuTitle>[img]{$ImagesDir}/titletest.jpg[/img] </TD>

{else}

<TD width=80% height=26 align="center" valign=center class=VertMenuTitle>[img]{$ImagesDir}/titletest.jpg[/img]</TD>

{/if}

</TR>

<TR> 

<TD colspan="2" class=VertMenuBox>{$menu_content}

</TD></TR>

</TABLE>

that code had dingbats and no menu titles in it. i played around with it a bit, and got this far:

<TABLE border=1 cellPadding=3 cellSpacing=0 width="100%" bordercolor="#FFFFFF">
<TR>
{if $link_href}
<div style="text-align:center">
<TD background="{$ImagesDir}/titletest.jpg" width=80% height=26 align="center" valign=center class=VertMenuTitle><font color="#000000"> </font><font color="#000000">{$menu_title}</font></td>
{else}
<TD width=80% height=26 align="center" valign=center class=VertMenuTitle color="#000000"> {$menu_title}</font>[img]{$ImagesDir}/titletest.jpg[/img]
{/if}
</tr>
<TR>
<TD colspan="2" class=VertMenuBox>{$menu_content}
</td></tr>
</table>

now, i've gotten rid of the dingbats, have the picture centered, but the title is above it instead of on it. :-k

class=VertMenuTitle <<

Do it in the style sheet, you can set text alignment from CSS level without having to touch the tpls

it's the image i'm having problems with, though. i can do the same thing with an image in css, though, right? i'm just not sure how.