How to show the SharePoint navigation tabs when in edit mode

A lot of times, the space allocated to header and logo is insufficient for a branded customized header. The regular out-of-the-box navigation tabs are not shown in edit mode, because the ribbon needs the space taken by both header and tabs in view mode.

To allocate more space for the header and logo image, many clients prefer to expand the header height by allocating the height used by the tabs, thus moving the tabs further below. When the users go into edit mode though, the Ribbon now only takes up once the height of the header and once the height of the tabs. It will move the page up when in edit mode. A solution is to always show the navigation regardless of mode.

In this case, view mode would show:

• new header(height of old header + height of tabs)
• tabs

Edit mode would show:

• ribbon (height of old header + height of tabs by default)
• tabs

What happens out-of-the-box: when in edit mode, the s4-titlerow  (which contains both Header area and Tabs) gets a "display:none;" and the Ribbon becomes visible.

Simply move the entire html structure from under s4-topheader2 from inside s4-titlerow right after s4-titlerow.

How to center a SharePoint master page

By default, SharePoint 2010 master pages expand to the current browser resolution.
In order to fix the width of the site pages and center them for bigger resolutions, several steps can be taken( below).
For the example below, let's consider 1280px to be the standard resolution. The site should cover the entire browser width when rendered in 1280px. Bigger resolutions such as 1600px should center the site in the middle of the browser and leave a gray margin left and right.

• Find the div called s4-workspace. This is the entire page area and it gets expanded by SharePoint according to the current resolution. Add class="s4-nosetwidth". This will prevent the area from expanding to the browser's resolution.
• Set the body to allow overflow. This will add the scrollbar on the browser window, not the workspace.    The workspace will take up only the center part of the page for bigger resolutions than 1280px, this means we don't want the scrollbar to appear on the centered part, but on the actual browser window.

          body.v4master{ overflow:visible !important; min-height:1200px; height:auto;}
          body #s4-workspace{   min-height:1200px; height:auto; overflow-y:hidden;}

• Apply any generic text styles to s4-workspace and set the width of the workspace. The width is 1258 instead of 1280 to allow for a right vertical scrollbar and border on left and right.

          #s4-workspace

          {/* generic text styles for the entire site */

         font-family:Tahoma;

         font-size:12px;

        color:#434345;

        width:1258px;

           }

• Under the body tag, create two new div-s <div id="main"><div id="centered">

          #main{overflow:visible !important;}
          #area{ background-color:#F6F6F6;}
          #centered{
             margin:0 auto;
           width:1260px;
           border-left:1px solid #B8BABD;
   border-right:1px solid #B8BABD;}