Skip navigation
ClaireV2012
ClaireV2012 Calculating status...
Currently Being Moderated

Spry Menu Bar Background Colour

Jul 28, 2012 3:24 AM

Dear all,

 

I have a horizontal spry menu bar which I have changed from a full width bar (160px each item) to a bar with 2em padding to left and right of each item because 2 of the items are longer than the original specified width of the menu bar items.

 

The bar does not stretch full width now but I would like the colour of the bar to continue across the page.  Currently after the last item the background is white. 

 

I have enclosed it in a menu bar div which is inside the header div (that has a background colour of #03172A).  The menu bar class has a background colour of #6DA8E2 and width of 960px (the entire width of the page)

 

I have tried setting the ul.MenuBarHorizontal class with a background of #6DA8E2 but nothing seems to change the background from white.

 

menu bar issue.png

Just wondering if anyone knows where I am going wrong please?  Or if there is a way to make the menu full width whilst having different size buttons.  The only button that is an issue is the Professional Intermediary Services item.

 

Many thanks and any help is greatly appreciated.

 

Claire.

1229 Views   12 Replies   Latest reply: ClaireV2012, Aug 2, 2012 3:03 AM
 
Replies
  • Ken Binney
    Currently Being Moderated
    1. Ken Binney,
    Jul 28, 2012 4:32 AM   in reply to ClaireV2012
    Report

    Hi Claire -

     

    It's very hard to give you the precise solution when you don't put you files online and provide a link so we can see all your code in the context of your site.

     

    Are you trying to color the white background and/or space out your links to fill the entire menu bar width?

     

    Your current online Spry CSS has no BG color specified for the bar.

    http://www.simpl-e.im//SpryAssets/SpryMenuBarHorizontal.css

     
    |
    Mark as:
  • ClaireV2012
    Currently Being Moderated
    2. ClaireV2012,
    Jul 28, 2012 4:50 AM   in reply to Ken Binney
    Report

    Apologies Ken, I have now uploaded the index page to a test directory.  http://www.simpl-e.im/test/index.html

     

    I would like to either space the links out to fill the page width or change the colour to the background link colour so that the menu bar fills the width.

     

    Many thanks for your help, Claire.

     
    |
    Mark as:
  • Ken Binney
    Currently Being Moderated
    3. Ken Binney,
    Jul 30, 2012 5:12 AM   in reply to ClaireV2012
    Report

    Try this in your CSS

     

     

    ul.MenuBarHorizontal a {
        background-color: #89A8D2;

        color: #03172A;

        cursor: pointer;

        display: block;

        padding: 0.5em 2.86em;

        text-decoration: none;

    }

     

    This is what it would look like in Firefox Click to see full size.

    claire.jpg

     
    |
    Mark as:
  • Ken Binney
    Currently Being Moderated
    4. Ken Binney,
    Jul 30, 2012 7:10 AM   in reply to ClaireV2012
    Report

    One more thought for you Claire.

    If you don't mind a suggestion, see how you like the look of your "container" CSS

    by adding the three bolded lines for a border to finish off the left side of your pages:

     

    .container {
        background-color: #FFFFFF;

        border-color: #666666;

        border-style: solid;

        border-width: thin;

        box-shadow: 5px 5px 5px #666666;

        margin-left: auto;

        margin-right: auto;

        width: 960px;

    }

     

    The left border would look like this. Click to see full width.

    (disregard the text anomalies caused by my reducing view size for the purposes of this picture)

     

    claire2.jpg

     
    |
    Mark as:
  • ClaireV2012
    Currently Being Moderated
    5. ClaireV2012,
    Jul 31, 2012 1:12 AM   in reply to Ken Binney
    Report

    Thank you ever so much for your replies Ken, apologies for the delay in responding I have been away from the office for a few days.

     

    I will update with these changes today and let you know how I get on.

     

    Best regards, Claire.

     
    |
    Mark as:
  • Ken Binney
    Currently Being Moderated
    6. Ken Binney,
    Jul 31, 2012 5:38 AM   in reply to ClaireV2012
    Report

    Well, we missed you; hope you had a great time.

    I just noticed that you are familiar with CSS shorthand in which case you can accomplish the left border I suggested with only this one new line (instead of three) in your container CSS

     

    border: thin solid #C0C0C0;

     

    Note I changed the color to soften the effect.

    You can see the border effect here:

     

    http://www.peattiecapital.com/

     
    |
    Mark as:
  • ClaireV2012
    Currently Being Moderated
    7. ClaireV2012,
    Jul 31, 2012 7:11 AM   in reply to Ken Binney
    Report

    thank you.

     

    I have updated as per your previous email and I really like the border - good call.

     

    With regard to the menu, it doesn't appear to work in Chrome or IE as it doesn't occupy the full width...  just wondering if there is anyway to make the .menu_bar the same colour as the navigation menu please?

     

    Many thanks, Claire.

     
    |
    Mark as:
  • osgood_
    Currently Being Moderated
    8. osgood_,
    Jul 31, 2012 7:24 AM   in reply to ClaireV2012
    Report

    Because the <li> tags in the menu_ bar <div> are floated you have to clear the floats in order for the <div> to wrap itself around the <li> tags.

     

    Insert <br style="clear: both;" /> directly before the closing </div> menu_bar tag (see below)

     

    </ul>

        <br style="clear: both;" />

      </div><!--end .menu_bar -->

     

     

    Then make the backgorund colour of the menu_bar css the same as your navigation items.

     
    |
    Mark as:
  • ClaireV2012
    Currently Being Moderated
    9. ClaireV2012,
    Jul 31, 2012 7:38 AM   in reply to osgood_
    Report

    Perfect that works fabulously.  Thank you so much to you both. 

     
    |
    Mark as:
  • ClaireV2012
    Currently Being Moderated
    10. ClaireV2012,
    Jul 31, 2012 7:39 AM   in reply to ClaireV2012
    Report

    Darn I can't mark both as correct!

     
    |
    Mark as:
  • Ken Binney
    Currently Being Moderated
    11. Ken Binney,
    Aug 1, 2012 11:02 AM   in reply to ClaireV2012
    Report

    Do you get Hazardous Duty Pay as a web developer for the IOM?

     

    http://www.youtube.com/watch?v=qlSqqcu9CnM

     
    |
    Mark as:
  • ClaireV2012
    Currently Being Moderated
    12. ClaireV2012,
    Aug 2, 2012 3:03 AM   in reply to Ken Binney
    Report

    heck yeah!  Although my sailing on the Scillonian from Lands End to the Isles of Scilly was WAAAAAAAAAYYYYYYYYY worse than that!  People were lying on the floor through choice!

     

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points