locked
How to Center Ribbon with CSS?!? RRS feed

  • Question

  • Hi,

    I am working with CSS and stapling a feature to My Sites but I can't seem to get everything centered on the page, I've attached a link to a screenshot of the tiny bit that is off, any idea how to fix this?

    As you can see in the image, the content and the top ribbon are a little bit off, I've also noticed that the cross bar for the content is not right beside it but rather on the far right of the page....like right beside where the browser scroll bar is.

    http://i828.photobucket.com/albums/zz208/TooT3R/css_issue.png

    And this is the CSS code:

    body

    {

    background-image: url(bg.png);

    background-color: black;

    background-repeat:repeat-x;

    background-attachment:fixed;

    background-position: left top;

    body

    #s4-ribbonrow {

    background-color:black;

    width: 1041px !important;

    margin-left: auto !important;

    margin-right: auto !important;

    .ms-globalnav

    {

    background-color: black !important;

    border-bottom: 1px solid #333333;

    height: 43px !important;

    width: 1041px !important;

    margin-left: auto !important;

    margin-right: auto !important;

    .s4-sn

    li.static > a:hover, .s4-sn li.static > a, .ms-contactcardtext1, .ms-newsfeedheader, .ms-WPBody a, .ms-contactcardtext2, .ms-contactcardtext2 a {

    color: #f06b00 !important;

    .s4-mysitetn

    a:hover {

    text-decoration: none !important;

    .customBodyHolder

    .customPageWidth {

    .customBodyHolder

    {

    min-height:200px;

    padding-bottom: 50px;

    width: 1041px;

    .s4-sn

    , .ms-profilepageheader {

    background-color:#efefef;

    .ms-siteactionsmenuinner

    {

    background:url("/_layouts/images/bgximg.png") repeat-x scroll 0 -467px #313031;

    border-color:#313031;

    .s4-ca

    {

    float: none !important;

    margin: auto !important;

    width: 1041px !important;

    }

    body

    #s4-leftpanel {

    display:none;

    }

    body

    #s4-bodyContainer {

    margin: auto !important;

    width: 1041px !important;

    }

    }

    /* main body area */

    }

    /* make the site actions colors match the branding */

    }

    /* light blue area at top of profile */

    }

    /* change padding and height */

    }

    /* remove the overflow scroll */

    }

    /* hide hover underline in top bar */

    }

    /* font colors */

    }

    /* ribbon background */

    }

    /* ribbon color */

    Thank You!

    • Edited by tudorH Friday, July 13, 2012 9:22 PM
    Friday, July 13, 2012 9:20 PM

Answers

All replies

  • I've done this before in your case I would just shim the whole thing a few pixels with position: relative and move it over until it matches.

    I don't understand what you are referring to when you say 'crossbar', you should have 1 scroll bar and it would be in that spot. SharePoint controls the scrolling in 2010 and removes the browser scrolling. This is to keep the ribbon at the top always.

    If you want that back you need to look at undocking the ribbon

    http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?PageType=4&ListId={72C1C85B-1D2D-4A4A-90DE-CA74A7808184}&pID=426


    -tom daly

    • Marked as answer by tudorH Tuesday, August 7, 2012 3:35 PM
    Friday, August 3, 2012 4:34 AM
  • I've done this before in your case I would just shim the whole thing a few pixels with position: relative and move it over until it matches.

    I don't understand what you are referring to when you say 'crossbar', you should have 1 scroll bar and it would be in that spot. SharePoint controls the scrolling in 2010 and removes the browser scrolling. This is to keep the ribbon at the top always.

    If you want that back you need to look at undocking the ribbon

    http://sharepoint.microsoft.com/blog/Pages/BlogPost.aspx?PageType=4&ListId={72C1C85B-1D2D-4A4A-90DE-CA74A7808184}&pID=426


    -tom daly

    Thanks Thomas, that's what I ended up doing...I just moved everything over using position: relative and it seems to be working fine.

    Sorry about the 'crossbar', I totally meant scroll bar. haha.

    Tuesday, August 7, 2012 3:34 PM