How To Make A Scalable Header For Your Forums

[DieselMinded]

Alot of webmasters code and design for there monitor size , there site always looks perfect to them but what they dont realize is how bad it looks to others with different screen sizes

See Bad Design
http://www.dieselbookmarks.com/bombers/screen.jpg

Even the banner ads are aligned left :eek:

With wide screen monitors it looks real bad and un professional

So how do you get your header to accommodate just about all monitor sizes ?

I used multiple images .. 3 and justified the each one differently , left , center , right

and replaced this code in the DEFAULT VB header template
<td align="$stylevar[left]"><a href="$vboptions[forumhome].php$session[sessionurl_q]"><img src="$stylevar[titleimage]" border="0" alt="$vboptions[bbtitle]" /></a></td>
<td align="$stylevar[right]" id="header_right_cell">
<if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else />&nbsp;</if>
</td>

with this code
<td align="$stylevar[left]"><div align="center">
<a href="$vboptions[forumhome].php$session[sessionurl_q]">
<img src="http://www.dieselbombers.com/images/dieselbomber.png" align="right" border="0" alt="Diesel Bombers - The Ultimate Diesel Community" />
<img src="http://www.dieselbombers.com/images/dieselbomberleft.png" align="left" border="0" alt="Diesel Bombers - The Ultimate Diesel Community" />
<img src="http://www.dieselbombers.com/images/dieselbombersheader2009.png" align="center" alt="$vboptions[bbtitle]" border="0" /></a></div></td>
<td align="$stylevar[right]" id="header_right_cell">
<if condition="$ad_location['ad_header_logo']">$ad_location[ad_header_logo]<else /></if>
</td>

now the site suits all users with a scalable header

demo:
www.dieselbombers.com

grab the right side of your browser window and drag it in , the images move to accommodate the screen size .

Do your self a favor start a thread on your forum asking for screen shots of your home page , you may be suprized how different your site looks to others

DM

[sensimilla]

could be useful in my next project, thanks

[n_only]

I couldn't use your a scalable header on this forum:

http://www.shmmr.net/vb/

the header does not have stretching piont , other than header left-right sides

do you have a bright idea that could help me ?

[madotds]

Thanks for that mate I was trying to work out how to do that :)

[DieselMinded]

I couldn't use your a scalable header on this forum:

http://www.shmmr.net/vb/

the header does not have stretching piont , other than header left-right sides

do you have a bright idea that could help me ?

Possibly Change this

<th scope="col" width="760"><img src="newheader_a/main1a.jpg" alt="" width="760" height="172" border="0" usemap="#Map" dir="rtl" lang="ar" /></th>

to this


<th scope="col" width="90%"><img src="newheader_a/main1a.jpg" alt="" width="90%" height="172" border="0" usemap="#Map" dir="rtl" lang="ar" /></th>

[n_only]

thanks for your reply

but .. that did not work fine with me. there are an open space between "left & right" cell

[DieselMinded]

dont use "px" to justify your image use a % and make your image all 1 file

[dbirosel]

Sweet article. I'll do this for sure when I get home!

[DieselMinded]

Good Luck !

[1Unreal]

Nice article. Thanks!

[DieselMinded]

Glad it helped

[narhot]

A good idea and a wonderful Forum member hand
thanks my brother