Vbulletin forum layout

[sharkey]

Hey guys im looking for a little help. As you can see from my forum http://www.champlegals.co.uk

What i need is for the header at the top to be changed. Now i dont code using tables for layout so dont really know how to change it to css. What i need is the logo like it is on the left and a series of links horizontally at the right hand side. Now im not looking for anyone to code to the menu just to help with the structure i.e a logo box floated left and menu box floated right.

Heres the current code:

<!-- start header part -->
<a name="top"></a>
<table width="85%" align="center" cellpadding="0"  cellspacing="0" class="wrapper" style="height:100%;">
  <tr>
    <td class="leftborder">&nbsp;</td>
    <td valign="top" class="centerbgcolor"><table width="100%"  cellspacing="0" cellpadding="0">
      <tr>
        <td class="headerwrap"><table width="100%"  cellspacing="0" cellpadding="0">
          <tr>
            <td class="logowrap"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="images/merahitam/spacer.gif" alt="$vboptions[bbtitle]" width="350" height="115" border="0"></a></td>
            <td>&nsbp;</td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td class="navwrap">
<!-- nav buttons bar -->
<div align="center">
    <table id="navstyle" cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="100%" align="center" style="border-top-width:0px">
    <tr align="center">
        <if condition="$show['member']">
            <td><a href="usercp.php$session[sessionurl_q]">$vbphrase[user_cp]</a></td>
        </if>
        <if condition="$show['registerbutton']">
            <td><a href="register.php$session[sessionurl_q]" rel="nofollow">$vbphrase[register]</a></td>
        </if>
        $template_hook[navbar_buttons_left]
        <td><a href="faq.php$session[sessionurl_q]" accesskey="5">$vbphrase[faq]</a></td>
        <td><a href="memberlist.php$session[sessionurl_q]">$vbphrase[members_list]</a></td>
        <td><a href="calendar.php$session[sessionurl_q]">$vbphrase[calendar]</a></td>
        <if condition="$show['popups']">       
            <if condition="$show['searchbuttons']">
                <if condition="$show['member']">
                <td><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td>
                <else />
                <td><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td>
                </if>
                <td id="navbar_search" ><a href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow">$vbphrase[search]</a> <if condition="$show['quicksearch']"><script type="text/javascript"> vbmenu_register("navbar_search"); </script></if></td>
            </if>
            <if condition="$show['member']">
                <td id="usercptools" ><a href="$show[nojs_link]#usercptools">$vbphrase[quick_links]</a> <script type="text/javascript"> vbmenu_register("usercptools"); </script></td>       
            </if>
        <else />       
            <if condition="$show['searchbuttons']">
                <td><a href="search.php$session[sessionurl_q]" accesskey="4">$vbphrase[search]</a></td>
                <if condition="$show['member']">
                <td><a href="search.php?$session[sessionurl]do=getnew" accesskey="2">$vbphrase[new_posts_nav]</a></td>
                <else />
                <td><a href="search.php?$session[sessionurl]do=getdaily" accesskey="2">$vbphrase[todays_posts]</a></td>
                </if>
            </if>
            <td><a href="forumdisplay.php?$session[sessionurl]do=markread" rel="nofollow">$vbphrase[mark_forums_read]</a></td>
            <if condition="$show['member']">           
                <td><a href="#" onclick="window.open('misc.php?$session[sessionurl]do=buddylist&amp;focus=1','buddylist','statusbar=no,menubar=no,toolbar=no,scrollbars=yes,resizable=yes,width=250,height=300'); return false;">$vbphrase[open_buddy_list]</a></td>           
            </if>           
        </if>
        $template_hook[navbar_buttons_right]
        <if condition="$show['member']">
            <td><a href="login.php?$session[sessionurl]do=logout&amp;logouthash=$bbuserinfo[logouthash]" onclick="return log_out('$vbphrase[sure_you_want_to_log_out]')">$vbphrase[log_out]</a></td>
        </if>
    </tr>
    </table>
</div>
<!-- / nav buttons bar -->

</td>
      </tr>
      <tr>
        <td valign="top">
<!-- /end header part -->

<!-- content table -->
$spacer_open

$_phpinclude_output

Anyhelp is much appreciated

[smyhre]

Well i would typically use a unordered list with the list items displayed inline with some sort of padding around them for the nav area not sure how the vbscript (or whatever that script is) in there will affect that though. As for the logo I generally use an image replacement method to replace an h1 with an image. Or you can just have a header div with an image in it.

Examples below are pulled directly from a site i did play around with it to see what does what, and see if it helps a bit.

Example of a ul nav area:

<ul id="top-nav">
<li><a href="index.html">Home</a></li>
<li><a href="ourschool/mission.html">Our School</a></li>
<li><a href="team/team.html">Educational Team</a></li>

<li><a href="calendar/cal_monthly.html">Calendars</a></li>
<li><a href="news/news.html">News</a></li>
<li><a href="curriculum/nad_guidelines.html">Curriculum</a></li>
<li><a href="registration/registration.html">Registration</a></li>
<li><a href="handbook.html">Handbook</a></li>
<li><a href="http://www.andrews.edu/%7Etouchard/m-l.html">My Library</a></li>

<li><a href="http://www.edline.net/Index.page">Edline</a></li>
<li><a href="contact/contact.html">Contact Us</a></li>
</ul>

The css to go with this:

ul#top-nav {
background-image: url(../images/topbar.jpg);
background-repeat: no-repeat;
text-align: center;
color: #fff;
font-size: .8em;
height: 22px;
padding-top: 7px;
overflow: hidden;
}

ul#top-nav li {
display: inline;
}

ul#top-nav li a {
padding: 7px 5px 7px 5px;
}

ul#top-nav a:link {color: #fff;}
ul#top-nav a:visited {color: #fff;}
ul#top-nav a:hover {background-image: url(../images/topbar-hover.jpg) ;background-color: #003500; text-decoration: none;}

[smyhre]

What you could do is have the image floated left and just have the menu contain a margin on the left and not floated of course then you might run into some IE6 issues, floating the menu to the right isn't a bad idea though.

<div id="header">
<img src="header image here"> <!--this floated left-->

<div id="nav-bar">nav here</div><!--this floated right-->
</div>

Might need to give them widths though.