X-Cart forums

[AKR]

ok, so i have this speed bar i downloaded from xcartmods.co.uk/ (thought i'd give the guy a plug) and i'm trying to place it over my header image. in the css file, it looks like the background is set to transparent, but it's just showing a white space to the right of it. i'm not sure if that means it's not being transparent, or if it's sitting below the image instead of over it. i'm foggy on my html, so maybe someone could help me figure this out. thanks for any help.

http://img.photobucket.com/albums/v283/sheduma/xcart.png (i couldn't get the IMG tag to work)

here is my head.tpl code:

{* $Id: head.tpl,v 1.40.2.4 2005/11/15 09:25:38 max Exp $ *}
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
<tr class="newheaderbackground">
<TD width="27">&nbsp;</TD>
<TD><A href="{$http_location}"><IMG src="{$ImagesDir}/storefrontheader.png" width="774" height="159" border="0"></A>{include file="speedbar/speedbar.tpl"}</TD>
<TD valign="top" align="center">
{if $usertype eq "C"}
{include file="customer/top_menu.tpl"}
{/if}
</TD></TR>
</TABLE>
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
<TR> 
<TD  colspan="2" class="VertMenuBorder"><IMG src="{$ImagesDir}/spacer.gif" width="1" height="1" border="0"></TD>
</TR>
<TR> 
<TD class="HeadLine" height="22">
{if $usertype eq "C"}
{ include file="customer/search.tpl" }
{/if}
</TD>
<TD class="HeadLine" align="right">
{if ($usertype eq "C" || $usertype eq "B")and $all_languages_cnt gt 1}
<TABLE border="0" cellpadding="0" cellspacing="0">
<FORM action="home.php" method="GET" name="sl_form">
<INPUT type="hidden" name="redirect" value="{$smarty.server.PHP_SELF}?{$smarty.server.QUERY_STRING|escape}">
<TR>
<TD>
<B>{$lng.lbl_select_language}:&nbsp;</B>
<SELECT name="sl" onChange="javascript: document.sl_form.submit()">
{section name=ai loop=$all_languages}
<OPTION value="{$all_languages[ai].code}"{if $store_language eq $all_languages[ai].code} selected{/if}>{$all_languages[ai].language}</OPTION>
{/section}
</SELECT>
</TD></TR>
</FORM>
</TABLE>
{else}
&nbsp;
{/if}
</TD>
</TR>
<TR> 
<TD  colspan="2" class="VertMenuBorder"><IMG src="{$ImagesDir}/spacer.gif" width="1" height="1" border="0"></TD>
</TR>
{******** Remove this line to display how much products there are online ****
<TR> 
<TD colspan="2" class="NumberOfArticles" align="right">{insert name="productsonline"} {$lng.lbl_products} {if $config.Appearance.show_in_stock eq "Y"}{$lng.lbl_and} {insert name="itemsonline"} {$lng.lbl_items} {/if}{$lng.lbl_online}&nbsp;</TD>
</TR>
**** Remove this line to display how much products there are online ********}
<TR>
	<TD colspan="2" valign="middle" height="32">
<TABLE cellspacing="0" cellpadding="0" border="0" width="100%" height="18">
<TR>
	<TD><IMG src="{$ImagesDir}/spacer.gif" width="1" height="18" border="0"></TD>
{if (($main eq 'catalog' && $cat ne '') || $main eq 'product' || ($main eq 'comparison' && $mode eq 'compare_table') || ($main eq 'choosing' && $smarty.get.mode eq 'choose')) && $config.Appearance.enabled_printable_version eq 'Y'}
<TD width="100%" valign="middle" align="right">{include file="printable.tpl"}</TD>
<TD><IMG src="{$ImagesDir}/spacer.gif" width="176" height="1" border="0"></TD>
{/if}
</TR>
</TABLE>
	</TD>
</TR>
</TABLE>

and here is my css file for the speedbar:

#sbtabs{
margin-left: 0px;
padding: 0;
width: 100%;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 5px;
}

#sbtabs ul{
font: bold 11px Verdana, Arial, sans-serif;
margin:0;
padding:0;
list-style:none;
}

#sbtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
/*text-transform:uppercase;*/
}


#sbtabs a{
float:left;
color: white;
background: #3F5D8A url(speedbar_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#sbtabs a span{
float:left;
display:block;
background: transparent url(speedbar_tabs_right.gif) no-repeat right top;
padding:4px 9px 2px 6px;
}

#sbtabs a span{
float:none;
}

#sbtabs a:hover{
background-color: #5C80B7;
}

#sbtabs a:hover span{
background-color: #5C80B7;
}

#sbtabs #current a, #sbtabs #current span{ /* currently selected tab */
background-color: #000;
}

#sbtabsline{
clear: both;
padding: 0;
width: 100%;
height: 5px;
line-height: 5px;
background: #000;
border-top: 0px solid #fff; /* border between bar and tabs */
}

[AKR]

bump. i've searched through the forums over and over, and googled some, and can't seem to figure out how to hover this menu over my image.

[inebriate]

it looks like the speed bar is sitting below the logo...i would use divs and just set the logo as the background for that div

[AKR]

hmm, i went into the css file for the speed bar and stuck it as the background. so now it's sitting behind the menu, but now the menu is on top, and i can't figure out how to place the menu at the bottom. i suck as this!

#sbtabs{
margin-left: 0px;
padding: 0;
width: 100%;
height: 159px;
background: transparent;
background-image: url(url edited out, because i'm afraid of lurking hackers);[/url] background-repeat: no-repeat;
voice-family: "\"}\"";
voice-family: inherit;
padding-left: 4px;
}

#sbtabs ul{
font: bold 11px Verdana, Arial, sans-serif;
margin:0;
padding:0;
list-style:none;
}

#sbtabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
/*text-transform:uppercase;*/
}


#sbtabs a{
float:left;
color: white;
background: #3F5D8A url(speedbar_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

#sbtabs a span{
float:left;
display:block;
background: transparent url(speedbar_tabs_right.gif) no-repeat right top;
padding:4px 9px 2px 6px;
}

#sbtabs a span{
float:none;
}

#sbtabs a:hover{
background-color: #5C80B7;
}

#sbtabs a:hover span{
background-color: #5C80B7;
}

#sbtabs #current a, #sbtabs #current span{ /* currently selected tab */
background-color: #000;
}

#sbtabsline{
clear: both;
padding: 0;
width: 100%;
height: 2px;
line-height: 0px;
background: #000;
border-top: 0px solid #fff; /* border between bar and tabs */
}