/    Sign up×
Community /Pin to ProfileBookmark

Vbulletin forum layout

Hey guys im looking for a little help. As you can see from my forum

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:

[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[/CODE]

Anyhelp is much appreciated?

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@smyhreFeb 12.2008 — 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>[/QUOTE]



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;}
[/QUOTE]
Copy linkTweet thisAlerts:
@smyhreFeb 12.2008 — 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>
[/QUOTE]


Might need to give them widths though.
×

Success!

Help @johndoe190 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...