CSS question regarding VB
 

I have been working on the stylevars in a new vb color scheme I'm working on.. I would like to add something to the top of my forums... a black bar that will hold a menu in it... If you go to http://www.eightysixed.com - the menu at the top that says "HOME" and "CLOTHING" is the menu I am trying to re-create.

I can recreate this using CSS in the additional.css template - but I'm lost on where exactly to place the code in order to make it appear. my forums are at http://www.audioneeds.com/forums/forum.php

Any help would be GREATLY appreciated

Either put it in additional.css or if you make your own css file place this in the html

<link rel="stylesheet" type="text/css" href="{vb:raw vbcsspath}mystyle.css" />

Thank you nerbert, but which HTML file or TEMPLATE would I place the code in order to bring the CSS and links in the menu...? I explained where I wanted the menu in my first post, so just wondering which template that's in.

If you put the HTML at the top of the header it should show on every page.

Nerbert, that worked! But here is my problem. I created a DIV with a white background and placed it at the top of the header, and sure enough it showed... BUT the new div with the white background has the same WIDTH as my entire forum (960px) - but I want that background to stretch across the entire top of the page.. just like that Eighty Sixed website I posted.

Then I think you will have to go to each page template and put a div above {vb:raw header}. Most (but not all) page templates are in all caps

Okay, I tried that on the FORUMHOME template, and still the same width as the forum... not going all the way accross

Try putting style="margin:0px -10px 0px -10px;" in your div tag and see if that makes it wider. The ten pixels is just a guess, if that works then either tinker around with different values or see if you can find the padding property for the body tag.

If it works you could probably put your div back in header and save having to edit all your page templates.

Okay that is doing it! Awesome! Now the only thing is, how do I get it to touch the browser window on both sides? It's allowing me to define the size via pixels, but I need it to go all the way through from one side of the browser to the other

I think the 2nd and 4th values (right and left, respectively) should be the same as the corresponding values of body padding, but negative.

StyleVars > Common > body_padding

The default value is 20px

That's not quite doing it... I think normally if I would set the width to 100%, it should work, but it's not... Here is a link to what it looks like - It's the WHITE box at the top that says TEST - I want that white box to extend from one edge of the browser to the other... Normally width: 100% should do that... i dont get it.

http://www.audioneeds.com/forums/content.php?styleid=10

Just add a few more (negative) pixels to the left and right values until you get it just right. You have to have a negative left margin or it will start above the left edge of the header.

Yeah, but that will not compensate for different browser sizes.. This should adjust with the browser size the same way the Width:100% would... I'm not sure this should go in the header template...

It will adjust automatically with the window size. Just use trial and error with those negative margin values until you get it all the way to the edge. You won't blow anything up.

If i make it too large, a scroll bar appears at the bottom of the screen... or if you adjust the window size, and make the window smaller, the scroll bar is there...

I think it has something to do with the doc_width being at 960px. Since the doc_width is making the entire site 960px width... this div element that we're trying to make width 100% - its nto allowing it... I could be wrong, but that's what I'm thinking.

--------------- Added [DATE]1321944028[/DATE] at [TIME]1321944028[/TIME] ---------------

Okay, I finally figured this out after ridiculous amounts of trial and error. Going to explain it incase someone else ever tries to do the same thing and can't figure it out... It's actually so damn simple, I'm upset I struggled with it for so long.

You need to go into the header template and before ANYTHING else, enter your div info with the position at absolute, and the width at 100%

<div style="position:absolute; top:0px; left:0px; width:100%;">[DIV CONTENTS GO HERE]</div>

For some reason when i add this in the additional.css file, it doesnt work.

If you make those negative margins too large you get the scrollbar, too little it doesn't span the whole way. That's why I suggested trial and error until it's just right. -25px would be close, maybe 24 or 26.

<div class="topdiv"> ....... </div>

In additional.css:

.topdiv {
margin:0px -25px 0px -25px;
}

But like I said, experiment with that margin figure.