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]

Originally Posted by 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?

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.