Ok I have a navbar on a forum im working on. Here is the HTML for it...

<!-- NEW NAV -->
<div id="nav_back" >
 
 
<center>
<a class="nav_buttons" href="{U_INDEX}"><img src="{T_THEME_PATH}/images/nav_home.png" border="0" alt="" /></a>
<!-- IF S_USER_LOGGED_IN -->
<a class="nav_buttons" href="{U_PROFILE}"><img src="{T_THEME_PATH}/images/nav_user_cp.png" border="0" alt="" /></a>
<!-- ENDIF -->
<!-- IF not S_USER_LOGGED_IN -->
<a class="nav_buttons" href="{U_REGISTER}"><img src="{T_THEME_PATH}/images/nav_register.png" border="0" alt="" /></a>
<!-- ENDIF -->
<a class="nav_buttons" href="{U_SEARCH_ACTIVE_TOPICS}"><img src="{T_THEME_PATH}/images/nav_active.png" border="0" alt="" /></a>
<a class="nav_buttons" href="{U_MEMBERLIST}"><img src="{T_THEME_PATH}/images/nav_members.png" border="0" alt="" /></a>
<a class="nav_buttons" href="{U_SEARCH}" rel="nofollow"><img src="{T_THEME_PATH}/images/nav_search.png" border="0" alt="" /></a>
<a class="nav_buttons" href="{U_FAQ}"><img src="{T_THEME_PATH}/images/nav_faq.png" border="0" alt="" /></a>
 
<a class="nav_buttons" href="{U_PRIVATEMSGS}"><img src="{T_THEME_PATH}/images/nav_pms.png" border="0" alt="" /></a>
<a class="nav_buttons" href="{U_LOGIN_LOGOUT}"><img src="{T_THEME_PATH}/images/nav_logout.png" border="0" alt="" /></a>
 
</center>
</div>

And here is the CSS attached to the class "nav_back"

#nav_back {
background-image: url("{T_THEME_PATH}/images/nav_back.png");
height: 31px
vertical-align: middle;
horizontal-align: middle;
}

I want to know why the picture nav_back.ong is not displaying as i would like.

here is a link to the picture

http://bodyworkspersonaltraining.co.uk/old/forum/styles/X_Silver/theme/images/nav_back.png

I am wanting this picture to be the background for "nav_back" and so my buttons display perfectly with it, im really having trouble with this.

Thanks for all of your help so far on this forum, its greatly appreciated!

Cheers, Ash

This should get you started:

#nav_back {
background-image: url("{T_THEME_PATH}/images/nav_back.png");
height: 36px
width: 1015px;
margin: 0 auto;
}

Ok, get rid of the vertical and horizontal align junk, those are just not going to work the way it does on tables.

I would also put the navigation in a proper unordered list, which is easily styled, and ditch that nasty <center> tag and use css to center it.

Originally Posted by moatist

This should get you started:

#nav_back {
background-image: url("{T_THEME_PATH}/images/nav_back.png");
height: 36px
width: 1015px;
margin: 0 auto;
}

I put in that code but It still does not display the full image, if you look on the site you will see what I mean

Really...

1. I would not go with 1015px width (think of users with 1024px width res)
2. Learn HTML/CSS
3. Use Google to find proper UL/LI nav's. There are a LOT.

Tables are NOT for layout.