Different width for Navbar and page content

[TheMilkCarton]

Hi,

I've been fooling around with the templates, but I can't seem to figure out how to keep the banner and navbar at a fixed width of 800px, while adding a 15-20px margin on each side of the rest of the page.

No matter what I've tried, the navbar stays the same width as the forums (about 760px) instead of staying fixed at 800px even when I force the width to 800px in the template.

The default theme here at vb.org is exactly what I'm talking about, for anyone not using the default theme I'll attach a screenshot.

This is a seemingly simple task, at least compared to the other modifications I've made to my forum, but I still can't figure this one out.

Thanks for your help

Edit: Well, after trying again.. (I've learned alot more HTML & CSS since the first time I tried) I added:

style="position:relative;right:20px;"

in two different places in the navbar template, because increasing the "Spacer Size" to 20px caused the Navbar to jut off the right edge of the forums by 20px.

If there's an easier, non-positioning method to do this please, please let me know.

Thank you!

[Staxed]

can't check right now while i'm at work (can't get to my test forum behind the firewall)...but I recall i've done it before a simpler way...i'll check when i get home.

what are the two places you put that code in though?

[TheMilkCarton]

Originally Posted by Irisfire

what are the two places you put that code in though?

I had to add the position:relative to 2 different tables, and change the width=100% to width=800.

PHP Code:

<!-- breadcrumb, login, pm info -->
<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="1" border="0" width="800" align="center" style="position:relative;right:10px;"> 


and

PHP Code:

<!-- nav buttons bar -->
<div align="center">
    <table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="800" align="center" style="border-top-width:0px;position:relative;right:10px;"> 


It's not that bad or anything, I just don't like using position:relative on a table because I'm not sure if it displays properly on all browsers or whatever. I'm also sure there's an easier way than using positioning..

Let me know when you get home, thanks!

[Quantnet]

Irisfire,

I'd like to know this as well. Thanks

[TheMilkCarton]

Quantnet,

I figured out the easiest way to do it.

Remove from the header template:

PHP Code:

$spacer_open 


---------

In navbar template:

Add to the last line:

PHP Code:

$spacer_open 


Find:

PHP Code:

<!-- breadcrumb, login, pm info -->
<table...width="100%"> 


AND

PHP Code:

<!-- nav buttons bar -->
<div align="center">
    <table...width="100%"> 


Change both 100% to the same pixel width as your banner, i.e. "800"

---------

If you use vBadvanced, add

spacer_open

to the "Portal Output Global Variables" in the vBa CMPS Default Settings. Do not include the $ for this step.

[Quantnet]

TheMilkCarton

Thanks for the guide. Can i see the template where you made this change ?

I'm basically looking for a similar look like vb.org default Blue lagoon with 95% width.

It seems to me you have a fixed width skin while I only have fluid skins.

Is there anything different if i want to add 15px on both side of my fluid skin with a solid color like here ?

[TheMilkCarton]

Well, in that case, use the same % as your header. If your banner is 95% then make the two changes to 95% in the navbar template. Your header is probably 100%, so you won't have to make any changes to the width of navbar.

If you want to add 15px on each side of your forum, just go to Style Manager and in "Sizes and Dimensions" change Main Table Width to the same width as your navbar and header, i.e. 95%, and then change Spacer Size to 15. This would make the forums 30px skinnier than the navbar and header at all times.

[peterle1]

Originally Posted by TheMilkCarton

Quantnet,

I figured out the easiest way to do it.

Remove from the header template:

PHP Code:

$spacer_open 


---------

In navbar template:

Add to the last line:

PHP Code:

$spacer_open 


Find:

PHP Code:

<!-- breadcrumb, login, pm info -->
<table...width="100%"> 


AND

PHP Code:

<!-- nav buttons bar -->
<div align="center">
    <table...width="100%"> 


Change both 100% to the same pixel width as your banner, i.e. "800"

Could it be that this doesn't work any longer in 3.7?

[Ohiosweetheart]

Dunno. Anytime I want a full-width navbar, I move the nav buttons bar code from the navbar template to the header template.
Works every time.

[nerbert]

Check the footer, which is wider than the navbar. It begins with the following:

<table cellpadding="$stylevar[cellpadding]" cellspacing="0" border="0" width="$stylevar[outertablewidth]" class="page" align="center">

The navbar begins:

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">

I'm no expert but this looks like the difference. Note the difference between the width specs.