a little CSS help, please (serious)

[AKR]

reps for the person that can help figure this out. i've got a menu bar i'm trying to place at the bottom of an image at the top of my website. right now, the menu is at the top of the image. as you can see, the image is set as the background so i can have the menu appear over it. unfortunately, i'm not skilled enough to figure out how to get that **** to the bottom. i went through the css file and tried "vertical-align: bottom;" on each style, just to see if anything would happen, and nothing did. i'm not sure what to do.


this is my css file for the menu.

#sbtabs{
margin-left: 0px;
padding: 0;
width: 100%;
height: 159px;
background: transparent;
background-image: url(http://www.bodyxpressions.net/skin1/...ntheader.png); 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 */
}

and here is the template for the "speedbar"

{if $speed_bar}
<div id="sbtabs">
<ul>
<li {if $main eq "catalog" && $current_category.category eq ""}id="current"{/if}><a href="home.php" title="Home"><span>Home</span></a></li>
{if $login eq ""}
<li {if $main eq "register"}id="current"{/if}><a href="register.php" title="{$lng.lbl_register}"><span>{$lng.lbl_regist er}</span></a></li>
{/if}
<li {if $main eq "cart" && $smarty.get.mode ne "checkout"}id="current"{/if}><a href="cart.php" title="{$lng.lbl_view_cart}"><span>{$lng.lbl_view_ cart}</span></a></li>
<li {if $smarty.get.mode eq "checkout"}id="current"{/if}><a href="cart.php?mode=checkout" title="{$lng.lbl_checkout}"><span>{$lng.lbl_checko ut}</span></a></li>
{section name=sb loop=$speed_bar}
{if $speed_bar[sb].active eq "Y"}
<li {if $speed_bar[sb].orderby eq $page_data.orderby}id="current"{/if}>
<a href="{$speed_bar[sb].link}" title="{$speed_bar[sb].title}"><span>{$speed_bar[sb].title}</span></a></li>
{/if}
{/section}
<li {if $smarty.get.mode eq "update"}id="current"{/if}><a href="help.php?section=contactus&mode=update" title="{$lng.lbl_contact_us}"><span>{$lng.lbl_cont act_us}</span></a></li>

<li {if $smarty.get.mode eq "update"}id="current"{/if}><a href="sitemap.php?section=sitemap&mode=update" title="{$lng.lbl_sitemap}"><span>{$lng.lbl_sitemap }</span></a></li>
<li {if $smarty.get.mode eq "update"}id="current"{/if}><a href="pages.php?pageid=1" title="{$lng.lbl_Articles}"><span>{$lng.lbl_Articl es}</span></a></li>
</ul>
</div>
<div id="sbtabsline">&nbsp;</div>
{/if}

[jpadilla]

alrighty buddy, apart from the... the... really bad css coding, theres a whole bunch of ways to fix it. whith the way you coded it, i would suggest
giving the "#sbtabs ul" tag a fixed height, and then subtract that height from 159px ( height of the image ) and then use that number as a top margin for the #sbtabs ul tag. so..... les seee.. it would look a lil like this

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

but really... you gotta study up on your css... theres much better ways to slice/code this header/menu.

[AKR]

Originally Posted by jpadilla

alrighty buddy, apart from the... the... really bad css coding, theres a whole bunch of ways to fix it. whith the way you coded it,

i didn't write it, i just use it. it was a free download for a mod to my shopping cart system.

i would suggest
giving the "#sbtabs ul" tag a fixed height, and then subtract that height from 159px ( height of the image ) and then use that number as a top margin for the #sbtabs ul tag. so..... les seee.. it would look a lil like this

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

but really... you gotta study up on your css... theres much better ways to slice/code this header/menu.

i'm trying to pick up what i can here and there. so many different things to learn, only so much time.

it works! thanks a ton. repped.

[Metallical2]

I came here looking for a thread about Counter-Strike: Source. :/