Yet another fixed-width & centered question

[martin05rc]

Using Firefox and the "Web developer" add-on I set out to identify the CSS areas I needed to focus on.

First I disabled all CSS just to see what the underlying HTML data looked like:
Attachment 115673

The nesting of the varioius items under "Forum" bothered me a bit at first. I think I ended-up learning that my concern was justified. Part of the issue is that we are not supposed to include display-related structure in the raw HTML data...CSS is there to put things where they belong. The <ul> from "Today's Posts" to "Quick Links" really belongs outside of the "Home" to "What's New?"

NOTE: I've butchered this up just to highlight the relevant aspects. The real code is has a lot more in it. "..." denotes something that was cut out

<div id="navbar" class="navbar">
<ul id="navtabs" class="navtabs floatcontainer">
     <li>
          <a ...>Home</a>
     </li>
     <li ...>
          <a ...>Forum</a>
               <ul ...>
                   <li>
                        <a ...>Today's Posts</a>
                   </li>
                   <li>
                        <a ...>FAQ</a>
                   </li>
                   <li>
                        <a ...>Calendar</a>
                   </li>
     
                   ...					
               </ul>
     <li>
          <a ...>Blogs</a>
     </li>
     <li>
          <a ...>What's New?</a>
     </li>
</ul>

If I didn't butcher the above too badly it might be easy to see that there is no way to reference the <ul> under the "Forum" branch of the "tree" to the fixed-width-and-centered body of the page. Well, at least I don't know if there's a way...but I did try really hard to find it! My guess is that the branch that is now under the "Forum" branch should have been an entirely separate <ul> at the same level as the "Home ~~ What's New?" <ul>. With this in place it is trivial (again, for me --a non-expert) to make both of these areas follow the body.

Instead this is what happens. I modified "vbulletin-chrome.css" --which is where most of the action seems to happen-- as follows in order to simply create borders around areas of interest:

...
/*************************************************/
/* NAVBAR */

.navbar {
/* START ADDED */
border: 4px solid black;
/* END ADDED */

	position:relative;
...

This is what it looks like on IE7:
Attachment 115660

Now, if I change the width of the browser:
Attachment 115661

I looked at the CSS and decided to make this change:

...
/*************************************************/
/* NAVBAR */

.navbar {
/* START ADDED */
border: 4px solid black;
position: static;  /* Want to inherit from parent container */
/* END ADDED */

/*	position:relative;    COMMENTED THIS OUT */
...

This is what it looks like on IE7:
Attachment 115662
Oh, yes, check out where the search textbox landed!

This is were I started to see the repercussions of having that submenu appear where it did within the raw HTML.

As the browser window was widened this is what happened:
Attachment 115663

OK, first things first...I wanted to go after that "Home" button. This is where Firefox and Web Developer came in handy again by being able to inspect the page and find the CSS code that needed attention:

...
.navtabs li.selected a.navtab {
/* START ADDED */
border: 2px solid black;
position: static;
/* END ADDED */

	color:{vb:stylevar navbar_tab_linkhover_color};
	background:{vb:stylevar navbar_tab_selected_background};
        _background-image:none;
/*	position:relative;   COMMENTED OUT */
	top:-{vb:stylevar navbar_tab_selected_top_width}px;
	padding-top:{vb:stylevar navbar_tab_selected_top_width}px;
	z-index:10;
}
...

After these changes this is what it looked like on initial load:
Attachment 115664

And after a sizable change of the browser's window width:
Attachment 115665

This looked very promising despite little details here and there.

Now for the sub-menu. Again, using Firefox/Web Developer:
Attachment 115666

Reposition with a CSS change:

...
.navtabs ul {
/* START ADDED */
border: 2px solid black;
position: static;

/* END ADDED */

/*	background: {vb:stylevar navbar_background.backgroundColor}; */
/*	position:absolute;    COMMENTED OUT */
	top:{vb:stylevar navbar_tab_size.height}px;
	{vb:stylevar left}:0px;
	width:100%;
/*        border-top:{vb:stylevar navbar_tab_border};  COMMENTED OUT */
...

This is what it looks like now:
Attachment 115668

And this is where I show my ignorance because I really don't know how to relate the submenu area to the container for the navbar. I also don't understand why the "Home" button container (I guess) is elongating and doing so because of a child element.

I played around with this a lot more. I got the search input area and links back up to the navbar --not perfectly-- and a few other tweaks. I can't say that I got the feeling that the puzzle could be easily solved. The feeling that I did start to get was that a number of elements were located in very inconvenient places within the raw HTML code, which made it difficult, if not impossible, to repair the positioning issues with CSS --at least at my level of understanding.

I forgot to mention that the fixed-width-and-centered layout is EXACTLY the layout vbulletin.org uses! Which leads me to believe that it may have been easy to do this in 3.6.x but nearly impossible in 4.x.x ? What changed?

Any thoughts? How hard would it be to fix this?

Thanks,

-Martin