Please Help Somebody!

[dano9258]

Ok, I've tried posting this before with no responses from anybody. I've now searched on Google, here, Vbulletin.com, everywhere i can think of, to try to find an answer and it isn't out there. I'm wondering how to make the header (navbar & toplinks area) 100% of the page but the content be within the content 1200px area. Bascially, I want the header and navbar to go 100% of the browser, with the red line included. Then the logo, nav links, etc all within the 1200px area of the main content. Please, someone either give me a hint or something, as I've been putting so much time and effort into finding an answer, I haven't gotten much else done on the site recently. Thank you!

[Lynne]

You'll need to put a <div> around the stuff you wish to be at only 1200px and apply a style to it that sets it at that width.

[dano9258]

So if I set the header width to 100%, and then create a <div> that is at 1200px width, that will work? Will this center the information too? Also, is there a way to set the min width then, so that when you change your browser size, it won't cause items to rearrange on the page.

[Pandemikk]

To center it you'll need to also apply margin:0 auto

This is really basic CSS and HTML. I suggest you read up some tutorials on them both in the future.

[dano9258]

Ok, so my site is almost how I want it. I've managed to place the header and navtabs into a <div> to get it within the 1200px and centered. However, the global search/advanced search link, as well as the links underneath ("News Headlines, etc) is still at 100% despite being within the <div>. Is there some parent that its inheriting positioning from?

[Lynne]

I don't understand what you mean. Can we get an image where you point out what the problem is? And also get a link to see it?

[Adam H]

All you need to do is set your forum width margins to 0 , then edit the CSS of the body to a set width. Nothing major needs to be done and no templates need to be edited .

[dano9258]

I don't understand what you mean. Can we get an image where you point out what the problem is? And also get a link to see it?

The site link is in my signature (http://www.autocurb.com). You will see what I mean when you go to the site, the search and links under the tabs are all outside of 1200px despite being within my <div>. This is what I have done so far:

1) Set in the stylevars the doc width to 100%.
2) Set in vbulletin.css under .body_wrapper --> width: 1200px; & margin: 0px auto;
3) Set in vbulletin_chrome.css under .header -- > width: 1200px; & margin 0px auto;
3) Created a new class called #mylayout with the width: 1200px & margin: 0px auto; properties
4) Placed class mylayout into Navbar template here:

<div id="navbar" class="navbar">
<ul id="navtabs" class="navtabs floatcontainer<vb:if condition="$show['member'] AND $notifications_total"> notify</vb:if>">

<div id="mylayout">

<vb:if condition="$stylevar['titleimage']"><div><a name="top" href="{vb:link forumhome}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div></vb:if>


The end <div> is at the end of the template. So the globalsearch class and everything is within it. However, the search box area, along with the links are still not within the 1200px.

[Max Taxable]

Please Help Somebody!I do, just about every day here.

[setishock]

Are you wanting something like this? > http://animeappeal.com/forum.php?styleid=122
90% of that is in vbulletin-chrome.css with a little of it in vbulletin.css. No html code jiggering is really needed. Took about an hour to get it fine tuned like I wanted it.
But bottom line is it's all CSS magic.

[Adam H]

You shouldnt be editing the vbulletin.css or vbulletin-chrome.css , your going to cause your self headaches upon every vbulletin update.

All css thats edited should be copied and pasted in to the additional.css which will override the vbulletin.css and vbulletin-chrome.css.

The additional.css template is not overwritten upon upgrades.

[setishock]

Good point. Maybe I shouldn't but I'm staying with 4.1.2 till the devil be pushing a snow blower in his place. Others that jump from version to version should use prudent measures to back up changes they have made. There has been much discussion about what some do in other threads here.

[Lynne]

I see the <div class="body_wrapper"> set to be 1200px, but the <div class="above_body"> is not. Your navbar and search stuff is all located in the above_body section and set to be 100%.

[dano9258]

I see the <div class="body_wrapper"> set to be 1200px, but the <div class="above_body"> is not. Your navbar and search stuff is all located in the above_body section and set to be 100%.

The above_body is not set to 1200px because I want it to be 100% of the page. I want the header and navbar both to be 100% as far as the background images and red line (border). But I want the content inside to be at 1200px. Basically I need the whole above_body to be 100%, but the logo, nav links, search box, and links underneath to be within the 1200px range. As I said above, I managed to get everything but the search box and underneath links (whatever they are called) to be within that width using my new <div> mylayout. I'm thinking that the search and underneath links must be inside of some parent property....

[Max Taxable]

The above_body is not set to 1200px because I want it to be 100% of the page. I want the header and navbar both to be 100% as far as the background images and red line (border). But I want the content inside to be at 1200px. Basically I need the whole above_body to be 100%, but the logo, nav links, search box, and links underneath to be within the 1200px range. As I said above, I managed to get everything but the search box and underneath links (whatever they are called) to be within that width using my new <div> mylayout. I'm thinking that the search and underneath links must be inside of some parent property....Wonder how that's gonna look on a 800px wide browser.

[Lynne]

You wrote:
You will see what I mean when you go to the site, the search and links under the tabs are all outside of 1200px despite being within my <div>
Those items are in the <div class="above_body"> and that is why they are not within the 1200px.

[dano9258]

You wrote:

Those items are in the <div class="above_body"> and that is why they are not within the 1200px.

So are the header and navbar, but I those into my own <div> to make them at the 1200px. The search box and underneath links were also placed in that div i created (which is inside of above_body). But they won't display right still..

I don't know if you guys get what I'm saying :(